Ошибка с динамическими данными в массиве

1

У меня есть ошибка с моим скриптом, указанным ниже. Я понятия не имею, где я ошибаюсь. Я попробовал несколько вариантов и способов закодировать его, и я все равно не получаю ничего.

Как вы можете сказать, у меня есть пользовательский сгенерированный раздел для ввода пользователем данных. В основном, когда они нажимают, он добавляет другой раздел. Затем я хочу преобразовать эти данные в массив по клику. Кажется, что это работает для моей пользовательской информации (верхняя часть), но по какой-то причине она не печатает вспомогательный массив в цикле 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>

Если кто-нибудь может увидеть, где я поступил неправильно, это было бы очень полезно. :)

Ура,

Теги:
arrays
forms
serialization
append

2 ответа

1
Лучший ответ

Как id.length, одна из проблем заключалась в том, что вы ходили до id.length с вашим циклом вместо id.

Однако это была не единственная ошибка. Другая проблема заключалась в том, что вы начинаете цикл с 0, никогда не достигая id, тогда как значения id начинаются с 1. Вы можете исправить это, изменив цикл на

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

Это делает ваш скрипт почти правильным, однако у вас все еще есть опечатки, например

Вместо

id="orientation"' + id + '"

использование

id="orientation' + id + '"

а также вы используете селектора типа "input#yourid" + id в случае, если тег не является input, а что-то еще, например, select или textarea. Полное решение:

HTML

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

Javascript

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){
      }
  });
  */
});
Поделиться
  • 0
    Боже мой, что все исправлено. у нас новый чемпион нет больше ошибок. Еще раз спасибо, ребята. ты мои герои.
  • 0
    @slyk_style, пожалуйста. Если этот ответ решил вашу проблему, вы можете принять его. Таким образом, вы сообщите будущим посетителям, что проблема решена, что может быть полезно в случае подобных проблем.
Показать ещё 1 комментарий
1

Переменной id представляет собой целое количество и (если прототип не был изменен) не имеет длину собственности.

Чтобы иметь цикл for, пока я меньше значения id, обновите условия for loop из:

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

к

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

Для потомков Лажос указал еще одну проблему: цикл начинается с 0 и продолжается до тех пор, пока он не достигнет 1 меньше значения id. Однако первый вход имеет атрибут id ввода # quantity1 из-за местоположения кода инкремента. Существует несколько вариантов изменения кода, чтобы он работал.

  1. переместить линию i++; после кода, который создает строку HTML, поэтому значение 0 используется до того, как оно будет увеличено до 1 (см. ниже фрагмент кода)

  2. Запустите цикл for в 1 вместо 0 (как упоминал Лайош)

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


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){
      }
  });
  */
});
<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>
Поделиться
  • 0
    Боже мой, ты удивительный. но по какой-то причине он показывает все значения как ноль. это потому, что $ ("input # amount" + i) .val () правильно?
  • 0
    Хороший вопрос, у вас есть мое мнение.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню