We Keep Coding

Trying to make it so if the 3rd option on the dropdown is chosen, then the text boxes will disable and a new box will appear

I have three options on the drop down when the third option is selected i want the two boxes to be hidden and disabled then the hidden box to appear. Any help is appreciated. I have no class ID for the drop down.
function changetextbox()
if (document.getElementsByName("customerType")[0].options[2].selected = true;) {
document.getElementById("retCustDetails").disable= true;
document.getElementById("tradeCustDetails").style.visibility = "visible";
} else {
document.getElementById("retCustDetails").disable= false ;
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type: <select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>

Frist add an oninput event to the select tag and an ID to it so you can access it easier like this:
<select id="customerType" name="customerType" oninput="checkValue()">
Then make this script that will get the value of the select element and then check which elements it needs to show or hide:
function checkValue() {
var selectedValue = document.getElementById('customerType').value;
var retEle = document.getElementById("retCustDetails");
var trdEle = document.getElementById("tradeCustDetails");
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
You should get this once your done:
function checkValue() {
var selectedValue = document.getElementById('customerType').value;
var retEle = document.getElementById('retCustDetails');
var trdEle = document.getElementById('tradeCustDetails');
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type:
<select id="customerType" name="customerType" oninput="checkValue()">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>
</section>
Edit
Since your not allowed to change the HTML, try this script here instead:
document.getElementsByName('customerType')[0].oninput = function() {
var selectedValue = document.getElementsByName('customerType')[0].value;
var retEle = document.getElementById('retCustDetails');
var trdEle = document.getElementById('tradeCustDetails');
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
So you'll end up with:
document.getElementsByName('customerType')[0].oninput = function() {
var selectedValue = document.getElementsByName('customerType')[0].value;
var retEle = document.getElementById('retCustDetails');
var trdEle = document.getElementById('tradeCustDetails');
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type: <select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>
</section>

Maybe something like that? I'm not exactly sure if that is what you want to have.
$('#tradeCustDetails').css({ 'display': 'none' });
$(document).on('change','select',function(){
var selectvalue = $('select').val();
if(selectvalue == 'trd'){
$('#retCustDetails').css({ 'display': 'none' });
$('#tradeCustDetails').css({ 'display': 'block' });
$('#tradeCustDetails').css({ 'visibility': 'visible' });
} else {
$('#retCustDetails').css({ 'display': 'block' });
$('#tradeCustDetails').css({ 'display': 'none' });
$('#tradeCustDetails').css({ 'visibility': 'hidden' });
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type: <select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>

Divs don't have a "disabled." So, you'll have to disable each child of the div.
document.getElementsByName('customerType')[0].onchange =
function changetextbox() {
var inp = document.getElementById("retCustDetails").childNodes;
if (document.getElementsByName("customerType")[0].options[2].selected === true) {
for (var i = 0; i < inp.length; i++) {
inp[i].disabled = true;
}
document.getElementById("tradeCustDetails").style.visibility = "visible";
} else {
for (var i = 0; i < inp.length; i++) {
inp[i].disabled = false;
}
document.getElementById("tradeCustDetails").style.visibility = "hidden";
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type:
<select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename"> Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>

Submit form button giving error "This page is working"!

I am trying to submit the form than display the responses of the form inside a new div that is currently hidden, however, each time I hit submit it goes to an error page. When I use onclick inside the submit button it works. However, I want it to check that the user has answered all the questions before submitting the form.
Here is my html for just the form:
<footer class="major container medium">
<div id="hideSignUp">
<h3>Signup Today!</h3>
<p>Simply enter your email and answer a few quick questions.<br>As an added BONUS, you'll receive an opportunity for a Free bottle of Grass-Fed, Low Carb Protein!</p>
<button onclick="buildQuiz()" class="button">GET MY EBOOK NOW</button>
</div>
<div id="showQuiz" style="display:none">
<form method="POST" id="quiz" onsubmit="return results();">
<select name="gender" id="gender" required>
<option value="">GENDER:</option>
<option value="male">MALE</option>
<option value="female">FEMALE</option>
</select>
<br>
<select name="age" id="age" required>
<option value="">AGE</option>
<option value="18-24">18-24</option>
<option value="25-34">25-34</option>
<option value="35-44">35-44</option>
<option value="45-54">45-54</option>
<option value="55-64">55-64</option>
<option value="65orolder">65 or older</option>
</select>
<br>
<select name="fitnessgoal" id="goal" required>
<option value="">WHAT IS YOUR FITNESS GOAL?</option>
<option value="loseW">LOSE WEIGHT</option>
<option value="buildM">BUILD MUSCLE</option>
<option value="betterH">BETTER OVERALL HEALTH</option>
<option value="trainE">TRAIN FOR AN EVENT</option>
</select>
<br>
<select name="vitamin" id="vitamin" required>
<option value="">DO YOU USE ANY VITAMINS OR SUPPLEMENTS?</option>
<option value="yes">YES</option>
<option value="no">NO</option>
</select>
<br>
<select name="meal" id="meal" required >
<option value="">WHAT KIND OF MEALS ARE YOU MOST INTERESTED IN?</option>
<option value="keto">KETO</option>
<option value="paleo">PALEO</option>
<option value="both">KETO + PALEO</option>
<option value="vegan">VEGAN</option>
</select>
<br>PLEASE ENTER YOUR EMAIL:<br>
<input type="email" name="email" id="email" required><br>
<input type="submit" value="Submit">
</form>
<div id="results" style="display:none">
GENDER: <p id="genderResult"></p>
AGE: <div id="ageResult"></div><br>
FITNESS GOAL: <div id="goalResult"></div><br>
VITAMINS/SUPPLEMENTS: <div id="vitaminsResult"></div><br>
MEAL PREFERENCE: <div id="mealResult"></div><br>
EMAIL: <div id="emailResult"></div>
</div>
</div>
</footer>
here is my javascript
var button = document.querySelector("button");
function buildQuiz(){
var signUpBtn = document.getElementById("hideSignUp")
var quiz = document.getElementById("showQuiz")
if(signUpBtn.style.display === "block" && quiz.style.display === "none"){
signUpBtn.style.display = "none";
quiz.style.display = "block";
} else{
signUpBtn.style.display = "block";
quiz.style.display = "none";
}
}
function genderResultsFunc(){
var gender = document.getElementById("gender");
var genderResult = gender.options[gender.selectedIndex].text;
document.getElementById("genderResult").innerHTML = genderResult;
}
function results(){
var quizResults = document.getElementById("results");
if(quizResults.style.display === "none"){
quizResults.style.display = "block";
quiz.style.display = "none";
genderResultsFunc();
}else {
quizResults.style.display = "none";
quiz.style.display = "block";
}
}
button.addEventListener("click", buildQuiz);
document.getElementById('quizResults').addEventListener('click', results);

Your submit handler is not returning anything
function results() {
var quizResults = document.getElementById("results");
if (quizResults.style.display === "none") {
quizResults.style.display = "block";
quiz.style.display = "none";
genderResultsFunc();
return true;
} else {
quizResults.style.display = "none";
quiz.style.display = "block";
return false;
}
}

Changing number of text fields, depending on drop down list choice

I'm trying to show two test fields after choosing "id" from drop down list. It's set on hidden and im trying to make it visible when "id" is selected. Unfortunately it's not working. Please help!
<form>
<input class="hidden" type="text" id="textField2">
<input type="text" id="textField">
<select id="select" name="selectData">
<option value="firstName">Name</option>
<option value="id">Id</option>
</select>
<input id="filter" type="button" value="Filter">
<script>
var temp = document.getElementById("textField2").value;
if(document.getElementById("select")[0].value === "id"){
temp.style.visibility = "visible";
}else {
temp.style.visibility = "hidden";
}
</script>
</form>
There probably is a mistake somewhere or maybe there's any other (better) way to do this?

You can use the following solution:
<form>
<script>
function toggle() {
var temp = document.getElementById("textField2");
//check for selected option.
if(document.getElementById("select").value === "id"){
temp.style.visibility = "visible";
} else {
temp.style.visibility = "hidden";
}
}
</script>
<input class="hidden" type="text" id="textField2" style="visibility:hidden;">
<input type="text" id="textField">
<select id="select" name="selectData" onchange="toggle()">
<option value="firstName">Name</option>
<option value="id">Id</option>
</select>
<input id="filter" type="button" value="Filter">
</form>

How to disable fields in html using javascript

My code isn't disabling the other fields. please help
i am trying to select either a participant or exhibitor.once the participant is selected the other fields must be disable.
the Html
<label> <span>Test:</span>
<select id="reg" name="reg" onkeyup="disableField()">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
the javascript
var disableField = function () {
var state = document.getElementById("reg").value === "Participant";
document.getElementById("test1").disabled = state;
document.getElementById("test2").disabled = state;
};

Do not use inline javascript. It makes your code messy and not reusable.
[Edit] This is a working example for you:
<html>
<head> <title></title></head>
<body>
<label> <span>Test:</span>
<select id="reg" name="reg">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
<script type="text/javascript">
//<!--
var obj = document.getElementById("reg");
obj.onchange = function(event){
if(this.value=="Male"){
document.getElementById("test1").disabled = 'disabled';
document.getElementById("test2").disabled = 'disabled';
}else{
document.getElementById("test1").disabled = '';
document.getElementById("test2").disabled = '';
}
}
//--></script>
</body>
</html>
[/edit]
Have fun and may the source be with you.

Firstly, use onchange:
<select id="reg" name="reg" onchange="disableField()">
Secondly:
Your option values are 'male' and 'female'. So use that to compare:
var state = document.getElementById("reg").value == "Male";

try this ....it is working
<script type="text/javascript">
function disableField() {
var state = document.getElementById("reg").value === "Participant";
if (state == false) {
document.getElementById("test1").style.visibility = "hidden";
document.getElementById("test2").style.visibility = "hidden";
}
};
</script>

Try this,
<label> <span>Test:</span>
<select id="reg" name="reg" onchange="disableField();">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
JS
function disableField() {
var val = document.getElementById("reg").value;
if(val == 'Male') {
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
} else {
document.getElementById("test1").disabled = false;
document.getElementById("test2").disabled = false;
}
}
Check value for Male not Participant
Here is the working code,
<html>
<head>
<script>
function disableField() {
alert('jdhsfg')
var val = document.getElementById("reg").value;
if(val == 'Male') {
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
} else {
document.getElementById("test1").disabled = false;
document.getElementById("test2").disabled = false;
}
}
</script>
</head>
<body>
<label> <span>Test:</span>
<select id="reg" name="reg" onchange="disableField();">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
</body>
</html>

Add an on change in the select list
<select id="reg" name="reg" onchange="SelectedIndexChanged(this)">
function SelectedIndexChanged(e){
var selectedValue= e.value;
//if Participant is selected
if(selectedValue == "Participant "){
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
}
}

Javascript - getElementById and help me

<script type="text/javascript">
function myfunction() {
if (document.getElementById('myform').value == "yes") {
document.getElementById('yesinput').style.display = '';
} else {
document.getElementById('yesinput').style.display = 'none';
}
}
</script>
<select name="myform" id="myform" onchange="myfunction()">
<option selected="selected">please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div id="yesinput" style="display:none">
<input name="input" type="text" />
</div>
<div id="noinput" style="display:none">
<input name="input" type="text" />
</div>
Help ya. How to make if we select No will have another input field below the id="noinput".
Now it's working if we select Yes. let me know

function myfunction() {
if (document.getElementById('myform').selectedIndex == 0) {
document.getElementById('noinput').style.display = 'none';
document.getElementById('yesinput').style.display = 'inline';
} else {
document.getElementById('noinput').style.display = 'inline';
document.getElementById('yesinput').style.display = 'none';
}
}

You can construct a new Element and append it to the DOM via Javascript. An example:
var newInput = document.createElement("input");
newInput.setAttribute("id", "newElement");
newInput.setAttribute("type", "text");
document.body.appendChild(newInput);