Question

I have a registration form which validates the users email with JS and PHP and then checks the DB to see if the email exists. Everything happens on a single page with JSON.

I need the successful outcome to RETURN TRUE and take me to the next page in the registration sequence. I tried window.location under case: success and it takes me to the correct page however it doesn’t carry over the hidden fields in my form.

Can someone give me an idea on how this should be executed?

$(document).ready(function(){
$('#newsletter-signup').submit(function(){

    //check the form is not currently submitting
    if($(this).data('formstatus') !== 'submitting'){

        //setup variables
        var form = $(this),
            formData = form.serialize(),
            formUrl = form.attr('action'),
            formMethod = form.attr('method'), 
            responseMsg = $('#signup-response');

        //add status data to form
        form.data('formstatus','submitting');

        //show response message - waiting
        responseMsg.hide()
                   .addClass('response-waiting')
                   .text('Please Wait...')
                   .fadeIn(200);

        //send data to server for validation
        $.ajax({
            url: formUrl,
            type: formMethod,
            data: formData,
            success:function(data){

                //setup variables
                var responseData = jQuery.parseJSON(data), 
                    klass = '';

                //response conditional
                switch(responseData.status){
                    case 'error':
                        klass = 'response-error';
                    break;
                    case 'success':
                        klass = 'response-success';
                        //return true; I tried this but it fails.
                    break;  
                }

                //show reponse message
                responseMsg.fadeOut(200,function(){
                    $(this).removeClass('response-waiting')
                           .addClass(klass)
                           .text(responseData.message)
                           .fadeIn(200,function(){
                               //set timeout to hide response message
                               setTimeout(function(){
                                   responseMsg.fadeOut(200,function(){
                                       $(this).removeClass(klass);
                                       form.data('formstatus','idle');
                                   });
                               },3000)
                            });
                });
            }
        });
    }

    //prevent form from submitting
    return false;
});
});

Answer 1

Can you not just remove the submit handler on success and let the form submit for “real”?

Replace

//return true; I tried this but it fails.

With

$('#newsletter-signup').unbind('submit').submit();

Sidenote: returning whatever from a success callback does not make the form “do” anything else. The return false; statement have already been executed when the ajax function is complete. You need to resubmit the form again, this time without ajax.