时间戳

首页 > 解决方案 > 使用 jquery 和 ajax 提交表单

jquery - 使用 jquery 和 ajax 提交表单

问题描述

我正在编写一个生成弹出表单的脚本。提交表单后，我需要执行另一个函数来使用 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>

非常感谢您的时间。

标签： jqueryajax

解决方案

如果我没有弄错您要执行的操作，则说明您使用了错误的功能。首先，正如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');
})

推荐阅读