jquery将两个字段中的任意一个添加到表单_Jquery_Forms_Input

jquery将两个字段中的任意一个添加到表单

jquery forms input

jquery将两个字段中的任意一个添加到表单,jquery,forms,input,Jquery,Forms,Input,我已经知道如何通过JQuery将字段添加到表单中，但不知道如何使用两个添加字段按钮来添加一个或其他字段？有人能把我引向正确的方向吗 <html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style

我已经知道如何通过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>


jQuery添加/删除文本框示例
div{
填充：8px；
}
jQuery添加/删除文本框示例
$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}   
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除文本框”）；
返回false；
}   
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
$（“#getButtonValue”）。单击（函数（）{
var msg=''；
对于（i=1；i
id属性为HTML元素指定一个唯一的id（
值在HTML文档中必须是唯一的）
与id选择器不同，class选择器最常用于
若干元素

因此，请按如下方式修改您的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'>

我会使用以下内容：
var $fieldexample = $('<input/>',{type:'Your Field Type',id:'fieldexample',value:'Your Value',name:'fieldexample'});

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


两个具有相同ID的按钮是无效的HTML。我认为对于您想要的内容，一个类会更好。您不应该有两个相同的ID—“addButton”更改ID，或者您可能希望使用ClassID来更新jQuery。该版本很古老。您可能可以不费吹灰之力地转到1.8.3。谢谢，我将实现更改
var $fieldexample = $('<input/>',{type:'Your Field Type',id:'fieldexample',value:'Your Value',name:'fieldexample'});

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

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