首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用jquery和ajax提交表单,但没有提交按钮

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

Stack Overflow用户
提问于 2018-08-23 07:58:34
回答 2查看 57关注 0票数 0

我有一个包含有可排序行的表的表单。排序工作正常,行排序的位置存储在数据库中。保存是通过提交表单和ajax调用来完成的。

在以前的版本中,我用一个按钮完成了提交,这段代码很好地保存了数据库中的所有内容。现在我想取消按钮,因为用户往往忘记按下保存。

现在,在将一行向上或向下移动之后,将调用updateProductSortOrder()函数,但没有提交表单。

我在这里读了很多关于堆叠溢出和其他资源的问题,我不知道我做错了什么。

代码语言:javascript
运行
复制
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);
      }
    })
  );
}
代码语言:javascript
运行
复制
.row-resize {
  cursor: row-resize;
}
代码语言:javascript
运行
复制
<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>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-23 09:37:55

解决方案是在这里给出的,但我也会在这里张贴。

  1. 将updateProductSortOrder中的所有内容替换为$("#updateSortOrder").submit (),因为submit (函数(){})将在从元素启动EventSubmit时启动函数,而submit() (没有参数)将提交表单,就像单击
  2. 添加了var form = document.getElementById('updateSortOrder');,因为new FormData(form)不会填充

谢谢你@jonatjano和Martin

代码示例已经更新。

票数 0
EN

Stack Overflow用户

发布于 2018-08-23 08:03:09

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51980908

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档