重複的表單域

我有一些代碼用於允許用戶添加產品。他們可以控制添加的產品數量，以及刪除他們創建的產品。我的問題是，隨着我使用的代碼，我只能設法改變第二個div的ID以及第一個輸入的名稱/ ID。我如何更改所有輸入的名稱，而不僅僅是第一個輸入？重複的表單域

的JavaScript：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#add').click(function() { 
      var num  = $('.clonedInput').length; 
      var newNum = new Number(num + 1); 

      var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

      newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 

      $('#input' + num).after(newElem); 
      $('#remove').attr('disabled',''); 
     }); 

     $('#remove').click(function() { 
      var num = $('.clonedInput').length; 

      $('#input' + num).remove(); 
      $('#add').attr('disabled',''); 

      if (num-1 == 1) 
       $('#remove').attr('disabled','disabled'); 
     }); 

     $('#remove').attr('disabled','disabled'); 
    }); 
</script>

形式：

<form id="myForm"> 
    <div id="input1" class="clonedInput"> 
     <p>Product Name: <input type="text" name="name1" id="name1" /></p> 
     <p>Product Description:</p> 
     <textarea rows="10" cols="50" name="desc1" id="desc1"></textarea> 
     <p>Brand Name: <input type="text" name="brand1" id="brand1" /></p> 
     <p>Product Code Number: <input type="text" name="code1" id="code1" /></p> 
     <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop1" id="coop1" /></p> 
     <p>Commodity processing availability:</p> 
     <p><input type="checkbox" name="yes" id="yes1" value="Yes"> Yes <input type="checkbox" name="no" id="no1" value="No"> No</p> 
     <p>If yes, what is the commodity processing code number?: <input type="text" name="comm1" id="comm1" /></p> 
    </div> 

    <div> 
     <input type="button" id="add" value="Add Product" /> 
     <input type="button" id="remove" value="Remove Product" /> 
    </div> 
</form>

活生生的例子：http://test.joshrodg.com/wp-content/themes/rodgersconsulting/test.php

來源

2013-03-17 Josh Rodgers

我發現http://stackoverflow.com/questions/3360723/dynamically-adding-two-form-elements -with-jquery，但這一個堆疊的兩個領域：名稱，名稱，學校，學校...不是名稱，學校，名稱，學校 – 2013-03-17 23:38:12

我想通了......我能調整我發現在這裏：http://jsfiddle.net/e6cwd/9/

JQuery：
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>

中的JavaScript：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#btnAdd").click(function() { 
      var num  = $(".clonedSection").length; 
      var newNum = new Number(num + 1); 

      var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum); 

      newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum); 
      newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum); 
      newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum); 
      newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum); 
      newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum); 
      newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum); 
      newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum); 
      newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum); 

      $(".clonedSection").last().append(newSection) 

      $("#btnDel").attr("disabled",""); 

      if (newNum == 5) 
       $("#btnAdd").attr("disabled","disabled"); 
     }); 

     $("#btnDel").click(function() { 
      var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have 
      $("#clonedSection" + num).remove();  // remove the last element 

      // enable the "add" button 
      $("#btnAdd").attr("disabled",""); 

      // if only one element remains, disable the "remove" button 
      if (num-1 == 1) 
       $("#btnDel").attr("disabled","disabled"); 
     }); 

     $("#btnDel").attr("disabled","disabled"); 
    }); 
</script>

的HTML：

<form id="myForm"> 
    <div id="clonedSection1" class="clonedSection"> 
     <p>Name: <input type="text" name="name" id="name" /></p> 
     <p>Product Description:</p> 
     <p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p> 
     <p>Brand Name: <input type="text" name="brand" id="brand" /></p> 
     <p>Product Code Number: <input type="text" name="code" id="code" /></p> 
     <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p> 
     <p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p> 
     <p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p> 
    </div> 
    <div> 
     <input type="button" id="btnAdd" value="add another name" /> 
     <input type="button" id="btnDel" value="remove name" /> 
    </div> 
</form>

來源

2013-03-18 17:47:35

重複的表單域

回答

相關問題