使用ajax在表单外提交带有按钮的表单答案

【问题标题】：submit form with button outside form using ajax使用ajax在表单外提交带有按钮的表单
【发布时间】：2018-07-24 18:15:27
【问题描述】：

我尝试使用 ajax 发布表单，但当前代码并不能正常工作。当我按下保存按钮时，表单被提交 n + 1 次。即刷新提交一次的页面后，下次我提交两个表单时提交，第三次......等等。

我已经花了很多时间研究这个问题（2 天），但我还没有找到与我所问的问题非常相似的问题。

我在这里的学习曲线很陡，所以我希望有人能指出我做错了什么。

我想我可能弄混了一些东西。要提交的步骤是。

正在填写表单值。
按下按钮以显示模式以确认提交表单（提交按钮实际上在此模式内，而不是在表单本身内）。
表单已提交。

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide'); // close confirm modal
  $('#newForm').submit(function (e) {
    e.preventDefault();
    let formData = $(this).serialize();
    
    $.post({
      type: 'POST',
      url: '/api/pois/',
      data: formData
    })

<form id="newForm">
  <input type="text" id="name" name="name">
  <input type="text" id="company" name="company">
</form>
    
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="submit" class="btn btn-success" form="newForm" id="confirmYes">Save</button>
</div>

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

问题是因为您在每次点击时都会创建一个新的submit 事件处理程序。根据您想要做什么的描述，您需要在页面加载时创建一个提交处理程序，并在单击按钮时触发它。像这样的：

$('#newForm').submit(function(e) { // handle the submit event
  e.preventDefault();
  let formData = $(this).serialize();

  $.post({
    type: 'POST',
    url: '/api/pois/',
    data: formData
  })
})

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide');
  $('#newForm').submit(); // trigger the submit event
});

【讨论】：

感谢您完成我所希望的工作！感谢您指出我的错误并解释之前发生的事情，非常感谢。我仍然不太了解提交处理程序是如何创建的，但是我刚从我的日常工作中回来，需要理清头绪。将对此进行更多研究=)。
哦，是的，这现在更有意义了。谢谢！

【解决方案2】：

只需删除 $('#newForm').submit(function (e) {}); ：

.submit(function (e) {}) 正在为您的表单的 submit 事件创建事件处理程序，它没有提交它。

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide'); // close confirm modal

  let formData = $('#newForm').serialize();

  $.post({
    type: 'POST',
    url: '/api/pois/',
    data: formData
  });
});

【讨论】：

我试过这个例子，它实际上并没有提交任何表格，不知道为什么。会不会是保存按钮有一个 type="submit"？但是，我将其更改为常规按钮，这并没有什么不同。 @Roy McCrossan 的例子虽然有效。将尝试了解其中的区别。

【解决方案3】：

$('#confirmYes').click(function() {

  let formData = $('#newForm').serialize();
  $.post({
  type: 'POST',
  url: '/api/pois/',
  data: formData
});
);

<form id="newForm">
  <input type="text" id="name" name="name">
  <input type="text" id="company" name="company">
</form>
    
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="button" class="btn btn-success" id="confirmYes">Save</button>
</div>

【讨论】：