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

问题描述：

我想要一个表单输入，一个会输入一个数字，然后单击它旁边的按钮，以便它将“添加”前输入的数量与其各自的名称。输入数字添加更多的输入JQuery

输入号码
点击开始按钮或任何

我已经试过

输出同一页面上输入该号码（创建新的投入），这其中只有在给出了一个加一时间功能：

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

**只是'输入'？或'输入'加'标签'？什么*键入* input元素？ – 2011-03-16 15:28:12

我已经添加了我所尝试过的。我使用PHP，所以我需要名称字段和type =“text”。 – ToddN 2011-03-16 15:31:46

@ToddN：你的代码有什么问题？它似乎会起作用。 – 2011-03-16 15:35:10

答

像这样的东西？

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

这工作完美，谢谢！ – ToddN 2011-03-16 15:41:07

有没有一种方法可以为输入添加不同的'name = xxx'？例如'' – ToddN 2011-03-16 17:02:21

当然，你可以添加任何你想要的东西。 'newHTML.push（'
'）;'或者如果您将元素作为数组发送回服务器...... 'newHTML.push（'
'）;'' – scunliffe 2011-03-16 18:39:26

答

你可以这样做（改编此代码以满足您的需求）：

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元素并将其附加到原始表单。

答

排序迟到了，但是一个很好的选择是使用jQuery模板$.tmpl（假设你不反对使用插件）上jsfiddle

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

代码示例。

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

相关推荐