开发者

form.submit with JQuery

开发者 https://www.devze.com 2023-03-19 05:32 出处:网络
I have the code below to advance through a multi-part form for signup. Need it to not submit until we reach the end, and am having issues with the form not submitting.

I have the code below to advance through a multi-part form for signup. Need it to not submit until we reach the end, and am having issues with the form not submitting.

Any help would be appreciated?

Regards,

My code is;

    $(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}$/; 开发者_如何学C 
    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(); 

});


})


Change

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

You need that because at the beginning you have $('form').submit(function(){ return false; }); which will make all attempts to submit to fail..


Your code should be like this.

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

精彩评论

暂无评论...
验证码 换一张
取 消