Soumission de formulaire AJAX dans la fenêtre modale

Question

J'utilise fancybox pour afficher des fenêtres modales pour diverses soumissions de formulaires sur mon site.lorsqu'un utilisateur clique sur le bouton d'inscription, un modal apparaît avec le formulaire d'inscription.en cliquant sur Soumettre, les informations sont censées aller à la base de données via un appel jquery ajax.cependant, lorsque l'utilisateur clique sur Soumettre, la page s'actualise et les données soumises sont renvoyées à la page principale de l'URL en tant que GET.Je ne sais pas pourquoi cela se produit.

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

Essayez de lier votre soumission de formulaire de cette façon:

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

    //ajax post here

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