Изменить тип ввода на основе выбора из меню

Question

Я пытаюсь сделать динамическое добавление c для элементов ввода, используя JQuery, пока я сделал это в приведенном ниже коде, моя проблема в том, что при попытке checkbox и date это не работают, но для radio проблем нет. Я новичок в JS и JQuery, поэтому все результаты поиска не помогли мне в этом вопросе, любая помощь будет оценена

$(document).ready(function() {
  var max_fields = 5;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");
  var type__ = $("#q_types :selected").val();
  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><input type="' + type__ + '" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
    } else {
      alert('You Reached the limits')
    }

  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<label for="q_types">Choose the question type:</label>



<div class="container1">
  <select name="q_types" id="q_types" class="q_types">
    <option value="" selected disabled hidden>Choose here</option>
    <option value="radio">radio</option>
    <option value="checkbox">checkbox</option>
    <option value="date">date</option>
    <option value="email">email</option>
  </select><br>
  <button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
  <div><input type="text" name="mytext[]"></div>
</div>

Answer 1

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

$(document).ready(function() {
  var max_fields = 5;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");

  var x = 1;
  $(add_button).click(function(e) {
    var type__ = $("#q_types :selected").val();
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><input type="' + type__ + '" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
    } else {
      alert('You Reached the limits')
    }

  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<label for="q_types">Choose the question type:</label>



<div class="container1">
  <select name="q_types" id="q_types" class="q_types">
    <option value="" selected disabled hidden>Choose here</option>
    <option value="radio">radio</option>
    <option value="checkbox">checkbox</option>
    <option value="date">date</option>
    <option value="email">email</option>
  </select><br>
  <button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
  <div><input type="text" name="mytext[]"></div>
</div>

Answer 2

Время ввода должно обновляться каждый раз, когда оно менялось, поэтому вам пришлось добавить прослушиватель событий onchange для этого выбора.

$('#q_types').on('change', function() {
  type__ =  this.value;
});

Вот весь код для тестирования:

$(document).ready(function() {
    var max_fields      = 5;
    var wrapper         = $(".container1"); 
    var add_button      = $(".add_form_field"); 
    var type__          = $("#q_types :selected").val();
    var x = 1;
 
    $('#q_types').on('change', function() {
      type__ =  this.value;
    });

    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){ 
            x++; 
            $(wrapper).append('<div><input type="'+type__+'" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        }
        
        else
        {
        alert('You Reached the limits')
        }
        
    });
    
    $(wrapper).on("click",".delete", function(e){ 
        e.preventDefault(); $(this).parent('div').remove();
        x--;
    })
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<label for="q_types">Choose the question type:</label>
 
<div class="container1">
    <select name="q_types" id="q_types" class="q_types">
        <option value="" selected disabled hidden>Choose here</option>
        <option value="radio">radio</option>
        <option value="checkbox">checkbox</option>
        <option value="date">date</option>
        <option value="email">email</option>
      </select><br>
    <button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
    <div><input type="text" name="mytext[]"></div>
</div>