动态数据到阵列时出错

Question

我的脚本在下面列出时出错。我不知道我哪里出错了我尝试了多种变化和方法来编码它，我仍然没有任何结果。

正如您所知，我有一个自定义生成的部分供用户输入数据。基本上当他们点击它时会添加另一部分。然后我想在点击时将该数据转换为数组。它似乎适用于我的用户信息（顶部），但由于某种原因，它不会在每个产品部分的for循环中打印子数组。

var id = 0;
$('#addbutton').click(function() {
  id++;
  var large = '<div class="contentprint" id="section[' + id + ']"><h2>Product:' + id + '</h2>' +
    '<p class="form-check has-success"><label class="form-check-label"><input type="checkbox" style="user-select: none" class="form-check-input btn btn-success" id="logo' + id + '" value="yes">Custom Logo</label></p><p style="font-size: 10px; margin: 0px">*Please provide in high resolution .png format(upon confirmation of quote)</p><p style="font-size: 10px; margin: 0px">*$50 set up fee for new logos on orders up to 10 plates</p>' +
    '<input id="quantity' + id + '" style="margin-top:10px; width:70%" type="number" class="form-control quanty" placeholder="Enter Quantity">' +
    '<select  id="orientation"' + id + '" style="margin-top:10px; width:70%" class="ori" ><option disabled selected value> -- Orientation --</option> <option value="clipsal_2000_series">Horizontal</option><option value="clipsal_2000_series">Vertical</option></select>' +
    '<select class="plate" id="plate"' + id + '" style="margin-top:10px; width:70%" ><option disabled selected value> -- Wall Plate --</option><option value="clipsal_2000_series">Clipsal 2000 series</option><option value="clipsal_classic_2000_series">Clipsal classic 200 series</option><option value="clipsal_standard_31_series">Clipsal standard 31 series</option><option value="other">Other(list in comments)</option></select>' +
    '<select class="color" id="colour"' + id + '" style="margin-top:10px; width:70%" > <option disabled selected value> -- Colour --</option> <option value="white">White</option> <option value="black">Black</option> <option value="other">Other(list in comments)</option></select>' +
    '<p style="margin-top:10px; width:100%">Choose your connections</p>' +
    ' <select class="1consel" style="margin-top:10px; width:35%" id="1connection' + id + '"><option disabled selected value> -- Connection 1 --</option> <option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option><optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup>  <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="2consel" style="margin-top:10px; width:35%" id="2connection' + id + '"><option disabled selected value> -- Connection 2 --</option> <option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup>  <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="1consellog" style="margin-top:10px; width:35%" id="1wordconnection' + id + '" placeholder="Connection 1 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="2consellog" style="margin-top:10px; width:35%" id="2wordconnection' + id + '" placeholder="Connection 2 Custom Label(max 15 chars)" type="text" />' +
    ' <select class="3consel" style="margin-top:10px; width:35%" id="3connection' + id + '"><option disabled selected value> -- Connection 3 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option>  <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="4consel" style="margin-top:10px; width:35%" id="4connection' + id + '"><option disabled selected value> -- Connection 4 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="3consellog" style="margin-top:10px; width:35%" id="3wordconnection' + id + '" placeholder="Connection 3 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="4consellog" style="margin-top:10px; width:35%" id="4wordconnection' + id + '" placeholder="Connection 4 Custom Label(max 15 chars)" type="text" />' +
    ' <select class="5consel" style="margin-top:10px; width:35%" id="5connection' + id + '"><option disabled selected value> -- Connection 5 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"> <option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="6consel" style="margin-top:10px; width:35%" id="6connection' + id + '"><option disabled selected value> -- Connection 6 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"> <option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="5consellog" style="margin-top:10px; width:35%" id="5wordconnection' + id + '" placeholder="Connection 5 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="6consellog" style="margin-top:10px; width:35%" id="6wordconnection' + id + '" placeholder="Connection 6 Custom Label(max 15 chars)" type="text" />' +
    '<textarea name="specialinstructions"' + id + '" style="margin-top:10px; width:70%" class="form-control special" rows="3" placeholder="Special Instructions"></textarea>' +
    '<br><hr><br></div>';

  $('div.addsection').append(large);
  event.preventDefault();
});
$('#removeprod').on('click', function() {
  $('.contentprint').remove();
});
$('#serialize').click(function() {
  var entereddata = [];
  var products = [];

  var i;
  //id is the count of the sections
  for (i = 0; i < id.length; i++) {

    var indivproduct = [];
    //dont forget logo
    indivproduct.push([$("input#quantity" + i).val(), $("input#orientation" + i).val(), $("input#plate" + i).val(), $("input#colour" + i).val(), $("input#1connection" + i).val(), $("input#1wordconnection" + i).val(), $("input#2connection" + i).val(), $("input#2wordconnection" + i).val(), $("input#3connection" + i).val(), $("input#3wordconnection" + i).val(), $("input#4connection" + i).val(), $("input#4wordconnection" + i).val(), $("input#5connection" + i).val(), $("input#5wordconnection" + i).val(), $("input#6connection" + i).val(), $("input#6wordconnection" + i).val(), $("input#specialinstructions" + i).val()]);

    products.push(indivproduct);

  };

  entereddata.push([$("input#contactname").val(), $("input#companyname").val(), $("input#address").val(), $("input#contactnumber").val(), $("input#email").val(), $("input#requiredby").val(), products]);
  alert(JSON.stringify(entereddata));

  /*send json data to file
  $.ajax({
      type: "POST",
      data: {mydata: JSON.stringify(entereddata)},
      url: "index.php",
      success: function(data){
      }
  });
  */
});

<form align="center" method="post" action="">
  <!--action=kidigital.php-->
  <div align="center">
    <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="contactname" name="Contactname" placeholder="Contact Name">
    <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="companyname" name="Companyname" placeholder="Company Name">
    <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="address" name="Address" placeholder="Address">
    <input style="margin-top:10px; width:70%" type="number" class="form-control details" id="contactnumber" name="Contactnumber" placeholder="Contact Number">
    <input style="margin-top:10px; width:70%" type="email" class="form-control details" id="email" name="Email" placeholder="Email Address">
    <label style="margin: 10px; width:70%" for="requiredby">Required by</label> <br>
    <input style="margin-top: 0px; width: 70%" placeholder="Contact Name" id="requiredby" class="form-control details" name="dueby" type="date" />
  </div>
  <hr>
  <div align="center" class="addsection"></div>
  <button align="center" id="addbutton" style="width: 50%; margin-top: 10px" class="btn btn-primary   ">Add a product</button>
  <button align="center" id="removeprod" style="width: 50%; margin-top: 10px" class="btn btn-danger   ">Re-Enter Products</button>
  <div>
    <button id="serialize" style="width: 50%; margin-top: 10px" class="btn btn-success">Submit</button>
  </div>
</form>

如果有人能看到我出错的地方，我们将不胜感激。：）

干杯，

Answer 1

变量id是整数Number并且（除非原型已被修改）没有属性 length 。

为了让 for 循环在 i 小于 id 的值时运行，请更新 for 循环条件来自：

for (i = 0; i < id.length; i++) {

到

for (i = 0; i < id; i++) {

对于后人，Lajos指出了另一个问题 - 循环从0开始直到它比 id 的值小1。但是，由于增量器代码的位置，第一个输入具有输入＃quantity1 的 id 属性。有多个选项可以更改代码以使其正常工作。

1. 在创建HTML字符串的代码之后移动行i++;，因此在将值增加到1之前使用值0（请参阅下面的代码段）

2. 启动for循环为1而不是0（如Lajos所述）

   for (i = 1; i <= id; i++) {
   

＆＃13;
＆＃13;
var id = 0;
$('#addbutton').click(function() {
  var large = '<div class="contentprint" id="section[' + id + ']"><h2>Product:' + id + '</h2>' +
    '<p class="form-check has-success"><label class="form-check-label"><input type="checkbox" style="user-select: none" class="form-check-input btn btn-success" id="logo' + id + '" value="yes">Custom Logo</label></p><p style="font-size: 10px; margin: 0px">*Please provide in high resolution .png format(upon confirmation of quote)</p><p style="font-size: 10px; margin: 0px">*$50 set up fee for new logos on orders up to 10 plates</p>' +
    '<input id="quantity' + id + '" style="margin-top:10px; width:70%" type="number" class="form-control quanty" placeholder="Enter Quantity">' +
    '<select  id="orientation"' + id + '" style="margin-top:10px; width:70%" class="ori" ><option disabled selected value> -- Orientation --</option> <option value="clipsal_2000_series">Horizontal</option><option value="clipsal_2000_series">Vertical</option></select>' +
    '<select class="plate" id="plate"' + id + '" style="margin-top:10px; width:70%" ><option disabled selected value> -- Wall Plate --</option><option value="clipsal_2000_series">Clipsal 2000 series</option><option value="clipsal_classic_2000_series">Clipsal classic 200 series</option><option value="clipsal_standard_31_series">Clipsal standard 31 series</option><option value="other">Other(list in comments)</option></select>' +
    '<select class="color" id="colour"' + id + '" style="margin-top:10px; width:70%" > <option disabled selected value> -- Colour --</option> <option value="white">White</option> <option value="black">Black</option> <option value="other">Other(list in comments)</option></select>' +
    '<p style="margin-top:10px; width:100%">Choose your connections</p>' +
    ' <select class="1consel" style="margin-top:10px; width:35%" id="1connection' + id + '"><option disabled selected value> -- Connection 1 --</option> <option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option><optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup>  <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="2consel" style="margin-top:10px; width:35%" id="2connection' + id + '"><option disabled selected value> -- Connection 2 --</option> <option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup>  <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="1consellog" style="margin-top:10px; width:35%" id="1wordconnection' + id + '" placeholder="Connection 1 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="2consellog" style="margin-top:10px; width:35%" id="2wordconnection' + id + '" placeholder="Connection 2 Custom Label(max 15 chars)" type="text" />' +
    ' <select class="3consel" style="margin-top:10px; width:35%" id="3connection' + id + '"><option disabled selected value> -- Connection 3 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option>  <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="4consel" style="margin-top:10px; width:35%" id="4connection' + id + '"><option disabled selected value> -- Connection 4 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="3consellog" style="margin-top:10px; width:35%" id="3wordconnection' + id + '" placeholder="Connection 3 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="4consellog" style="margin-top:10px; width:35%" id="4wordconnection' + id + '" placeholder="Connection 4 Custom Label(max 15 chars)" type="text" />' +
    ' <select class="5consel" style="margin-top:10px; width:35%" id="5connection' + id + '"><option disabled selected value> -- Connection 5 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"> <option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="6consel" style="margin-top:10px; width:35%" id="6connection' + id + '"><option disabled selected value> -- Connection 6 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"> <option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="5consellog" style="margin-top:10px; width:35%" id="5wordconnection' + id + '" placeholder="Connection 5 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="6consellog" style="margin-top:10px; width:35%" id="6wordconnection' + id + '" placeholder="Connection 6 Custom Label(max 15 chars)" type="text" />' +
    '<textarea name="specialinstructions"' + id + '" style="margin-top:10px; width:70%" class="form-control special" rows="3" placeholder="Special Instructions"></textarea>' +
    '<br><hr><br></div>';

  id++;
  $('div.addsection').append(large);
  event.preventDefault();
});
$('#removeprod').on('click', function() {
  $('.contentprint').remove();
});
$('#serialize').click(function() {
  var entereddata = [];
  var products = [];

  var i;
  //id is the count of the sections
  for (i = 0; i < id; i++) {

    var indivproduct = [];
    //dont forget logo
    indivproduct.push([$("input#quantity" + i).val(), $("input#orientation" + i).val(), $("input#plate" + i).val(), $("input#colour" + i).val(), $("input#1connection" + i).val(), $("input#1wordconnection" + i).val(), $("input#2connection" + i).val(), $("input#2wordconnection" + i).val(), $("input#3connection" + i).val(), $("input#3wordconnection" + i).val(), $("input#4connection" + i).val(), $("input#4wordconnection" + i).val(), $("input#5connection" + i).val(), $("input#5wordconnection" + i).val(), $("input#6connection" + i).val(), $("input#6wordconnection" + i).val(), $("input#specialinstructions" + i).val()]);

    products.push(indivproduct);

  };

  entereddata.push([$("input#contactname").val(), $("input#companyname").val(), $("input#address").val(), $("input#contactnumber").val(), $("input#email").val(), $("input#requiredby").val(), products]);
  console.log(JSON.stringify(entereddata));
  return false;//don't submit form  

  /*send json data to file
  $.ajax({
      type: "POST",
      data: {mydata: JSON.stringify(entereddata)},
      url: "index.php",
      success: function(data){
      }
  });
  */
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form align="center" method="post" action="">
  <!--action=kidigital.php-->
  <div align="center">
    <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="contactname" name="Contactname" placeholder="Contact Name">
    <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="companyname" name="Companyname" placeholder="Company Name">
    <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="address" name="Address" placeholder="Address">
    <input style="margin-top:10px; width:70%" type="number" class="form-control details" id="contactnumber" name="Contactnumber" placeholder="Contact Number">
    <input style="margin-top:10px; width:70%" type="email" class="form-control details" id="email" name="Email" placeholder="Email Address">
    <label style="margin: 10px; width:70%" for="requiredby">Required by</label> <br>
    <input style="margin-top: 0px; width: 70%" placeholder="Contact Name" id="requiredby" class="form-control details" name="dueby" type="date" />
  </div>
  <hr>
  <div align="center" class="addsection"></div>
  <button align="center" id="addbutton" style="width: 50%; margin-top: 10px" class="btn btn-primary   ">Add a product</button>
  <button align="center" id="removeprod" style="width: 50%; margin-top: 10px" class="btn btn-danger   ">Re-Enter Products</button>
  <div>
    <button id="serialize" style="width: 50%; margin-top: 10px" class="btn btn-success">Submit</button>
  </div>
</form>
＆＃13;
＆＃13;
＆＃13;

Answer 2

正如@Sam Onela所指出的那样，其中一个问题是你用id.length代替id进行id。

但是，这不是唯一的错误。另一个问题是，您从0开始循环从未到达id，而 for (i = 1; i <= id; i++) { 值从1开始。您可以通过将循环更改为

来解决此问题

id="orientation"' + id + '"

这使您的脚本几乎正确，但是，您仍然有一些拼写错误，例如

而不是

id="orientation' + id + '"

使用

"input#yourid" + id

并且您还可以使用input等选择器，以防标签不是select，而是使用textarea或<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form align="center" method="post" action=""> <!--action=kidigital.php--> <div align="center"> <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="contactname" name="Contactname" placeholder="Contact Name"> <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="companyname" name="Companyname" placeholder="Company Name"> <input style="margin-top:10px; width:70%" type="text" class="form-control details" id="address" name="Address" placeholder="Address"> <input style="margin-top:10px; width:70%" type="number" class="form-control details" id="contactnumber" name="Contactnumber" placeholder="Contact Number"> <input style="margin-top:10px; width:70%" type="email" class="form-control details" id="email" name="Email" placeholder="Email Address"> <label style="margin: 10px; width:70%" for="requiredby">Required by</label> <br> <input style="margin-top: 0px; width: 70%" placeholder="Contact Name" id="requiredby" class="form-control details" name="dueby" type="date" /> </div> <hr> <div align="center" class="addsection"></div> <button align="center" id="addbutton" style="width: 50%; margin-top: 10px" class="btn btn-primary ">Add a product</button> <button align="center" id="removeprod" style="width: 50%; margin-top: 10px" class="btn btn-danger ">Re-Enter Products</button> <div> <button id="serialize" style="width: 50%; margin-top: 10px" class="btn btn-success">Submit</button> </div> </form> 等其他内容。完整的解决方案：

<强> HTML

var id = 0;
$('#addbutton').click(function() {
  id++;
  var large = '<div class="contentprint" id="section[' + id + ']"><h2>Product:' + id + '</h2>' +
    '<p class="form-check has-success"><label class="form-check-label"><input type="checkbox" style="user-select: none" class="form-check-input btn btn-success" id="logo' + id + '" value="yes">Custom Logo</label></p><p style="font-size: 10px; margin: 0px">*Please provide in high resolution .png format(upon confirmation of quote)</p><p style="font-size: 10px; margin: 0px">*$50 set up fee for new logos on orders up to 10 plates</p>' +
    '<input id="quantity' + id + '" style="margin-top:10px; width:70%" type="number" class="form-control quanty" placeholder="Enter Quantity">' +
    '<select  id="orientation' + id + '" style="margin-top:10px; width:70%" class="ori" ><option disabled selected value> -- Orientation --</option> <option value="clipsal_2000_series">Horizontal</option><option value="clipsal_2000_series">Vertical</option></select>' +
    '<select class="plate" id="plate' + id + '" style="margin-top:10px; width:70%" ><option disabled selected value> -- Wall Plate --</option><option value="clipsal_2000_series">Clipsal 2000 series</option><option value="clipsal_classic_2000_series">Clipsal classic 200 series</option><option value="clipsal_standard_31_series">Clipsal standard 31 series</option><option value="other">Other(list in comments)</option></select>' +
    '<select class="color" id="colour' + id + '" style="margin-top:10px; width:70%" > <option disabled selected value> -- Colour --</option> <option value="white">White</option> <option value="black">Black</option> <option value="other">Other(list in comments)</option></select>' +
    '<p style="margin-top:10px; width:100%">Choose your connections</p>' +
    ' <select class="1consel" style="margin-top:10px; width:35%" id="1connection' + id + '"><option disabled selected value> -- Connection 1 --</option> <option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option><optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup>  <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="2consel" style="margin-top:10px; width:35%" id="2connection' + id + '"><option disabled selected value> -- Connection 2 --</option> <option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup>  <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="1consellog" style="margin-top:10px; width:35%" id="1wordconnection' + id + '" placeholder="Connection 1 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="2consellog" style="margin-top:10px; width:35%" id="2wordconnection' + id + '" placeholder="Connection 2 Custom Label(max 15 chars)" type="text" />' +
    ' <select class="3consel" style="margin-top:10px; width:35%" id="3connection' + id + '"><option disabled selected value> -- Connection 3 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option>  <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="4consel" style="margin-top:10px; width:35%" id="4connection' + id + '"><option disabled selected value> -- Connection 4 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"><option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="3consellog" style="margin-top:10px; width:35%" id="3wordconnection' + id + '" placeholder="Connection 3 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="4consellog" style="margin-top:10px; width:35%" id="4wordconnection' + id + '" placeholder="Connection 4 Custom Label(max 15 chars)" type="text" />' +
    ' <select class="5consel" style="margin-top:10px; width:35%" id="5connection' + id + '"><option disabled selected value> -- Connection 5 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"> <option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <select class="6consel" style="margin-top:10px; width:35%" id="6connection' + id + '"><option disabled selected value> -- Connection 6 --</option><option> HDMI(Tail)</option><option>VGA(Tail)</option><option>Displayport Tail Female to Female</option> <option>FType(TV) 3Ghz Female to Female</option><option>Optical(Tos Link)</option> <option>Data(RJ45 Cat6 Ethernet [Cat5e compatible])</option><option>BNC(Video)</option><option>DVI (Pass through adapter)</option><option>RS232(DB9)(Pass through adapter)</option><option>SVideo(Pass through adapter)</option> <optgroup label="USB"><option>A Female to A Female</option> <option>B Female to A Female</option> <option> USB A Female to A Male</option> <option> USB B Male to A Female</option><option>USB B Female to B Male</option> <option>USB Active Extender A Female to A Female</option> </optgroup> <optgroup label="XLR"> <option>Male Gen 3</option><option>Male Gen 4</option><option>Male Gen 5</option><option>Female Gen 3</option><option>Female Gen 4</option><option>Female Gen 5</option></optgroup><optgroup label="RCA Pass though adapters"><option>Audio(Red &amp; White)</option> <option>Composite video(Yellow)</option><option>AV COmbined(RWY)</option></optgroup><option>Component(All RCA RGB) All RCA Pass Throughs</option></select>' +
    ' <input class="5consellog" style="margin-top:10px; width:35%" id="5wordconnection' + id + '" placeholder="Connection 5 Custom Label(max 15 chars)" type="text" />' +
    ' <input class="6consellog" style="margin-top:10px; width:35%" id="6wordconnection' + id + '" placeholder="Connection 6 Custom Label(max 15 chars)" type="text" />' +
    '<textarea name="specialinstructions' + id + '" id="specialinstructions' + id + '" style="margin-top:10px; width:70%" class="form-control special" rows="3" placeholder="Special Instructions"></textarea>' +
    '<br><hr><br></div>';

  $('div.addsection').append(large);
  event.preventDefault();
});
$('#removeprod').on('click', function() {
  $('.contentprint').remove();
});
$('#serialize').click(function(event) {
  var entereddata = [];
  var products = [];

  var i;
  //id is the count of the sections
  for (i = 1; i <= id; i++) {

    var indivproduct = [];
    //dont forget logo
    indivproduct.push([$("input#quantity" + i).val(), $("select#orientation" + i).val(), $("select#plate" + i).val(), $("select#colour" + i).val(), $("select#1connection" + i).val(), $("input#1wordconnection" + i).val(), $("select#2connection" + i).val(), $("input#2wordconnection" + i).val(), $("select#3connection" + i).val(), $("input#3wordconnection" + i).val(), $("select#4connection" + i).val(), $("input#4wordconnection" + i).val(), $("select#5connection" + i).val(), $("input#5wordconnection" + i).val(), $("select#6connection" + i).val(), $("input#6wordconnection" + i).val(), $("textarea#specialinstructions" + i).val()]);

    products.push(indivproduct);

  };

  entereddata.push([$("input#contactname").val(), $("input#companyname").val(), $("input#address").val(), $("input#contactnumber").val(), $("input#email").val(), $("input#requiredby").val(), products]);
  console.log(JSON.stringify(entereddata));
  //return false;//don't submit form  

  /*send json data to file
  $.ajax({
      type: "POST",
      data: {mydata: JSON.stringify(entereddata)},
      url: "index.php",
      success: function(data){
      }
  });
  */
});

<强>的Javascript

.circle {
    background: #1d1d1b;
    border-radius: 50%;
    color: #fff;
    display: table;
    height: 50px;
    font-weight: 700;
    font-size: 1.6em;
    width: 50px;
    margin: 0 auto;
    margin-bottom: 10px;
    float: left;
}

div {
  display:block;
  height:100px
}