Question

我有以下代码，可以通过多部分表单进行注册。在我们到达结束之前需要它不提交，并且表示没有提交表格的问题。

任何帮助都会受到赞赏吗？

此致

我的代码是;

    $(function(){
//original field values
var field_values = {
        //id        :  value
        'username'  : 'username',
        'password'  : 'password',
        'cpassword' : 'password',
        'firstname'  : 'first name',
        'lastname'  : 'last name',
        'email'  : 'email address',
        'address1' : 'address 1',
        'address2' : 'address 2',
        'city'      : 'city',
        'zip'       : 'zip',
        'refer'     : 'referrer '

};


//inputfocus
$('input#username').inputfocus({ value: field_values['username'] });
$('input#password').inputfocus({ value: field_values['password'] });
$('input#cpassword').inputfocus({ value: field_values['cpassword'] }); 
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#email').inputfocus({ value: field_values['email'] }); 
$('input#address1').inputfocus({ value: field_values['address1'] }); 
$('input#city').inputfocus({ value: field_values['city'] });
$('input#zip').inputfocus({ value: field_values['zip'] });  





//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');

//first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
    //remove classes
    $('#first_step input').removeClass('error').removeClass('valid');

    //ckeck if inputs aren't empty
    var fields = $('#first_step input[type=text], #first_step input[type=password]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });        

    if(!error) {
        if( $('#password').val() != $('#cpassword').val() ) {
                $('#first_step input[type=password]').each(function(){
                    $(this).removeClass('valid').addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                });

                return false;
        } else {   
            //update progress bar
            $('#progress_text').html('25% Complete');
            $('#progress').css('width','84px');

            //slide steps
            $('#first_step').slideUp();
            $('#second_step').slideDown();     
        }               
    } else return false;
});


$('#submit_second').click(function(){
    //remove classes
    $('#second_step input').removeClass('error').removeClass('valid');

    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
    var fields = $('#second_step input[type=text]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });

    if(!error) {
            //update progress bar
            $('#progress_text').html('50% Complete');
            $('#progress').css('width','168px');

            //slide steps
            $('#second_step').slideUp();
            $('#third_step').slideDown();     
    } else return false;

});



$('#submit_third').click(function(){

    //remove classes
    $('#third_step input').removeClass('error').removeClass('valid');

    //ckeck if inputs aren't empty
    var fields = $('#third_step input[type=text]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<1 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });        

 if(!error) {
                   //update progress bar
    $('#progress_text').html('75% Complete');
    $('#progress').css('width','252px');


    //slide steps
    $('#third_step').slideUp();
    $('#third_2_step').slideDown();     
    } else return false;

});

$('#submit_third2').click(function(){

    //update progress bar
    $('#progress_text').html('100% Complete');
    $('#progress').css('width','339px');

//prepare the fourth step
    var fields = new Array(
        $('#username').val(),
        $('#password').val(),
        $('#email').val(),
        $('#firstname').val() + ' ' + $('#lastname').val(),
        $('#address1').val() + ' ' + $('#city').val() + ' ' + $('#zip').val(),
        $('#refer').val()                  
    );
    var tr = $('#fourth_step tr');
    tr.each(function(){
        //alert( fields[$(this).index()] )
        $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
    });



    //slide steps
    $('#third_2_step').slideUp();
    $('#fourth_step').slideDown();            
});

$('#submit_fourth').click(function(){
    //send information to server
     $('form').submit(); 

});


})

Answer 1

更改

$('#submit_fourth').click(function(){
    //send information to server
    $('form').unbind('submit').submit(); 
});

你需要这样做，因为一开始你有$('form').submit(function(){ return false; });会使所有提交失败的尝试都失败。

Answer 2

您的代码应该是这样的。

$('#submit_fourth').click(function(){
    //send information to server
    alert('Data successfully sent');
document.form.submit();
});

使用JQuery的form.submit

2 个答案: