Question

我尝试使用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>

Answer 1

只需删除$('#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
  });
});

Answer 2

问题是因为您在每次点击时都在创建一个新的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
});

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用ajax使用表单外的按钮提交表单

3 个答案: