title: submiting a form with jquery and ajax but no submit button
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Now after moving a row up or down the updateProductSortOrder() function is called, but the form is not submitted.</p>
  
  <p>I read through many questions here on stackoverflow, and other resources, and I can not figure out what I am doing wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; index) {
          //update the items before the re-ordered item
            for (var i = index; i &gt; 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 &lt;= $("#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);
        }
      })
    );
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row-resize {
    cursor: row-resize;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="container-fluid"&gt;
    &lt;form name="updateSortOrderForm" method="post" id="updateSortOrder" class="form-horizontal"&gt;
      &lt;div class="row"&gt;
        &lt;input type="hidden" name="bundleId" value="180" /&gt;
        &lt;table class="table table-striped"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Sort order&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Product Name&lt;/th&gt;
              &lt;th&gt;Product Model&lt;/th&gt;
              &lt;th&gt;Product ID&lt;/th&gt;
              &lt;th&gt;Group Name&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id="sortableRows"&gt;
            &lt;tr id="unique-2" class="row-resize"&gt;
              &lt;td class="sortOrder"&gt;0&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Matrox G400 32MB&lt;/td&gt;
              &lt;td&gt;MG400-32MB&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;Graphic Cards&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr id="unique-1" class="row-resize"&gt;
              &lt;td class="sortOrder"&gt;1&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Matrox G200 MMS&lt;/td&gt;
              &lt;td&gt;MG200MMS&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Graphic Cards&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr id="unique-5" class="row-resize"&gt;
              &lt;td class="sortOrder"&gt;2&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Microsoft IntelliMouse Pro&lt;/td&gt;
              &lt;td&gt;MSIMPRO&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;Mice&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr id="unique-6" class="row-resize"&gt;
              &lt;td class="sortOrder"&gt;3&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Microsoft IntelliMouse Explorer&lt;/td&gt;
              &lt;td&gt;MSIMEXP&lt;/td&gt;
              &lt;td&gt;26&lt;/td&gt;
              &lt;td&gt;Mice&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr id="unique-3" class="row-resize"&gt;
              &lt;td class="sortOrder"&gt;4&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Microsoft Internet Keyboard PS/2&lt;/td&gt;
              &lt;td&gt;MSINTKB&lt;/td&gt;
              &lt;td&gt;25&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;input type="hidden" name="view" value="updateSortOrder" /&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>