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

【问题标题】：Input Number to Add more Inputs JQuery输入数字以添加更多输入 JQuery
【发布时间】：2011-03-16 15:22:48
【问题描述】：

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

输入号码
单击“Go”按钮或其他任何内容
与输入数量相同的页面上的输出（创建新输入）

我已经尝试过，它只提供一次添加一个功能：

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

【问题讨论】：

只是 inputs？还是input 加上label？ input 元素的类型是什么？
我已经添加了我尝试过的内容。我正在使用 php，所以我需要 name 字段和 type="text"。
@ToddN：你的代码有什么问题？看起来它会起作用。
@Rocket 它工作得很好，但是如果我想要 20 个输入框，我必须点击它 20 次，我宁愿有一个输入框来输入我的表单中需要多少个框。

标签： jquery input add

【解决方案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>

【讨论】：

有没有办法为输入设置不同的 'name=xxx'？比如<input type="text" name=[some array] />
当然，你可以添加任何你想要的......例如newHTML.push('<input type="text" name="item_' + (i+1) + '"/><br/>'); 或者如果您将元素作为数组发送回服务器... newHTML.push('<input type="text" name="items[]"/><br/>');

【解决方案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');
}

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

【讨论】：

【解决方案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 上的代码示例。

【讨论】：