I have two options that show different questions each. If the user decides to change their option at the last minute. Any inputs within option 1 will then hide and show option 2.
But i need all input texts to be removed and disabled from option 1 to continue to option 2 if they decide to change the option at the last minute.
Ive tried to switch the inputs with different names/ids and i tried disabling them after they change from option 1 to option 2. But it shows both options when sent to their email after being finished.
This is the code to disable the input from an option
If they choose option 1 and then option 2 then therefore all of option 1's questions will be disabled BUT it will not remove the texts nor will it disable it.
HTML CODE Option 1 & 2
<select id='dropdown'>
<option value="1">Pet questions</option>
<option value="2">Income questions</option>
</select>
HTML CODE questions & answers to option 1
How many dogs do you have? <input type="text" class="textInput1" />
How many cats do you have? <input type="text" class="textInput1" />
Do you like dogs more or cats? <input type="text" class="textInput1" />
HTML CODE questions & answers to option 2
How many dogs do you have? <input type="text" class="textInput2" />
How many cats do you have? <input type="text" class="textInput2" />
Do you like dogs more or cats? <input type="text" class="textInput2" />
jQuery CODE
$('#dropdown').change(function() {
if( $(this).val() == 1) {
$('.textInput1').prop( "disabled", false );
} else {
$('.textInput1').prop( "disabled", true );
}
if( $(this).val() == 2) {
$('.textInput2').prop( "disabled", false );
} else {
$('.textInput2').prop( "disabled", true );
}
});
What i want to know is, how can i fit within this code the option to remove the input text, at the same time it has been disabled?
Looks like the only problem you have with your code is that the value of the select is a string, so you need to compare them like this: $(this).val() === "1". See the code snippet below.
$("#dropdown").on("change", function () {
if ($(this).val() === "1") {
// Show the pet questions
$('.textInput1').prop("disabled", false);
$('.textInput2').prop("disabled", true);
} else if ($(this).val() === "2") {
// Show the income questions
$('.textInput1').prop("disabled", true);
$('.textInput2').prop("disabled", false);
}
});body {
display: flex;
flex-direction: column;
}
.container {
max-width: 300px;
}
.questions-container {
display: flex;
flex-direction: column;
width: auto;
margin-top: 10px;
border: 2px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<select id='dropdown'>
<option value="1">Pet questions</option>
<option value="2">Income questions</option>
</select>
</div>
<div id="questions1" class="questions-container">
How many dogs do you have? <input id="input1-1" type="text" name="input1" class="textInput1" />
How many cats do you have? <input id="input1-2" type="text" name="input1" class="textInput1" />
Do you like dogs more or cats? <input id="input1-3" type="text" class="textInput1" />
</div>
<div id="questions2" class="questions-container">
How much do you earn a week? <input type="text" class="textInput2" />
How many tax do you pay a week? <input type="text" class="textInput2" />
Do you have a partner with a paying job? <input type="text" class="textInput2" />
</div>It would probably also be good to hide the questions if the user does not need to answer them. I would wait till the user selects a set of questions, then unhide that group of questions. See below:
$("#dropdown").on("change", function () {
let speed = 200;
if ($(this).val() === "0") {
// make both sets of questions enabled to that the user cannot submit the form
$('.textInput1').prop("disabled", true);
$('.textInput2').prop("disabled", true);
// hide the questions
$("#questions1").slideUp(speed);
$("#questions2").slideUp(speed);
}
if ($(this).val() === "1") {
// Set only the pet questions to be enabled
$('.textInput1').prop("disabled", false);
$('.textInput2').prop("disabled", true);
console.log(".textInput1 disabled = " + $('.textInput1').prop("disabled"));
console.log(".textInput2 disabled = " + $('.textInput2').prop("disabled"));
// unhide the pet questions
$("#questions1").slideDown(speed);
$("#questions2").slideUp(speed);
} else if ($(this).val() === "2") {
// Show the income questions
$('.textInput1').prop("disabled", true);
$('.textInput2').prop("disabled", false);
console.log(".textInput1 disabled = " + $('.textInput1').prop("disabled"));
console.log(".textInput2 disabled = " + $('.textInput2').prop("disabled"));
// unhide the income questions
$("#questions1").slideUp(speed);
$("#questions2").slideDown(speed);
}
});
$(document).ready(function () {
$("#questions1").hide();
$("#questions2").hide();
})body {
display: flex;
flex-direction: column;
}
.container {
max-width: 300px;
}
.questions-container {
display: flex;
flex-direction: column;
width: auto;
margin-top: 10px;
border: 2px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<select id='dropdown'>
<option value="0">Select...</option>
<option value="1">Pet questions</option>
<option value="2">Income questions</option>
</select>
</div>
<div id="questions1" class="questions-container">
<label>How many dogs do you have?</label><input id="input1-1" type="text" name="input1" class="textInput1" />
<label>How many cats do you have?</label><input id="input1-2" type="text" name="input1" class="textInput1" />
<label>Do you like dogs more or cats?</label><input id="input1-3" type="text" class="textInput1" />
</div>
<div id="questions2" class="questions-container">
<label>How much do you earn a week?</label><input type="text" class="textInput2" />
<label>How many tax do you pay a week?</label><input type="text" class="textInput2" />
<label>Do you have a partner with a paying job?</label><input type="text" class="textInput2" />
</div>Also you should add <lable> tags around the question labels like above.