jQuery多步表单的问题

Question

我在这里构建的多步骤表单存在一些问题http://purplegriffon.net/booking/create?courseId=47（这是一个登台服务器，登录名和密码是）：

用户名：admin 密码：Kq3IWRx9OcCrw

如果您填写表格直到摘要，然后单击步骤1，然后单击步骤2，您将注意到步骤2之后的比例是错误的。完整的JS就在这个问题的最后。

如果您使用“上一个”和“下一个”导航按钮，则不会发生这种情况，因此它与第79 - 158行之间的代码有关。

$('#progressbar li').click(function(e) {
    var form = $('#booking-form');

    if(animating) return false;
    animating = true;

    var activeFieldset = $('fieldset.active');
    var targetFieldset = $('fieldset.' + $(this).data('class'));

    var activeFieldsetId = activeFieldset.data('id');
    var targetFieldsetId = targetFieldset.data('id');

    if (targetFieldsetId > activeFieldsetId) {
        if (form.valid()) {
            $('#progressbar li').eq($('fieldset').index(targetFieldset)).addClass('active');

            $('fieldset').each(function(index) {
                var id = $(this).data('id');

                if (id < targetFieldsetId) {
                    $('#progressbar li').eq($('fieldset').index($(this))).addClass('active');
                }
            });

            activeFieldset.removeClass('active');
            targetFieldset.addClass('active');

            targetFieldset.show();

            activeFieldset.animate({opacity: 0}, {
                step: function(now, mx) {
                    scale = 1 - (1 - now) * 0.2;
                    left = (now * 50)+'%';
                    opacity = 1 - now;
                    activeFieldset.css({'transform': 'scale('+scale+')'});
                    targetFieldset.css({'left': left, 'opacity': opacity});
                }, 
                duration: 800, 
                complete: function() {
                    activeFieldset.hide();
                    animating = false;
                }
            });
        } else {
            animating = false;
        }
    } else if (targetFieldsetId == activeFieldsetId) {
        animating = false;
    } else {
        $('#progressbar li').eq($('fieldset').index(targetFieldset)).addClass('active');

        $('fieldset').each(function(index) {
            var id = $(this).data('id');

            if (id > targetFieldsetId) {
                $('#progressbar li').eq($('fieldset').index($(this))).removeClass('active');
            }
        });

        activeFieldset.removeClass('active');
        targetFieldset.addClass('active');

        targetFieldset.show();

        activeFieldset.animate({opacity: 0}, {
            step: function(now, mx) {
                scale = 0.8 + (1 - now) * 0.2;
                left = ((1-now) * 50)+'%';
                opacity = 1 - now;
                activeFieldset.css({'left': left});
                targetFieldset.css({'transform': 'scale('+scale+')', 'opacity': opacity});
            }, 
            duration: 800, 
            complete: function() {
                activeFieldset.hide();
                animating = false;
            }
        });
    }
});

此外，如果您添加委托然后单击下一步，然后返回并删除委托并再次单击下一步，您将注意到它仍然记住旧的委托数据。 bookingForm变量不包含数据，但是bookingForm.serialize（）可以。

var bookingForm = $('#booking-form');

有没有人知道这些故障可能会发生什么。感谢。

完整代码：

$(document).ready(function() {
    var delegateId = 0;
    $('.add-delegate').click(function() {
        $.get('/booking/add-delegate/' + delegateId++, function(html) {
            $(html).appendTo('#delegates')
        })
    });
    $(document).on('click', '.remove-delegate', function() {
        $(this).parent().parent().remove()
    });
    $('#payment_method_id').change(function() {
        var paymentMethod = $(this).val();
        if (paymentMethod == 2) {
            $('.payment-method').append('<div class="control-group pon"><label for="purchase_order_number" class="control-label">Purchase Order No</label><div class="controls"><input id="pon" type="text" name="purchase_order_number" /></div></div>')
        } else {
            $('.pon').remove()
        }
    });
    $('#pay-now').click(function(e) {
        window.location = '/booking/pay';
    });

    // Booking Form
    var currentFieldset, nextFieldset, previousFieldset;
    var left, opacity, scale;
    var animating;

    $(document).on('click', '.summary', function(e) {
        e.preventDefault();
        var url = '/booking/summary';
        var bookingForm = $('#booking-form');

        if (bookingForm.valid()) {
            $.ajax({
                type: 'POST',
                url: url,
                data: $('#booking-form').serialize(),
                beforeSend: function() {
                    $('#loading').show();
                },
                success: function(data) {
                    $('#summary').html(data);
                },
                complete: function() {
                    $('#loading').hide();
                },
                error: function (request, status, error) {
                    // console.log(request.responseText);
                }
            });
        }
    });

    $(document).on('click', '#booking-summary', function(e) {
        var url = '/booking/summary';
        var bookingForm = $('#booking-form');

        if (bookingForm.valid()) {
            $.ajax({
                type: 'POST',
                url: url,
                data: $('#booking-form').serialize(),
                beforeSend: function() {
                    $('#loading').show();
                },
                success: function(data) {
                    $('#summary').html(data);
                },
                complete: function() {
                    $('#loading').hide();
                },
                error: function (request, status, error) {
                    // console.log(request.responseText);
                }
            });
        }
    });

    $('#progressbar li').click(function(e) {
        var form = $('#booking-form');

        if(animating) return false;
        animating = true;

        var activeFieldset = $('fieldset.active');
        var targetFieldset = $('fieldset.' + $(this).data('class'));

        var activeFieldsetId = activeFieldset.data('id');
        var targetFieldsetId = targetFieldset.data('id');

        if (targetFieldsetId > activeFieldsetId) {
            if (form.valid()) {
                $('#progressbar li').eq($('fieldset').index(targetFieldset)).addClass('active');

                $('fieldset').each(function(index) {
                    var id = $(this).data('id');

                    if (id < targetFieldsetId) {
                        $('#progressbar li').eq($('fieldset').index($(this))).addClass('active');
                    }
                });

                activeFieldset.removeClass('active');
                targetFieldset.addClass('active');

                targetFieldset.show();

                activeFieldset.animate({opacity: 0}, {
                    step: function(now, mx) {
                        scale = 1 - (1 - now) * 0.2;
                        left = (now * 50)+'%';
                        opacity = 1 - now;
                        activeFieldset.css({'transform': 'scale('+scale+')'});
                        targetFieldset.css({'left': left, 'opacity': opacity});
                    }, 
                    duration: 800, 
                    complete: function() {
                        activeFieldset.hide();
                        animating = false;
                    }
                });
            } else {
                animating = false;
            }
        } else if (targetFieldsetId == activeFieldsetId) {
            animating = false;
        } else {
            $('#progressbar li').eq($('fieldset').index(targetFieldset)).addClass('active');

            $('fieldset').each(function(index) {
                var id = $(this).data('id');

                if (id > targetFieldsetId) {
                    $('#progressbar li').eq($('fieldset').index($(this))).removeClass('active');
                }
            });

            activeFieldset.removeClass('active');
            targetFieldset.addClass('active');

            targetFieldset.show();

            activeFieldset.animate({opacity: 0}, {
                step: function(now, mx) {
                    scale = 0.8 + (1 - now) * 0.2;
                    left = ((1-now) * 50)+'%';
                    opacity = 1 - now;
                    activeFieldset.css({'left': left});
                    targetFieldset.css({'transform': 'scale('+scale+')', 'opacity': opacity});
                }, 
                duration: 800, 
                complete: function() {
                    activeFieldset.hide();
                    animating = false;
                }
            });
        }
    });

    $('.next').click(function(e) {
        e.preventDefault();

        var form = $('#booking-form');

        if(form.valid()) {
            if(animating) return false;
            animating = true;

            currentFieldset = $(this).parent().parent();
            nextFieldset = $(this).parent().parent().next();

            $('#progressbar li').eq($('fieldset').index(nextFieldset)).addClass('active');
            currentFieldset.removeClass('active');
            nextFieldset.addClass('active');

            nextFieldset.show(); 

            currentFieldset.animate({opacity: 0}, {
                step: function(now, mx) {
                    scale = 1 - (1 - now) * 0.2;
                    left = (now * 50)+'%';
                    opacity = 1 - now;
                    currentFieldset.css({'transform': 'scale('+scale+')'});
                    nextFieldset.css({'left': left, 'opacity': opacity});
                }, 
                duration: 800, 
                complete: function() {
                    currentFieldset.hide();
                    animating = false;
                }
            });
        }
    });

    $(document).on('click', '.previous', function(e){
        e.preventDefault();

        if(animating) return false;
        animating = true;

        currentFieldset = $(this).parent().parent();

        previousFieldset = $(this).parent().parent().prev();

        $('#progressbar li').eq($('fieldset').index(currentFieldset)).removeClass('active');
        currentFieldset.removeClass('active');
        previousFieldset.addClass('active');

        previousFieldset.show();

        currentFieldset.animate({opacity: 0}, {
            step: function(now, mx) {
                scale = 0.8 + (1 - now) * 0.2;
                left = ((1-now) * 50)+'%';
                opacity = 1 - now;
                currentFieldset.css({'left': left});
                previousFieldset.css({'transform': 'scale('+scale+')', 'opacity': opacity});
            }, 
            duration: 800, 
            complete: function() {
                currentFieldset.hide();
                animating = false;
            }
        });
    });

    $(document).on('click', '.complete', function(e) {
        e.preventDefault();

        var bookingForm = $('#booking-form');

        if ($('#payment_method_id').val() == 1)
        {
            var url = '/booking/store'

            $.ajax({
                type: 'POST',
                url: url,
                data: $('#booking-form').serialize(),
                beforeSend: function() {
                    $('#loading').show();
                },
                success: function(data) {
                    $('#loading').hide();
                    var address = $('#address').val();
                    var city = $('#city').val();
                    var postcode = $('#postcode').val();
                    $('.sliding-form').html(data);
                    $('#address').val(address);
                    $('#city').val(city);
                    $('#postcode').val(postcode);
                    var html = "<h1>Payment</h1><p>Please enter your payment details in the form on the right and click the '<strong>Make Payment</strong>' button.";

                    $('.info').html(html);

                    // Removed billing JS
                },
                error: function (request, status, error) {
                    // console.log(request.responseText);
                }
            });
        } else {
            bookingForm.submit();
        }
    });
});