使用jquery和ajax提交表单

时间:2018-11-07 21:08:10

标签: 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>

非常感谢您的宝贵时间。

2 个答案:

答案 0 :(得分:0)

如果我没弄错您要做什么,那么您使用的是错误的函数。首先,您不会阻止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');
})

答案 1 :(得分:-1)

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