How to add fields in form dynamically

so my form looks like :

<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 selected e.g 3 it should append 3 new inputs (could be array to take all of values ) I know that I have to use javascript but I don't know how.

How to add fields in form dynamically

so my form looks like :

<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 selected e.g 3 it should append 3 new inputs (could be array to take all of values ) I know that I have to use javascript but I don't know how.

• javascript
• php
• jquery
• html
• forms

• need to add text inputs? – Unni Babu Commented Jul 8, 2015 at 11:45
• yes it will contain name – binar Commented Jul 8, 2015 at 11:45
• api.jquery./change, api.jquery./append – Rory McCrossan Commented Jul 8, 2015 at 11:46
• There's no </input>! – Praveen Kumar Purushothaman Commented Jul 8, 2015 at 11:46
• 1 @PraveenKumar ah thats right it was just to show where it should append – binar Commented Jul 8, 2015 at 11:48

7 Answers 7

Use this way:

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

Have another div, with the ID "inputArea":

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

Snippet

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

<script src="https://ajax.googleapis./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>

<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);
  });
 });

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

try this

<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>

Step 1--- Add id to 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>");
          }
  });

To get around the problem of adding yet more input fields after the initial drop down selection (if the user changes their mind after the initial selection), which is the case with all the answers on this page. See the solution below:

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

By pure JavaScript, you can do it like this;

<script>
document.getElementById("dropdown").onchange = function() {
    document.querySelector("#inputarea").innerHTML = '';
    for(var i = 0; i < document.getElementById("dropdown").value; i++) {
        var input = document.createElement("input");
        input.name = 'input_name';
        input.type = 'text';
        document.getElementById("inputarea").append(input);
    }
}
</script>

And here is the html;

<body>
<form>
    <select id="dropdown">
        <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>
</form>
<div id="inputarea"></div>
</body>