jQuery Ajax POST不能动态添加输入，输入具有名称，而我尝试了其他解决方案

Question

Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored

I have tried .on() .live() .submit() functions but get the same result. My php file consists of a print_r($_POST); and nothing else this is put into the console.

https://pastebin.com/CuAPSzKe - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.

This is the code to make the call:

$('input#submitButton').on('click', function(e)  {

e.preventDefault(); // avoid to execute the actual submit of the form.

var form = $('form#orderForm');
var url = form.attr('action');

$.ajax({
  type: "POST",
  url: url,
  data: form.serialize(), // serializes the form's elements.
  success: function(data)
  {

    console.log(data);

  }
});


});

My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.

Answer 1

It is having a major issue due to the way your html is arbitrarily structured and you are missing a end div tag for your item information container. Fix these issues and it will run. You also may want to go ahead and start your first item information with a start of 0 and set your counter to 1 so it is easier to aparse on the backend once you recieve the info.

Move your form tag under your first container:

<div class="container">
    <form id="orderForm" method="POST" action="test.php">
        <h2>Address Information</h2>

End tag

                    <input type="submit" id="submitButton" name="submitButton" value="Submit">

                </div>
            </div>
    </form>
</div>

Full example of cleaned up code running:

 function test() { var billName = document.getElementById('bill_name'); var shipName = document.getElementById('ship_name'); var billLine1 = document.getElementById('bill_line_1'); var shipLine1 = document.getElementById('ship_line_1'); var billLine2 = document.getElementById('bill_line_2'); var shipLine2 = document.getElementById('ship_line_2'); var billLine3 = document.getElementById('bill_line_3'); var shipLine3 = document.getElementById('ship_line_3'); var billLine4 = document.getElementById('bill_line_4'); var shipLine4 = document.getElementById('ship_line_4'); var billCounty = document.getElementById('bill_county'); var shipCounty = document.getElementById('ship_county'); var billPostcode = document.getElementById('bill_post'); var shipPostcode = document.getElementById('ship_post'); var billTele = document.getElementById('bill_telephone'); var shipTele = document.getElementById('ship_telephone'); var billEmail = document.getElementById('bill_email'); var shipEmail = document.getElementById('ship_email'); shipName.value = billName.value; shipLine1.value = billLine1.value; shipLine2.value = billLine2.value; shipLine3.value = billLine3.value; shipLine4.value = billLine4.value; shipCounty.value = billCounty.value; shipPostcode.value = billPostcode.value; shipTele.value = billTele.value; shipEmail.value = billEmail.value; } $('input#submitButton').on('click', function(e) { e.preventDefault(); // avoid to execute the actual submit of the form. var form = $('form#orderForm'); var url = form.attr('action'); var test = form.serialize(); alert(test); }); $(document).ready(function () { var counter = 0; $("#addrow").on("click", function () { var newRow = $("<tr>"); var cols = ""; cols += '<td> <input type="text" class="form-control" name="sku' + counter + '" /></td> '; cols += '<td> <input type="text" class="form-control" name="quantity' + counter + '" /></td> '; cols += ' <td> <input type="text" class="form-control" name="price' + counter + '" /></td>'; cols += ' <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>'; newRow.append(cols); $("table.order-list").append(newRow); counter++; }); $("table.order-list").on("click", ".ibtnDel", function (event) { $(this).closest("tr").remove(); counter -= 1 }); }); 

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <form id="orderForm" method="POST" action="test.php"> <h2>Address Information</h2> <div class="row"> <div class="col-6"> <div class="form-group"> <label for="bill_name"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Name</div> </div> <input id="bill_name" name="bill_name" type="text" required="required" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="bill_line_1"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Line 1</div> </div> <input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="bill_line_2"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Line 2</div> </div> <input id="bill_line_2" name="bill_line_2" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="bill_line_3"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Line 3</div> </div> <input id="bill_line_3" name="bill_line_3" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="bill_line_4"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Line 4</div> </div> <input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> <span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span> </div> <div class="form-group"> <label for="bill_county"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing County</div> </div> <input id="bill_county" name="bill_county" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-globe"></i> </div> </div> </div> </div> <div class="form-group"> <label for="bill_post"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Postcode</div> </div> <input id="bill_post" name="bill_post" type="text" required="required" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-area-chart"></i> </div> </div> </div> </div> <div class="form-group"> <label for="bill_telephone"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Telephone Number</div> </div> <input id="bill_telephone" name="bill_telephone" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-phone"></i> </div> </div> </div> </div> <div class="form-group"> <label for="bill_email"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Billing Email Address</div> </div> <input id="bill_email" name="bill_email" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-tablet"></i> </div> </div> </div> </div> </div> <div class="col-6"> <div class="form-group"> <label for="ship_name"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Name</div> </div> <input id="ship_name" name="ship_name" type="text" required="required" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="ship_line_1"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Line 1</div> </div> <input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="ship_line_2"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Line 2</div> </div> <input id="ship_line_2" name="ship_line_2" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="ship_line_3"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Line 3</div> </div> <input id="ship_line_3" name="ship_line_3" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> </div> <div class="form-group"> <label for="ship_line_4"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Line 4</div> </div> <input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-building-o"></i> </div> </div> </div> <span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span> </div> <div class="form-group"> <label for="ship_county"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping County</div> </div> <input id="ship_county" name="ship_county" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-globe"></i> </div> </div> </div> </div> <div class="form-group"> <label for="ship_post"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Postcode</div> </div> <input id="ship_post" name="ship_post" type="text" required="required" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-area-chart"></i> </div> </div> </div> </div> <div class="form-group"> <label for="ship_telephone"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Telephone Number</div> </div> <input id="ship_telephone" name="ship_telephone" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-phone"></i> </div> </div> </div> </div> <div class="form-group"> <label for="ship_email"></label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Shipping Email Address</div> </div> <input id="ship_email" name="ship_email" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-tablet"></i> </div> </div> </div> </div> <button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button> </div> </div> <br> <div class="container"> <h2>Extra Information</h2> <div class="row"> <div class="col-6"> <div class="form-group row"> <label for="ship_method" class="col-5 col-form-label">Shipping Method</label> <div class="col-7"> <div class="input-group"> <input id="ship_method" name="ship_method" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-anchor"></i> </div> </div> </div> </div> </div> <div class="form-group row"> <label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label> <div class="col-7"> <div class="input-group"> <input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-money"></i> </div> </div> </div> <span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span> </div> </div> <div class="form-group row"> <label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label> <div class="col-7"> <div class="input-group"> <input id="mage_order_number" name="mage_order_number" type="text" class="form-control"> <div class="input-group-append"> <div class="input-group-text"> <i class="fa fa-bars"></i> </div> </div> </div> </div> </div> </div> </div> </div> <br><br> <div class="container"> <h2>Item Information</h2> <div class="row"> <div class="col-12"> <table id="myTable" class=" table order-list"> <thead> <tr> <td>SKU</td> <td>Quantity</td> <td>Price</td> </tr> </thead> <tbody> <tr> <td> <input type="text" name="sku" class="form-control" /> </td> <td> <input type="number" name="quantity" class="form-control" /> </td> <td> <input type="number" name="price" class="form-control" /> </td> <td> <a class="deleteRow"></a> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5" style="text-align: left;"> <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" /> </td> </tr> <tr></tr> </tfoot> </table> <input type="submit" id="submitButton" name="submitButton" value="Submit"> </div> </div> </div> </form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>