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

empty（）を使用すると、DOMからフォームデータが削除されます。本当にありがとうございました...メールで送信

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

    }); 
});