После того, как ввод отключен, как мне удалить текст, вставленный ранее?

Question

У меня есть два варианта, которые показывают разные вопросы каждый.Если пользователь решает изменить свою опцию в последнюю минуту. Любые входы в опции 1 будут затем скрываться и показывать опция 2 .

Но мне нужно, чтобы все входные тексты были удалены и отключены из варианта 1, чтобы перейти к варианту 2, если они решат изменить параметр в последнюю минуту.

Iveпопытался переключить входы с разными именами / идентификаторами, и я попытался отключить их после того, как они перешли с варианта 1 на вариант 2. Но он показывает обе опции при отправке на их электронную почту после завершения.

Этокод для отключения ввода из опции

Если они выберут опцию 1, а затем опцию 2, то все вопросы варианта 1 будут отключены НО , текст не будет удалени при этом это не отключит это.

HTML-код вариант 1 и 2

<select id='dropdown'>
<option value="1">Pet questions</option>
<option value="2">Income questions</option>
</select>

HTML-код вопросы и ответы на вариант 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-код вопросы и ответы на вариант 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 );
}
});

Что я хочу знать, как я могувписать в этот код возможность удалить введенный текст, при этом он был отключен?

Answer 1

Похоже, единственная проблема, с которой вы столкнулись в своем коде, заключается в том, что значение select является строкой, поэтому вам нужно сравнить их следующим образом: $(this).val() === "1". См. Фрагмент кода ниже.

$("#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>

Вероятно, было бы также хорошо спрятать вопросы, если пользователю не нужно на них отвечать. Я бы подождал, пока пользователь не выберет набор вопросов, а затем отобразил бы эту группу вопросов. Смотрите ниже:

$("#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>

Также вы должны добавить <lable> тегов вокруг меток вопросов, как указано выше.