Question

我正在处理一个生成弹出表单的脚本。提交表单后，我需要执行另一个函数来使用ajax提交数据。我遇到的问题是第二个功能未触发。谁能看到我要去哪里错了。

我有一个打开表单的按钮：

<button id="new-record"  class="buttontext">open form</button>

第一个打开表单的函数，可以正常工作：

$( function() {
  var dialog1, form,
  location = $( "#location" ),
  displayfloor = $( "#displayfloor" ),
  res = $( "#res" ),
  allFields = $( [] ).add( location ).add( displayfloor ).add( res );
  dialog1 = $( "#dialog-form1" ).dialog({
    autoOpen: false,
    maxHeight: 250,
    height: 250,
    width: 350,
    modal: true,
    buttons: [{
     text: "Cancel",
     click: function() {
       $(this).dialog("close");
     }},
     {
     text: "Submit",
     click: function() {
     $('#form1-new-record').submit();
     $(this).dialog("close");
        }}
   ]
});

$( "#new-record" ).button().on( "click", function() {
  dialog1.dialog( "open" );
});
});

提交表单的第二个功能：

$(document).ready(function() {
  $("#form1-new-record").submit(function() {
    var myform = document.getElementById("requestFormData");
    var fd = new FormData(myform );
    $.ajax({
      url: "../insert_new_floor.php",
      data: fd,
      cache: false,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function (dataofconfirm) {
        window.location.reload();
      }
    });
  })
})

表格

<form  method="" action="../insert_new_floor.php"  name="requestFormData" id="requestFormData">
<input type="text" name="location" id="location"> 
<input type="text" name="floor" id="displayfloor"> 
<input type="text" name="res" id="res">
<input type="button" tabindex="-1" id="dialog-button-form1">
</form>

非常感谢您的宝贵时间。

Answer 1

如果我没弄错您要做什么，那么您使用的是错误的函数。首先，您不会阻止Velimir指出的默认操作。因此，将此行添加到函数中：

e.preventDefault();

此外，您永远不会提交表单。事件发生后，您只是在捕获事件。要触发提交，请使用以下命令：

$('form').trigger('submit');

最后的代码：

$(document).ready(function() {
  $("#form1-new-record").submit(function(e) {
    e.preventDefault();
    var myform = document.getElementById("requestFormData");
    var fd = new FormData(myform );
    $.ajax({
      url: "../insert_new_floor.php",
      data: fd,
      cache: false,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function (dataofconfirm) {
        window.location.reload();
      }
    });
  });
  $("#form1-new-record").trigger('submit');
})

Answer 2

提交表单（单击“提交”按钮）时，页面将重新加载，并且JavaScript从头开始。您需要停止提交表单，可以使用以下方法： $("#form1-new-record").submit(function(e) { e.preventDefault(); /...

使用jquery和ajax提交表单

2 个答案: