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

【问题标题】：submiting a form with jquery and ajax but no submit button使用 jquery 和 ajax 提交表单但没有提交按钮
【发布时间】：2018-08-23 07:58:34
【问题描述】：

我有一个包含可排序行的表格的表格。排序工作正常，行排序的位置存储在数据库中。保存是通过提交表单和 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>

【问题讨论】：

您喜欢哪种方法？保存按钮似乎是最适用的解决方案，因为其他解决方案需要在用户甚至可能还没有准备好发送表单的其他操作时发送表单。您可以做的是添加 javascript，提醒用户在表单末尾按保存/发送或其他任何内容，或者当他们尝试在未按保存/发送的情况下离开时。
如果您使用submit 不带参数，则与单击提交按钮相同
@Martin 谢谢，但在我看来，这会让事情变得过于复杂。此外，如果用户接受默认排序，则无需执行任何操作。
@jonatjano 你能添加一个例子吗，因为我对 javascript/jquery 不太熟悉。我很危险，可以复制粘贴和更改，但就是这样。
然后你可以通过 onchange 在最后一个用户输入上触发你的函数。 onchange="functionName();" 但同样，这将在离开最后一个输入字段时提交表单。这意味着，如果用户从最后一个输入字段开始，但由于某种原因切换到另一个，因为他/她意识到他们在之前的输入字段中忘记了某些内容，或者其他什么，它仍然会保存/发送表单。这就是我最初关心的问题，也是我提出之前所做的事情的原因。

标签： javascript php jquery ajax forms

【解决方案1】：

使用 onblur 事件。使用按钮，您可能有一个 onclick 事件。

【讨论】：

你能详细说明一下吗？我在哪里添加 onblur ？
要保存数据时用户留下的元素。我假设您有一个输入字段等。

【解决方案2】：

解决方案在评论中给出，但我也会在这里发布它们

将 updateProductSortOrder 中的所有内容替换为 $("#updateSortOrder").submit () 因为 submit(function (){}) 将在 EventSubmit 从元素启动时启动该函数，而 submit()（不带参数）将提交就像你点击了一个
添加了var form = document.getElementById('updateSortOrder');，因为new FormData(form) 不会填充

感谢@jonatjano 和@Martin 的帮助

代码示例已更新

【讨论】：