输入数字以添加更多输入 JQuery

Question

我想要一个表单输入，可以输入一个数字，然后单击旁边的按钮，这样它就会“添加”以前的输入数量，并每个输入都有自己的名称。

1. 输入数字
2. 单击“执行”按钮或
3. 同一页面上输入数量的任何输出（创建新输入）

我尝试过一次只提供“添加一个”功能：

$(function() {
    var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work

    $('a#add').click(function() { // when you click the add link
        $('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
        i++; //after the click i will be i = 3 if you click again i will be i = 4
    });

    $('a#remove').click(function() { // similar to the previous, when you click remove link
    if(i > 1) { // if you have at least 1 input on the form
        $('input:last').remove(); //remove the last input
        i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
    }
    });

    $('a.reset').click(function() {
    while(i > 2) { // while you have more than 1 input on the page
        $('input:last').remove(); // remove inputs
        i--;
    }
    });

}); 

<a href="#" id="add">Add</a>  
<a href="#" id="remove">Remove</a>  
<input type="text" value="1" />

Answer 1

像这样的东西吗？

<script>
  $(document).ready(function(){
    $('#addButton').click(function(){
      var count = parseInt($('#quantity').val());
      var newHTML = [];
      for(var i=0;i<count;i++){
        newHTML.push('<input type="text"/><br/>');//or whatever content you want
      }
      $('#sandbox').html(newHTML.join(''));
    });
  });
</script>



<input type="text" id="quantity" value=""/>
<input type="button" id="addButton" value="Add"/>
<div id="sandbox"></div>

Answer 2

您可以这样做（根据您的需要调整此代码）：

var newInputs = parseInt($('#newInputs').val(), 10);
for(var i = 0; i < newInputs; i++){
  var $input = $('<input/>').attr({
    name: 'input_'+i,
    value: i
  }).appendTo('#form');
}

基本上，当您单击“Go”按钮时，您想要获取输入的值，并循环多次。每次迭代，创建一个新的 input 元素并将其附加到原始表单。

Answer 3

有点晚了，但是一个不错的选择是使用 jQuery 模板 $.tmpl （假设您不反对使用插件）

var markup = '<input type="text" id="Input${this.data}" value="" class="auto"/>';
$.template("inputTemplate", markup);

$("input.add").click(function() {
    var times = parseInt($("input.times").val(), 10);
    var total = $("input.auto").length;
    for (var x = 0; x < times; x++) {
        $.tmpl("inputTemplate", (x+ total) ).appendTo("body");
    }
});
$("input.remove").click(function() {
    $("input.auto:last").remove();
});
$("input.reset").click(function() {
    $("input.auto").remove();
});

jsfiddle。