使用JQuery將表單數據傳遞給多個函數

Question

我有一個表單，它有多個步驟並在每個步驟中收集表單數據。當我通過ajax請求提交表單時，只發送來自最後一頁的數據。我應該將表單數據傳遞給每個功能還是解決此問題的最佳方法是什麼？

<script type="text/javascript"> 
$(document).ready(function() { 

    var email = $('input[name=email]'); 
    var phone = $('input[name=phone]'); 
    var comments = $('textarea[name=comments]'); 

    // Sumbit first slide 
    $('.slide-btn-sm1').click(function(e){ 
     $('.step1').fadeOut('slow', function(){ 
     $('.step1').empty(); 
     $(".step2").show().fadeIn(300); 

     }); 
    }); 

    // Sumbit second slide 
    $('.slide-btn-sm2').click(function(e){  
     $('.step2').fadeOut('slow', function(){ 
     $('.step2').empty(); 
     $(".step3").show().fadeIn(300); 
     }); 
    }); 

    //Submit the form 
    $('.send').click(function() { 
    var formData = $('#formcontents').serialize(); 

     $.ajax({ 
     url : "http://website.com/test.php",type: "POST",data : formData, 
     success: function(data, textStatus, jqXHR) 
     { 
      $('.step3').fadeOut('slow', function(){ 
      $('.step3').empty(); 
      $(".step4").show().fadeIn(300); 
      }); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 
       alert ("error"); 
     } 
     }); 
      return false; 
    }); 


}); 
</script> 

Answer 1

當您使用空（）你從DOM刪除表格數據。

https://api.jquery.com/empty/

你只需要隱藏步驟：

$('.slide-btn-sm1').click(function(e){ 
    $('.step1').fadeOut('slow', function(){ 
    //$('.step1').empty(); //remove this line 
    $(".step2").show().fadeIn(300); 

    }); 
});