用jquery和ajax提交表单但没有提交按钮

Question

I have a form that contains a table with sortable rows. The sorting works fine, the position of the row sort is stored in a database. The saving is done by submitting the form and an ajax call.

In a previous version I did the submitting with a button, and this code worked just fine saving everything in the database. Now I want to eliminate the button, because users tend to forget to press save.

Now after moving a row up or down the updateProductSortOrder() function is called, but the form is not submitted.

I read through many questions here on stackoverflow, and other resources, and I can not figure out what I am doing wrong.

 var bundleApiUrl = 'bundleApi.php'; if (typeof jQuery.fn.sortable !== "undefined") { $(function () { $('#sortableRows').sortable({ start: function (event, ui) { var start_pos = ui.item.index(); ui.item.data('start_pos', start_pos); }, update: function (event, ui) { var index = ui.item.index(); var start_pos = ui.item.data('start_pos'); //update the html of the moved item to the current index $('#sortableRows tr:nth-child(' + (index + 1) + ') .sortOrder').html(index); $('#sortableRows tr:nth-child(' + (index + 1) + ') .sortOrderValue').val(index); if (start_pos < index) { //update the items before the re-ordered item for (var i = index; i > 0; i--) { $('#sortableRows tr:nth-child(' + i + ') .sortOrder').html(i - 1); $('#sortableRows tr:nth-child(' + i + ') .sortOrderValue').val(i - 1); } } else { //update the items after the re-ordered item for (var i = index + 2; i <= $("#sortableRows tr .sortOrder").length; i++) { $('#sortableRows tr:nth-child(' + i + ') .sortOrder').html(i - 1); $('#sortableRows tr:nth-child(' + i + ') .sortOrderValue').val(i - 1); } } updateProductSortOrder(); }, axis: 'y' }); }); } function updateProductSortOrder() { var form = document.getElementById('updateSortOrder'); $("#updateSortOrder").submit( $.ajax({ url: bundleApiUrl, method: 'POST', data: new FormData(form), contentType: false, cache: false, processData: false, beforeSend: function () { $("#err").fadeOut(); }, success: function (result) { var resultArray = JSON.parse(result); console.log(resultArray); }, error: function (xhr, desc, err) { console.log(xhr); console.log("Details: " + desc + "\\nError:" + err); } }) ); } 

 .row-resize { cursor: row-resize; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container-fluid"> <form name="updateSortOrderForm" method="post" id="updateSortOrder" class="form-horizontal"> <div class="row"> <input type="hidden" name="bundleId" value="180" /> <table class="table table-striped"> <thead> <tr> <th>Sort order</th> <th>Quantity</th> <th>Product Name</th> <th>Product Model</th> <th>Product ID</th> <th>Group Name</th> </tr> </thead> <tbody id="sortableRows"> <tr id="unique-2" class="row-resize"> <td class="sortOrder">0</td> <td>1</td> <td>Matrox G400 32MB</td> <td>MG400-32MB</td> <td>2</td> <td>Graphic Cards</td> </tr> <tr id="unique-1" class="row-resize"> <td class="sortOrder">1</td> <td>1</td> <td>Matrox G200 MMS</td> <td>MG200MMS</td> <td>1</td> <td>Graphic Cards</td> </tr> <tr id="unique-5" class="row-resize"> <td class="sortOrder">2</td> <td>1</td> <td>Microsoft IntelliMouse Pro</td> <td>MSIMPRO</td> <td>3</td> <td>Mice</td> </tr> <tr id="unique-6" class="row-resize"> <td class="sortOrder">3</td> <td>1</td> <td>Microsoft IntelliMouse Explorer</td> <td>MSIMEXP</td> <td>26</td> <td>Mice</td> </tr> <tr id="unique-3" class="row-resize"> <td class="sortOrder">4</td> <td>1</td> <td>Microsoft Internet Keyboard PS/2</td> <td>MSINTKB</td> <td>25</td> <td></td> </tr> </tbody> </table> <input type="hidden" name="view" value="updateSortOrder" /> </div> </form> </div> 

Answer 1

Use the onblur event. With the button you probably had a onclick event.

Answer 2

The solution was given in the coments, but I will post them here too

1. replace everything in updateProductSortOrder by $("#updateSortOrder").submit () because submit(function (){}) will launch the function when the EventSubmit is launched from the element while submit() (without argument) will submit the form as if you clicked on a
2. Added var form = document.getElementById('updateSortOrder'); , because new FormData(form) would not populate

Thank you @jonatjano and @Martin for your help

The code example has been updated