使用 jQuery 动态添加/删除输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9173182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add / remove input field dynamically with jQuery
提问by user782104
I would like to use jquery to build a dynamic add/ remove form. IT should look like:
我想使用 jquery 来构建动态添加/删除表单。它应该看起来像：
Name Type Required?
名称 类型 必填？
The example input :
示例输入：
- Name Type Required?
- Tony Admin checked (checkbox) Delete <==press the button will delete the row
- 名称 类型 必填？
- Tony Admin 选中 (checkbox) Delete <==press the button will delete the row
What i have got is a example of add/ remove input box how can it convert to my idea? Do i have to use multi coloumn table? Thank you for kindly help
我得到的是一个添加/删除输入框的例子，它如何转换成我的想法？我必须使用多列表吗？谢谢你的帮助
<html>
<head>
<title>jQuery add / remove textbox example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>
回答by FarligOpptreden
I took the liberty of putting together a jsFiddle illustrating the functionality of building a custom form using jQuery. Here it is...
我冒昧地整理了一个 jsFiddle 来说明使用 jQuery 构建自定义表单的功能。这里是...
EDIT: Updated the jsFiddle to include remove buttons for each field.
编辑：更新了 jsFiddle 以包含每个字段的删除按钮。
EDIT: As per the request in the last comment, code from the jsFiddle is below.
编辑：根据最后一条评论中的请求，来自 jsFiddle 的代码如下。
EDIT: As per Abhishek's comment, I have updated the jsFiddle (and code below) to cater for scenarios where duplicate field IDs might arise.
编辑：根据 Abhishek 的评论，我更新了 jsFiddle（和下面的代码）以适应可能出现重复字段 ID 的情况。
HTML:
HTML：
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a field" class="add" id="add" />
JavaScript:
JavaScript：
$(document).ready(function() {
$("#add").click(function() {
var lastField = $("#buildyourform div:last");
var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
fieldWrapper.data("idx", intId);
var fName = $("<input type=\"text\" class=\"fieldname\" />");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$("#preview").click(function() {
$("#yourform").remove();
var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
$("#buildyourform div").each(function() {
var id = "input" + $(this).attr("id").replace("field","");
var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
var input;
switch ($(this).find("select.fieldtype").first().val()) {
case "checkbox":
input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textbox":
input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textarea":
input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
break;
}
fieldSet.append(label);
fieldSet.append(input);
});
$("body").append(fieldSet);
});
});
CSS:
CSS：
body
{
font-family:Gill Sans MT;
padding:10px;
}
fieldset
{
border: solid 1px #000;
padding:10px;
display:block;
clear:both;
margin:5px 0px;
}
legend
{
padding:0px 10px;
background:black;
color:#FFF;
}
input.add
{
float:right;
}
input.fieldname
{
float:left;
clear:left;
display:block;
margin:5px;
}
select.fieldtype
{
float:left;
display:block;
margin:5px;
}
input.remove
{
float:left;
display:block;
margin:5px;
}
#yourform label
{
float:left;
clear:left;
display:block;
margin:5px;
}
#yourform input, #yourform textarea
{
float:left;
display:block;
margin:5px;
}
回答by thenetimp
You need to create the element.
您需要创建元素。
input = jQuery('<input name="myname">');
and then append it to the form.
然后将其附加到表单中。
jQuery('#formID').append(input);
to remove an input you use the remove functionality.
要删除输入，请使用删除功能。
jQuery('#inputid').remove();
This is the basic idea, you may have feildsets that you append it too instead, or maybe append it after a specific element, but this is how to build anything dynamically really.
这是基本思想，您可能有 feildsets 也可以附加它，或者将其附加在特定元素之后，但这实际上是动态构建任何东西的方法。
回答by Hemant Metalia
you can do it as follow:
你可以这样做：
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
refer live demo http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
参考现场演示http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
回答by Fel
Jquery Code
查询代码
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
HTML CODE
代码
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
回答by Anand Roshan
You can do something like this below:
你可以在下面做这样的事情：
//when the Add Field button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');
});
For detailed tutorial http://voidtricks.com/jquery-add-remove-input-fields/
回答by Treps
Here is my JSFiddlewith corrected line breaks, or see it below.
这是我的JSFiddle，带有更正的换行符，或在下面查看。
$(document).ready(function() {
var MaxInputs = 2; //maximum extra input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
//on add input button click
$(AddButton).click(function (e) {
//max input box allowed
if(x <= MaxInputs) {
FieldCount++; //text box added ncrement
//add input box
$(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'"/> <a href="#" class="removeclass">Remove</a></div>');
x++; //text box increment
$("#AddMoreFileId").show();
$('AddMoreFileBox').html("Add field");
// Delete the "add"-link if there is 3 fields.
if(x == 3) {
$("#AddMoreFileId").hide();
$("#lineBreak").html("<br>");
}
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
$("#AddMoreFileId").show();
$("#lineBreak").html("");
// Adds the "add" link again when a field is removed.
$('AddMoreFileBox').html("Add field");
}
return false;
})
});
回答by user2042007
why not remove the .after()in the line
为什么不删除.after()行中的
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
to
到
newTextBoxDiv.html('<label>Textbox #'+ counter + ' : </label>' +
回答by Ajay Kumar
Another solution could be:
另一种解决方案可能是：
<script>
$(document)
.ready(
function() {
var wrapper = $(".myFields");
$(add_button)
.click(
function(e) {
e.preventDefault();
$(wrapper)
.append(
'.....'); //add fields here
});
$(wrapper).on("click", ".delFld", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
</script>
Source: Here
来源：这里
回答by manas _Singh
In your click function, you can write:
在您的点击功能中，您可以编写：
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="" type="text" size="17%" maxlength="120" /></td><td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>';
jQuery('#addedRows').append(recRow);
}
Or follow this link: http://www.discussdesk.com/add-remove-more-rows-dynamically-using-jquery.htm
或点击此链接：http: //www.discussdesk.com/add-remove-more-rows-dynamically-using-jquery.htm
回答by Abhishek Singh
You should be able to create and remove input field dynamically by using jquery using this method(https://www.adminspress.com/onex/view/uaomui), Even you can able to generate input fields in bulk and export to string.
您应该能够使用这种方法（https://www.adminspress.com/onex/view/uaomui）使用jquery动态创建和删除输入字段，甚至您可以批量生成输入字段并导出为字符串。
