Javascript 如何发送不同的表单并让php使用$.ajax将其作为一个表单读取

因此，我有一个电子邮件功能，我想用$.ajax完成，我使用3种不同的表单。 此外，表单加载了$.ajax请求，当用户单击按钮时，表单将消失，并显示一个新表单。所以问题是我需要同时将3个表单的数据发送到php页面，这样它只需要发送一封电子邮件

Jquery代码：

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

//加载第一个表单
$（“.volgende”）。单击（函数（）{
$（“#形式-1”）。滑动切换（“慢速”，函数（）{
//第一种形式将消失，第二种形式将消失
$.ajax({
url:“include/stap-2.php”，
成功：功能（结果）{
$（“.form>.container”）.hide（）.html（结果）.slideToggle（）；
}
});
//单击按钮时获取表单数据
变量formData1={
'strnaam'：$（“#strnaam”）.val（），
'邮政编码'：$（“#邮政编码”）.val（），
'plaats'：$（“#plaats”）.val（），
‘woning’：$（“#woning”）.val（），
'leefom'：$（“#leefom”）.val（）
};
$（文档）.ajaxComplete（函数（）{
$（.stap-1”）.removeClass（“stap活动”）；
$（.stap-2”）.addClass（“stap活动”）；
$（“.next step”）.removeClass（“volgende”）；
$（“.next step”）.addClass（“volgende-2”）；
});
});
//单击第二个按钮时
$（“.volgende-2”）。单击（函数（）{
//第二种形式的失序和第三种形式的失序
$（“#形式-2”）。滑动切换（“慢速”，函数（）{
$.ajax({
url:“include/stap-3.php”，
成功：功能（结果）{
$（“.form>.container”）.hide（）.html（结果）.slideToggle（）；
}
});
//存储的第二表单数据
变量formData2={
'vraagprijs'：$（“#vraagprijs”）.val（），
'woz'：$（“#woz”）.val（），
‘biedingen’：$（“#biedingen”）.val（），
'uiterste'：$（“#uiterste”）.val（），
‘interieur’：$（“#interieur”）.val（），
‘exterieur’：$（“#exterieur”）.val（）
};
$（文档）.ajaxComplete（函数（）{
$（.stap-2”）.removeClass（“stap活动”）；
$（.stap-3”）.addClass（“stap活动”）；
$（“.next step”）.removeClass（“volgende-2”）；
$（“.next step”）.addClass（“verzenden”）；
$（“.verzenden”，本）.text（“verzenden”）；
$（.verzenden），this.prop（“type”，“submit”）；
//警报（JSON.stringify（formData2，null，4））；
});
});
});
//在第三个表单上提交函数
$（“.verzenden”）。单击（函数（事件）{
//从第三个表单获取表单数据
var formData={
'post'：$（'#post'）.val（），
“naam”：$（“#naam”）.val（），
‘telnr’：$（‘telnr’）.val（），
“email”：$（“#email”）.val（），
};
$.ajax（{
键入：“POST”，
url:“include/email verwerk.php”，
data:formData，//从第三个表单发送信息
数据类型：“html”，
编码：对，
成功：函数（）{
$（“form”）.hide（）；
$（“.verzenden”）.hide（）；
$（“.form>.container”）.hide（）.html（Bedankt，
我的贝里赫特是成功的，而我们最好的选择是在安特伍登的两个房间里。
请看贝雷肯的作品+3164596202.slidetogle（）；
},
错误：函数（）{
$（“form”）.hide（）；
警惕（“fout”）；
}
});
event.preventDefault（）；
});
});

因此，当点击$（'.verzenden'）时，它将只向php页面提交第三个表单。有没有办法将第一个表单和第二个表单中的数据包括在内，以便php页面在收到数据时只发送一封完整的电子邮件

试着这样做，只有一个表单和三个div会一个接一个地显示和隐藏

最后按钮通过ajax发送所有字段值

$（“#part1 btn”）。单击（函数（）{
$（“第二部分”）.show（）；
$（“第1部分”）.hide（）；
});
$（“#第2部分btn”）。单击（函数（）{
$（“#第2部分”）.hide（）；
$（“第三部分”）.show（）；
});
$（“#第3部分btn”）。单击（函数（）{
var part1=$（'#part1 txt'）.val（）；
var part2=$（'#part2 txt'）.val（）；
var part3=$（'#part3 txt'）.val（）；
var all=“part1值：”+part1+”
part2值：“+part2+”
part2值：“+part3；
$（“#allval”）.html（全部）；
});

第一部分
第二部分
第三部分
您可以使用单个表单，而不是三个表单。将表单元素分成三部分第一个按钮单击第一部分隐藏第二个按钮单击第二个隐藏最后一个按钮表单提交。由于某些原因，这只能获取第一个表单的值