javascript 选择下拉选项时在表单中添加输入字段

Add input fields in form when dropdown option selected

提问by binar

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.

如果选择例如 3，它应该附加 3 个新输入（可以是数组以获取所有值）我知道我必须使用 javascript 但我不知道如何使用。

采纳答案by Praveen Kumar Purushothaman

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

回答by Kashyap Patel

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

回答by RRK

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

回答by Grant

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 Raghavendra

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>

回答by Unni Babu

Step 1--- Add id to form
Step 2---Use jquery onchange method, code shown below

Step 1--- 添加 id 到表单
Step 2--- 使用 jquery onchange 方法，代码如下

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