Wie man verschiedene Formen sendet und php es als ein Formular mit $ .ajax lesen lässt

Question

So habe ich eine email Funktion, die ich mit $ .ajax abschließen möchte und ich verwende 3 verschiedene Formen. Auch die Formulare werden mit einer $ .ajax Anfrage geladen und wenn ein Benutzer auf einen Knopf klickt, verschwindet ein Formular und ein neues Formular erscheint. so das Problem ist, dass ich die Daten von den 3 Formen gleichzeitig zur php Seite senden muss, also muss es nur eine eMail senden.

JQuery-Code:

//load first form 
$(".volgende").click(function(){ 
    $("#form-1").slideToggle("slow" , function(){ 
     //first form will dissapear and second form will apear 
     $.ajax({ 
      url: "include/stap-2.php", 
      success:function(result){ 
      $(".form>.container").hide().html(result).slideToggle(); 
      } 
     }); 
     //get form data when button is clicked 
     var formData1 = { 
      'strnaam' : $("#strnaam").val(), 
      'postc' : $("#postc").val(), 
      'plaats' : $("#plaats").val(), 
      'woning' : $("#woning").val(), 
      'leefom' : $("#leefom").val() 
     }; 
     $(document).ajaxComplete(function() { 
      $(".stap-1").removeClass("stap-active"); 
      $(".stap-2").addClass("stap-active"); 
      $(".next-step").removeClass("volgende"); 
      $(".next-step").addClass("volgende-2"); 
     }); 
    }); 
    //when the second button is clicked 
    $(".volgende-2").click(function(){ 
     //second form dissapear and third form apear 
     $("#form-2").slideToggle("slow", function(){ 
      $.ajax({ 
       url: "include/stap-3.php", 
       success:function(result){ 
       $(".form>.container").hide().html(result).slideToggle(); 
       } 
      }); 
      // second form data stored 
      var formData2 = { 
       'vraagprijs' : $("#vraagprijs").val(), 
       'woz'  : $("#woz").val(), 
       'biedingen' : $("#biedingen").val(), 
       'uiterste' : $("#uiterste").val(), 
       'interieur' : $("#interieur").val(), 
       'exterieur' : $("#exterieur").val() 
      }; 
      $(document).ajaxComplete(function(){ 
       $(".stap-2").removeClass("stap-active"); 
       $(".stap-3").addClass("stap-active"); 
       $(".next-step").removeClass("volgende-2"); 
       $(".next-step").addClass("verzenden"); 
       $(".verzenden", this).text("Verzenden"); 
       $(".verzenden", this).prop("type", "submit"); 
       //alert(JSON.stringify(formData2, null, 4)); 
      }); 
     }); 
    }); 
    //submit function on the third form 
    $(".verzenden").click(function(event){ 
      //get form data from the third form 
      var formData = { 
      'postc'  : $('#postc').val(), 
      'naam'  : $('#naam').val(), 
      'telnr'  : $('#telnr').val(), 
      'email'  : $('#email').val(), 

      }; 
      $.ajax({ 
       type  : 'POST', 
       url  :"include/email-verwerk.php", 
       data  :formData, // send info from third form 
       dataType :"html", 
       encode : true, 
       success : function(){ 
        $("form").hide(); 
        $(".verzenden").hide(); 
       $(".form>.container").hide().html("<div class='alert alert-success'><strong>Bedankt,</strong><br><p>Je bericht is succesvol verstuurd we doen ons best om binnen twee dagen te antwoorden.<br>voor dringende vragen kunt u ons bereiken op&nbsp;<span><strong>+31 645 96 22 02</strong></span></p></div>").slideToggle(); 
       }, 
       error: function(){ 
          $("form").hide(); 
          alert("fout"); 
          } 
     }); 
     event.preventDefault(); 
    }); 
}); 

so, wenn $ (‚Verzenden‘) angeklickt wird nur die dritte Form der PHP-Seite einreichen ist es eine Möglichkeit, die Daten aus der ersten und der zweiten Form schließen Damit die php-Seiten ihre Daten erhalten, wird nur eine vollständige E-Mail gesendet.

Answer 1

Versuchen Sie, wie diese Weise nur einzelne Form und drei div, die man zeigen und verstecken, indem man

Und zuletzt, um alle Feldwerte von Ajax senden

$("#part1-btn").click(function(){ 
 
    $("#part2").show(); 
 
    $("#part1").hide(); 
 
}); 
 
$("#part2-btn").click(function(){ 
 
    $("#part2").hide(); 
 
    $("#part3").show(); 
 
    
 
}); 
 

 

 
$("#part3-btn").click(function(){ 
 
    
 
    var part1 = $('#part1-txt').val(); 
 
    var part2 = $('#part2-txt').val(); 
 
    var part3 = $('#part3-txt').val(); 
 
    var all = "part1 value:"+part1+"<br>part2 value:"+part2+"<br>part2 value:"+part3; 
 
    
 
    $("#allval").html(all); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id ='maimform'> 
 

 
<div id='part1' > 
 
<label>part 1</label> 
 
<input type='text' id='part1-txt' /> 
 
<input type='button' id='part1-btn' value='submit' /> 
 
</div> 
 

 
<div id='part2' style='display:none'> 
 
    <label>part 2</label> 
 
<input type='text' id='part2-txt' /> 
 
<input type='button' id='part2-btn' value='submit' /> 
 
</div> 
 
    
 
<div id='part3' style='display:none'> 
 
    <label>part 3</label> 
 
<input type='text' id='part3-txt' /> 
 
<input type='button' id='part3-btn' value='submit' /> 
 
</div> 
 
    
 
<div id='allval'> 
 
    
 
</div> 
 

 
</form>