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

How to send different forms and let php read it as one form with $.ajax

本文关键字:表单 一个 ajax 何发送 并让 使用 php      更新时间:2023-09-26

所以我有一个电子邮件功能,我想用 $.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();
    });
});
因此,当

单击$('.verzenden')时,它只会将第三种形式提交给PHP页面,有没有办法包含来自第一种和第二种形式的数据,以便当PHP页面收到它的数据时,它只会发送一封完整的电子邮件?

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

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

$("#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>