Question

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}$/;  
    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

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..