Laden von Formulardaten mit Ajax, Jetzt müssen Formulardaten mit Ajax

Question

übermitteln Ich habe nach einer Weile gesucht, um dies zur Arbeit zu bringen. (5 Tage) Also lade ich Seiten über meine Seite im selben div mit Ajax mit nächsten und zurück Buttons. Alle div-Informationen sind Formulardaten. Ich muss eine jquery ajax Funktion hinzufügen, um Formulardaten zu nehmen und zur Verarbeitung an meine php Datei zu senden. Beachten Sie, dass die Formulardaten jedes Mal neu sind, wenn auf die Schaltfläche geklickt wird. Frage ist, wie man die Ajax-Funktion mit dem richtigen Event-Handler ablegt und an php sendet, bevor der andere Ajax-Aufruf ein anderes Formular neu lädt.

Loaded Formular (es gibt viele Formen)

<form id="myForm" method="post" action="pages/student_info/ps1.php"> 
    <fieldset> 

    <legend>Legal Name</legend> 
    <label for='firstname'>First Name: </label> 
    <input type='text' name='firstname' 
    id='firstname'minlength="2"required/> 
    <br> 
    <label for='lastname'>Last Name: </label> 
    <input type='text' name='last-name' id='last-name' required/> 
    <br> 
    <label for='mi'>Middle Initial: </label> 
    <input type='text' name='mi' id='mi' /> 
    <br> 
    <br> 
    <legend>Gender</legend> 
    <label for="studentmale">Male</label> 
    <input type="radio" name="studentgender" id="male" value="M" required/> 
    <br> 
    <label for="studentfemale">Female</label> 
    <input type="radio" name="studentgender" id="female" value="F"> 
    <br> 

    </fieldset> 
    </form> 

JQuery

$(document).ready(function() 
    { 
     //submit form with button click 
     $("#next").click(function(){ 
     $("#myForm").submit(); 
     }); 


     $("#myForm").on("submit", "form", function(e) { 
      e.preventDefault(); 
      $.ajax({ 
      dataType: "json", 
      type: 'POST', 
      url: $('#myForm').attr("action"), 
      data: $('#myForm').serializeArray(), // getting filed value in 
      serialize form 

      }) 
      .done(function(data){ // if getting done then call. 

      // show the response 
      alert(data); 

      }) 
      .fail(function() { // if fail then getting message 

      // just in case posting your form failed 
      alert("Posting failed."); 

      }); 

      // to prevent refreshing the whole page page 
      return false; 

     }); 

Funktion für die Seitennavigation läuft, bevor ich für Form Injektion stoppen

  //This code runs when a back or next button has been pressed 
     $("#next, #prev").click(function(){ 
      var max =$('#next').data("max"); 
      max = parseInt(max); 
      currentPage = ($(this).attr('id')=='next') ? currentPage + 1 : 
      currentPage - 1; 
      // ALL DATA VALIDATION DONE ON THIS ONE LINE 
      var formStatus = $('#myForm').validate().form(); 

      ...much more code here but it all runs navigation just fine 

Answer 1

Ihre Delegation auf dieser Linie ist falsch:

$("#myForm").on("submit", "form", function(e) { 

Es ist für eine Form innerhalb#myForm aber myForm ist die Form suchen. ALso da Sie sagen, ersetzen Sie die gesamte Form, die Zuhörer auf Ersatz verloren gehen

Delegierten auf ein höheres Niveau Vorfahren, die immer existiert und Ziel #myForm

$(document).on("submit", "#myForm", function(e) {