AJAX form submission within modal window

Question

I'm using fancybox to pop up modal windows for various form submissions on my site. when a user clicks the register button, a modal pops up with the registration form. upon clicking submit, the info is supposed to go to the database via a jquery ajax call. however, when submit is clicked, the page refreshes, with the submitted data sent back to the main page in the URL as GET. I have no idea why this is happening.

function openModal(name, width, height){
        $.fancybox(
            {
                'content'               : document.getElementById(name).innerHTML,
                'autoDimensions'        : false,
                'width'                 : width,
                'height'                : height,
                'transitionIn'          : 'fade',
                'transitionOut'     : 'fade',
                'overlayColor'          : '#000'
            }
        );
    }

$('.registerBtn').click(function(e) {
        e.preventDefault();
        openModal('register', 450, 'auto');
    });

    $("#register_submit").click(function(e){
        //prevent the form from actually being submitted
        e.preventDefault();

        var error = Array();

        // grab the user's info from the registration form
        var username = $('input[name=register_name]');
        var pass = $('input[name=register_pass]');
        var confirm_pass = $('input[name=register_confirm_pass]');
        var email = $('input[name=register_email]');
        var confirm_email = $('input[name=register_confirm_email]');

        // run some validation checks and add any errors to the array
        if(username == '' || username.length < 2)
        {
            error.push('Your username is too short. Minimum of 2 characters, please.');
        }
        if(pass == '' || pass.length < 2)
        {
            error.push('Your password is too short. Minimum of 2 characters, please.');
        }
        if(pass != confirm_pass)
        {
            error.push('The passwords you entered did not match.');
        }
        if(email == '')
        {
            error.push('You must enter an email address.');
        }
        else
        {
            var validEmail = checkemail(email);
            if(validEmail == false)
            {
                error.push('The email address you entered is not valid.');
            }
            else
            {
                if(email != confirm_email)
                {
                    error.push('The email addresses you entered did not match.');
                }
            }
        }
        // if there were no errors, pass the user info to the processing script for further validation
        if(error.length < 1)
        {
            var data = 'username=' + username.val() + '&password=' + pass.val() + '&email=' + encodeURIComponent(email.val());
            $.ajax({
                url: "data.php",
                type: "POST",
                data: data,
                cache: false,
                success: function(data) {
                    // the ajax request succeeded, and the user's info was validated and added to the database
                    if(data.response == 'good')
                    {
                        $("#register_error").fadeTo(200,0.1,function()
                        {
                            $(this).html('Registering your information...').fadeTo(900,1,function(){
                                $('#userInfo').html('<a href="index.php?mode=viewMember&u=' + data.uid + '">' + data.username + '</a>');
                                $(this).html('You have successfully registered and logged in!<br /><a href="javascript:;" onclick="$.fancybox.close();">Close</a>');
                            });
                        });
                    }
                    // ajax succeeded, but the username was in use
                    if(data.response == 'usernameBad')
                    {
                        $("#register_error").fadeTo(200,0.1,function() {
                            $(this).html('The username is already in use!').fadeTo(900,1,function(){
                                $(this).html('Let\'s try this again...');
                                setTimeout($.fancybox.close(), 3000);
                                openModal('register', 450, 'auto');
                            });
                        });
                    }
                    // ajax succeeded but the email was in use
                    if(data.response == 'emailBad')
                    {
                        $("#register_error").fadeTo(200,0.1,function() {
                            $(this).html('The email address is already in use!').fadeTo(900,1,function(){
                                $(this).html('Let\'s try this again...');
                                setTimeout($.fancybox.close(), 3000);
                                openModal('register', 450, 'auto');
                            });
                        });
                    }
                }
            });
        }
        else // errors in validating in first pass
        {
            // iterate through the errors and fade them into the error container in the modal window
            for(var i = 0;i < error.length;i++)
            {
                $("#login_error").fadeTo(400,0.1,function(){
                    $(this).html(error[i]);
                });
            }
        }
    });

Answer 1

Try binding your form submission this way:

$('#MyFormId').bind('submit', function () {

    //ajax post here

    return false;   //Ensures the form never actually "posts" and just stays on this page
});