[英]dynamically add input fields with different id
I've to add in my page -dynamically- a input range like this: 我必须动态地在页面中添加这样的输入范围:
<div id="input_div">
<input type="button" value="-" onclick="minus()">
<input name="order" type="number" min="0" max="30" size="10" range="1" value="1" id="count1">
<input type="button" value="+" onclick="plus()">
</div>
<div id="wrapper"></div>
<a href="#" id="add-inputs">ADD</a>
And i've to add and remove numbers of that input. 而且我必须添加和删除该输入的数字。
For example the first input has id=count1, if I click on the "plus" button it has to increment its value. 例如,第一个输入具有id = count1,如果我单击“加号”按钮,它必须增加其值。 But if i had another input with id=count2
and i click on the "plus" button it has to increment the value of the second input with id=count2
and it shouldn't change the first input with id=count1
. 但是,如果我有另一个id=count2
输入,然后单击“加号”按钮,则它必须增加id=count2
的第二个输入的值,并且不应更改id=count1
的第一个输入。 And then I don't know how to add and remove inputs. 然后我不知道如何添加和删除输入。 So two questions: 有两个问题:
id=input_div
) with different ids; 如何添加具有不同id的许多输入(在id=input_div
的div中保存的输入); Thank you 谢谢
EDIT : I have add the input type number... And I hope that it's what do you want.. 编辑 :我已经添加了输入类型的数字...,我希望这就是你想要的..
here you are an example: http://jsfiddle.net/ryGqZ/ 这是一个示例: http : //jsfiddle.net/ryGqZ/
$('#addScnt').click(function() {
$('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i +'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
I don't know why you want add two buttons: "+" and "-". 我不知道为什么要添加两个按钮:“ +”和“-”。 I obtain this with input type number and safari : 我通过输入类型编号和野生动物园获得此:
You need create your html with java script or JQuery. 您需要使用Java脚本或JQuery创建html。 For example the following code create 10 input element in input_div container.: 例如,以下代码在input_div容器中创建10个输入元素:
$(document).ready(function () {
for (i = 1; i <= 10; i++) {
$("#input_div").append('<input id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
}
});
You need add an attribute to minus & plus inputs like as "btnId". 您需要向减号和加号输入添加属性,例如“ btnId”。 and access to it's number with this attribute. 并使用此属性访问其编号。 See code: 看到代码:
$(document).ready(function () {
for (i = 1; i <= 10; i++) {
$("#input_div").append('<input btnId="count' + i.toString() + '" type="button" value="-" onclick="minus()">');
$("#input_div").append('<input id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
}
});
function minus() {
var btnName = $(this).attr("btnId");
var btn = $("#" + btnName);
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.