提交带有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 + "
Error:" + 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>

</div>

Answer 1

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