Clever Geek Handbook

Adding input fields to a form when selecting a dropdown menu

How to add fields to a form dynamically

so my form looks like this:

<form action="/reservation-add" method="post">
<select id="dropdownlist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input></input>
</form>

If for example 3 is selected it should add 3 new inputs (could be an array to accept all values). I know I need to use javascript, but I don’t know how.

+3


source to share


6 answers


Use this way:

$("#dropdownlist").change(function () {
    var numInputs = $(this).val();
    for (var i = 0; i < numInputs; i++)
        $("#inputArea").append('<input name="inputs[]" />');
});

There is also div

, with the "inputArea" identifier:

<div id="inputArea"></div>


Excerpt

$("#dropdownlist").change(function () {
  var numInputs = $(this).val();
  for (var i = 0; i < numInputs; i++)
    $("#inputArea").append('<input name="inputs[]" />');
});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="dropdownlist">
  <option>Select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<div id="inputArea"></div>
Run codeHide result


+3


source 


<form action="/reservation-add" method="post" id="appendform">
  <select id="dropdownlist">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>
<input></input>
</form>

JQuery code



  $(document).ready(function ()
 {
  $('#dropdownlist').on('change',function ()
  {
    var howmuch = $(this).val();
    var appendhtml = '';
    for (i = 0; i < howmuch; i++)
    { 
        appendhtml+= "<input name="+i+" value="">";
    }
    $('.appendform').append(appendhtml);
  });
 });
+1


source 


$("#dropdownlist").on("change",function(e){
    for(i=0; i < $(this).val() ;i++){
        $("form").append($("<input type='text'/>"));
    }
})
+1


source


Step 1 . Add an identifier to the form
Step 2 . Use jquery onchange method, code shown below.

<form action="/reservation-add" method="post" id="myForm">
    <select id="dropdownlist">
        <option value="1"></option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>

$('#dropdownlist').on("change",function() {
          for(var i=0;i&lt;this.value;i++)
          {
              $("#myForm").append("<input type='text' name='myname[]'/>
               <br>");
          }
  });
0


source


try it

<script>
    function fireChange(val) {
    var form = document.forms[0];
        if(val) {
            for (var i = 0; i < val; i++) {
                var in = document.createElement('input');
                form.appendChild(in);
            }
        }
    }
</script>
<form action="/reservation-add" method="post" onchange="fireChange(this.value)">
<select id="dropdownlist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input></input>
</form>
0


source


To work around the problem of adding even more input fields after the initial dropdown selection (if the user changes his mind after the initial selection), which is the case with all the answers on this page. See solution below:

$("#dropdownlist").change(function () {
  $("#inputArea > :input").remove();
  var numInputs = $(this).val();
  for (var i = 0; i < numInputs; i++)
    $("#inputArea").append('<input name="inputs[]" />');
});
0


source






More articles:


All Articles