Envío del formulario AJAX dentro de la ventana modal

Question

Estoy usando Fancybox para emitir ventanas modales para varias envíos de formulario en mi sitio. Cuando un usuario hace clic en el botón Registro, aparece un modal con el formulario de registro. Al hacer clic en Enviar, se supone que la información irá a la base de datos a través de una llamada JQuery Ajax. Sin embargo, cuando se hace clic en enviar, la página se actualiza, con los datos enviados enviados de regreso a la página principal en la URL como Get. No tengo idea de por qué está sucediendo esto.

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

Intente vincular su envío de formulario de esta manera:

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

    //ajax post here

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