Adding rows to table with jquery, but new rows not submitted to form with php-CodePudding

I am close on this I know, the jquery to add new rows to the table is working well but when the form is submitted, I'm only getting the input values from the first row only (each row has some inputs). I can't figure out why the rest of the rows, no matter how many exist, are not being picked up in the array.

Js:

//add rows
$("#addrow").click(function(){
    i=1;
    var row = '<tr>'
      '<td><input type="checkbox" name="record[]" style="margin:0 10px 0 -15px"></td>'
      '<td><input class="form-control" type="number" name="partid[]" id="pid' i '"></td>'
      '<td><input class="form-control" type="number" min="1" step="1" name="partqty[]" id="pqty' i '" placeholder="Qty"></td>'
      '<td><input class="form-control" type="number" min="0.0001" step="0.0001" name="partlength[]" id="pqty' i '" placeholder="Length"></td>'
      '</tr>';
    i  ;
    $("#partstable").append(row);
});

The form:

<input type="button" class="btn btn-dark" id="addrow" value="Add Row">
            <table id="partstable" style="padding:15px;margin:15px;">
            <thead>
            <tr>
            <th></th>
            <th></th>
            <th>Qty</th>
            <th>Length</th>
            </tr>
            </thead>
            <tbody>
            <form action="index.php" method="post">
            <tr>
                <td><input type="checkbox" name="record[]" style="margin:0 10px 0 -15px"></td>
                <td><input class="form-control" type="number" name="partid[]" id="pid[]"></td>
                <td><input class="form-control" type="number" min="1" step="1" name="partqty[]" id="pqty[]" placeholder="Qty"></td>
                <td><input class="form-control" type="number" min="0.0001" step="0.0001" name="partlength[]" id="pqty[]" placeholder="Length"></td>
            </tr>
            </tbody>
            </table>
            <button type="button" class="btn btn-dark delete-row">Delete Row</button>
            
            <input name="submit" class="btn btn-success" type="submit" value="Submit">
            </form>

I expect to see ALL rows, regardless of the qty available in the array below, but I'm only getting the first row no matter what I try...

            <?php
        if(isset($_POST['submit'])){
            foreach($_POST['partid'] as $partid){
               $partid = $_POST['partid'];
               print_r($partid);
               $partqty = $_POST['partqty'];
               print_r($partqty);
               $partlength = $_POST['partlength'];
               print_r($partlength);
            }
        }
        ?>

CodePudding user response：

Consider the following.

$(function() {
  //add rows
  $("#addrow").click(function() {
    var i = $("#partstable tbody tr").length   1;
    var row = $("<tr>");
    $("<td>").appendTo(row);
    $("<input>", {
      type: "checkbox",
      name: "record[]"
    }).appendTo($("td:last", row));
    $("<td>").appendTo(row);
    $("<input>", {
      type: "number",
      name: "partid[]",
      id: "pid"   i,
      class: "form-control"
    }).appendTo($("td:last", row));
    $("<td>").appendTo(row);
    $("<input>", {
      type: "number",
      min: 1,
      step: 1,
      name: "partqty[]",
      id: "pqty"   i,
      placeholder: "Qty",
      class: "form-control"
    }).appendTo($("td:last", row));
    $("<td>").appendTo(row);
    $("<input>", {
      type: "number",
      min: 0.0001,
      step: 0.0001,
      name: "partlength[]",
      id: "plength"   i,
      placeholder: "Length",
      class: "form-control"
    }).appendTo($("td:last", row));
    $("#partstable").append(row);
  });

  $("form").submit(function(event) {
    event.preventDefault();
    console.log($(this).serialize());
  });
})

#partstable tbody tr td>input[type='checkbox'] {
  margin: 0 10px 0 -15px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="btn btn-dark" id="addrow" value="Add Row">
<form action="index.php" method="post">
  <table id="partstable" style="padding:15px;margin:15px;">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th>Qty</th>
        <th>Length</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="record[]"></td>
        <td><input class="form-control" type="number" name="partid[]" id="pid1"></td>
        <td><input class="form-control" type="number" min="1" step="1" name="partqty[]" id="pqty1" placeholder="Qty"></td>
        <td><input class="form-control" type="number" min="0.0001" step="0.0001" name="partlength[]" id="plength1" placeholder="Length"></td>
      </tr>
    </tbody>
  </table>
  <button type="button" class="btn btn-dark delete-row">Delete Row</button>
  <input name="submit" class="btn btn-success" type="submit" value="Submit">
</form>

There is more code, yet it builds all the parts properly with unique IDs.

CodePudding user response：

As @Barmar mentioned in the comments, your HTML is invalid.

And the other reason why you are not getting the other rows input values because you are adding them using jQuery and they are not in the DOM tree when you submit the form. The submit button does not take the form fields in account that are created after page load.

$('#id-of-your-form').on('submit', function(e) {

    //prevent the default form submission
    e.preventDefault();

   $.post('URL-you-want-to-post-data-to', $(this).serialize());
});