使用javascript添加新文本框 [英] Adding new text box using javascript
本文介绍了使用javascript添加新文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网页。有一个名为add的按钮。单击此添加按钮时，必须添加1个文本框。这应该只在客户端发生。
我想允许用户添加最多10个文本框。
I have a webpage. There is a button called add. When this add button is clicked then 1 text box must be added. This should happen at client side only. I want to allow the user to add at most 10 text boxes.
如何使用javascript实现它？
How can I achieve it using javascript?
示例：
- 仅显示1个文本框
- 用户点击添加>
- 显示2个文本框
- 用户点击添加>
- only 1 text box is displayed
- user click add >
- 2 text boxes displayed
- user clicks add >
我还想提供一个名为删除的按钮，用户可以通过该按钮删除额外的文本框
I also wants to provide a button called "remove" by which the user can remove the extra text box
任何人都可以为我提供javascript代码吗？ ？
Can anyone provide me a javascript code for this??
推荐答案
我希望你使用的是jQuery。
I hope you are using jQuery.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head><body>
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>
这篇关于使用javascript添加新文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
