用jquery和ajax提交表單但沒有提交按鈕

Question

我有一個包含包含可排序行的表的表單。 排序工作正常，行排序的位置存儲在數據庫中。 通過提交表單和ajax調用來完成保存。

在以前的版本中，我使用按鈕進行提交，此代碼可以很好地將所有內容保存在數據庫中。 現在，我想刪除該按鈕，因為用戶傾向於忘記按保存。

現在，在上移或下移一行之后，都會調用updateProductSortOrder（）函數，但不會提交表單。

我在這里通讀了許多關於stackoverflow和其他資源的問題，但我無法弄清楚我在做什么錯。

 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

使用onblur事件。 使用該按鈕，您可能發生了onclick事件。

Answer 2

解決方案已在評論中給出，但我也將其發布在此處

1. 用$（“＃updateSortOrder”）。submit（）替換updateProductSortOrder中的所有內容，因為當從元素啟動EventSubmit時，submit（function（）{}）將啟動該函數，而commit（）（不帶參數）將將該表單提交為如果您單擊
2. 添加了var form = document.getElementById('updateSortOrder'); ，因為不會填充new FormData(form)

謝謝@jonatjano和@Martin的幫助

代碼示例已更新