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中删除表单数据。

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

你只需隐藏步骤：

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

    });
});

使用JQuery将表单数据传递给多个函数

1 个答案: