通过 Ajax 和 Jquery 实现多步表单

Question

我编写了这段代码，以便我可以制作多步骤表单并通过 AJAX 加载和提交数据。

代码在第一次表单提交时运行良好，但在第二次尝试时页面会自行重新加载。有人可以帮助我吗？

$(document).ready(function() {
  jQuery.ajax({
    type: "post",
    url: 'index.php'
  }).done(function(msg) {
    $('#main-container').html(msg);
    index();
  })

  function index() {
    $('#myForm').submit(function(e) {
      e.preventDefault();
      var formData = $('#main-container').find('form').serialize();
      console.log(formData);
      jQuery.ajax({
        type: "POST",
        url: 'index.php',
        data: formData
      }).done(function(msg2) {
        console.log(msg2)
        $('#main-container').html(msg2);
      });
    });
  }
});

Answer 1

#是这样的#

$.ajax({ //here i have inculded the php file where i am holding all the multi step form data in other page which i am going to show to the user
  type: "GET",
  url:'index.php'
}).done(function(msg) {
  $('#main-container').html(msg);
  nextBtn();
  backBtn();
})
    

function nextBtn() { //this is the next btn or you may call the submit btn 
  $(document).on('click', ".next", function () {
    var formData = $('#myForm').serialize();
    console.log(formData);
    $.ajax({
      type: "POST",
      url:'index.php',
      data: formData
    }).done(function(msg2) {
      console.log(msg2)
      $('#main-container').html(msg2);
    });
  });
}

Answer 2

ans：-此代码是多站汽车租赁自定义表单此表单数据不是实时数据库数据输入