Question

我已经研究过如何通过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>

Answer 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.
}

<强> Check this Fidlle

Answer 2

我会用这样的东西：

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'>

jquery添加两个字段中的任何一个来形成

2 个答案: