[英]How do I add unique IDs to dynamically created input fields in Javascript?
I am using javascript to create input fields dynamically with a limit of 10 allowed on my form. 我正在使用javascript动态创建输入字段,我的表单允许限制为10。 What I need to do to ensure these fields are submitted to the correct place is give them the right ID.
我需要做的是确保将这些字段提交到正确的位置,为他们提供正确的ID。 My question is how do I do this?
我的问题是我该怎么做?
$(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
var num = new Number;
var newNum = num + 1;
/*if (x = max_fields) {
alert("You can't add anymore fields.")
}
*/
$(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 class="clonedInput"><input id="" 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--;
})
});
It would be nice for each input box to have an ID like "data_item_1" , "data_item_2", "data_item_3" etc etc. I'm not sure on how to do this though. 每个输入框都有一个像“data_item_1”,“data_item_2”,“data_item_3”等ID会很好。我不知道如何做到这一点。
You can use global variable like x
to generate unique ids. 您可以使用
x
等全局变量来生成唯一ID。 You could have used x
but as you are decrementing x
so you may need to use separate variable. 您可以使用
x
但是当您递减x
,您可能需要使用单独的变量。
$(wrapper).append('<div class="clonedInput"><input id="data_item_'+itemIndex+'" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
You code would be like 你的代码就像
var itemIndex = 2;
$(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 class="clonedInput"><input id="data_item_'+ itemIndex++ +'" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
在click事件中尝试此行
$(wrapper).append('<div class="clonedInput"><input id="data_item_'+x+'" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.