0

我已经研究出如何通过 JQuery 向表单添加字段，但无法弄清楚如何有两个添加字段按钮以便我可以添加一个或其他字段？有人能引导我走向正确的方向吗？ 

 <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 field #01' id='addButton'>
<input type='button' value='Add field #02' id='addButton'>
<input type='button' value='Remove Last Field' id='removeButton'>

</body>
</html>
4

2 回答 2

1
  • id属性为 HTML 元素指定一个唯一的id （该值在 HTML 文档中必须是唯一的）。
  • 与id选择器不同，类选择器最常用于 多个元素。

所以修改你的html如下：

<input type='button' value='Add field #01' class='addButton'>
<input type='button' value='Add field #02' class='addButton'>
<input type='button' value='Remove Last Field' id='removeButton'>

然后修改你的脚本：

$(".addButton").click(function () {
    //code to append your data.
}

检查这个小提琴

于 2013-10-17T15:52:26.773 回答
0

我会使用这样的东西：

var $fieldexample = $('<input/>',{type:'Your Field Type',id:'fieldexample',value:'Your Value',name:'fieldexample'});

然后将其附加到您需要的位置：

$('.addButton').click(function() {
    $fieldexample.appendTo('#LOCATION');
});

HTML 也需要更改，您不应该为同一个功能使用两个 ID，这通常是不正确的 HTML。

<input type='button' value='Add field #01' class='addButton'>
<input type='button' value='Add field #02' class='addButton'>
<input type='button' value='Remove Last Field' id='removeButton'>
于 2013-10-17T15:52:59.953 回答