отправка формы с использованием jquery и ajax

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

Если я не ошибаюсь в том, что вы пытаетесь сделать, вы используете неправильную функцию.Прежде всего, вы не препятствуете действию по умолчанию, как указал Велимир.Поэтому добавьте эту строку в функцию:

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(); /...