我正在使用 javascript 动态创建输入字段,我的表单允许的限制为 10 个。为确保将这些字段提交到正确的位置,我需要做的是为它们提供正确的 ID。我的问题是我该怎么做?
$(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--;
})
});
如果每个输入框都有一个 ID,如“data_item_1”、“data_item_2”、“data_item_3”等,那会很好。不过我不确定如何做到这一点。
最佳答案
您可以使用像x
这样的全局变量来生成唯一的ID。您本可以使用 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
你的代码会像
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
}
});
关于javascript - 如何将唯一 ID 添加到 Javascript 中动态创建的输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36058563/