Question

如何动态添加表单

所以我的表格如下：

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

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

Answer 1

使用这种方式：

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

拥有另一个div，其ID为“inputArea”：

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

<强>段

$("#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>

Answer 2

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

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

Answer 3

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

Answer 4

第1步 ---将ID添加到表单中 第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>");
          }
  });

Answer 5

试试这个

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

Answer 6

解决在初始下拉选择之后添加更多输入字段的问题（如果用户在初始选择后改变主意），这是该页面上所有答案的情况。请参阅以下解决方案：

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

Answer 7

通过纯JavaScript，您可以这样做；

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

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

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

7 个答案: