Presentazione del modulo Ajax nella finestra modale

Question

Sto usando FancyBox per visualizzare le finestre modali per le varie presentazioni di moduli sul mio sito. Quando un utente fa clic sul pulsante di registro, viene visualizzato un modale con il modulo di registrazione. Dopo aver fatto clic su Invia, le informazioni dovrebbero andare al database tramite una chiamata JQuery Ajax. Tuttavia, quando si fa clic su Invia, la pagina si aggiorna, con i dati inviati inviati alla pagina principale nell'URL come GET. Non ho idea del perché questo stia accadendo.

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

Prova a vincolare la presentazione del modulo in questo modo:

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

    //ajax post here

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