Как показать вход и удалить его на основе поля выбора?

Question

У меня есть два входа, мне нужно показать один из них на основе поля выбора:

html код:

<select id="type-price">
    <option value="">Choose one...</option>
    <option value="numeric">Numeric </option>
    <option value="percentage">Percentage</option>
</select>

<div id="input_type1">
    <input type="text" name="Numeric">
</div>
<div id="input_type2">
    <input type="text" name="Percentage">
</div>

jQuery код:

$('#type-price').on('change',function(){
    if($(this).val()=== "numeric"){

      $("#input_type1").show();
      $("#input_type2").hide();

    }else if ($(this).val()=== "percentage"){

      $("#input_type1").hide();
      $("#input_type2").show();

    }
});

Теперь все в порядке, но моя проблема: у меня php запрос, когда я показываю input_type1, затем скрываю input_type2 запрос, подхватывает второй, который null, поэтому мне нужно удалить скрыть в все формируют дом дерево!

Answer 1

Вы можете очистить div, который содержит вход, и у вас будет только один вход в вашей DOM. При каждом изменении выбора он будет заполнять число делителей входным значением html.

Также вы использовали неправильный селектор, селектор # предназначен для идентификатора, и вы использовали класс в вашем HTML код.

Селектор класса JQuery: ..

function removeAll() {
  $("#input_type1").html('');
  $("#input_type2").html('');
}

removeAll();

$('#type-price').on('change',function(){
  removeAll();
  if ($(this).val() === "numeric"){
    $("#input_type1").append('<input type="text" value="numeric">');
  } else if ($(this).val() === "percentage"){
    $("#input_type2").append('<input type="text" value="percentage">');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
  <option value="" disabled selected>Choose one...</option>
  <option value="numeric">Numeric </option>
  <option value="percentage">Percentage</option>
</select>

<div id="input_type1">
  <input type="text" value="numeric">
</div>
<div id="input_type2">
  <input type="text" value="percentage">
</div>

Answer 2

Помимо некоторых синтаксических проблем в селекторе классов jQuery, думая о производительности, просто лучше предотвратить отправку (невидимых) входных данных. Более короткое кодирование и меньше манипуляций с домом.

$('#type-price').on('change',function(){
    $('.input_type1').toggle($(this).val()=="numeric");
    $('.input_type2').toggle($(this).val()=="percentage");
});
//To prevent the non-visible from being posted
//Eithr we check the form using submit handler or the button and prevent the
//from being sent do our stuff then send it...
$('#myForm').submit(function() {
  $('input:hidden').attr('name', '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select id="type-price">
    <option value="">Choose one...</option>
    <option value="numeric">Numeric </option>
    <option value="percentage">Percentage</option>
</select>

<div class="input_type1">
    <input name="inp1" type="text" placeholder="1">
</div>
<div class="input_type2">
    <input name="inp2" type="text" placeholder="2">
</div>
<input type="submit" value="Send">
</form>

Answer 3

Вот пример с одним полем.

$(function() {
  $("#type-price").change(function(e) {
    $(".input-type").fadeIn("slow").find("input").attr("name", $(this).val().toLowerCase());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
  <option value="">Choose one...</option>
  <option value="numeric">Numeric </option>
  <option value="percentage">Percentage</option>
</select>

<div class="input-type" style="display: none;">
  <input type="text">
</div>