After input is disable, how do i to remove the text inserted previously?

Question

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?

You can change the `val('')` of an input, even if it is disabled. But a different point that I was thinking of while reading your question. What issue is this causing? Because disabled inputs will not be sent on form submits. — Taplar, May 02 '19 at 22:44
Well if in case the inputs that are disabled are not sent, the jquery code still doesn't want to work. I'm not sure why or what it needs. I got it from https://jsfiddle.net/wx38rz5L/2268/ and it works there but it just doesn't seem to be working for me. — Marichuy, May 02 '19 at 23:02
put them in a form, give the inputs ids, and submit [the filled-in id] If you want to clear the values set the input value =" " — Rachel Gallen, May 02 '19 at 23:23

score 1 · Accepted Answer · answered May 03 '19 at 02:12

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.

After input is disable, how do i to remove the text inserted previously?

1 Answers1