CODEWITHSUNDEEP
jqueryforms
Lemon Drop
Lemon Drop

Reputation: 2133

Double jQuery form trigger

I was having a problem earlier where jquery was having its submit() handler triggered twice. I made a test file with just a basic submit event handler and it worked fine yet the following code does not work:

$(document).ready(function(){
    $('#regForm').submit(function(e){
        e.preventDefault();
        $('#regForm').fadeTo('slow', 0, function(){
            $('#regForm').css('display', 'none');
            $('#mainbox').animate({height: 90}, 100);
            $('#one, #two, #three #four').fadeTo('slow', 0, function(){
                $('#one').html('Processing...').fadeTo(300, 1, function(){
                    $.post("/data/handles/account/register.php", {user: $('#user').val(), pass: $('#pass').val(), passc: $('#passc').val(), email: $('#email').val()}, function(data){
                        if (data.error == 8) {
                            alert('Yes');
                            /*
                            $('#one').html('Processing...' + data.content);
                            $('#two').html('Logging In...').fadeTo('slow', 1, function(){
                                $('#three').html('Redirecting...<a href="/account.php">[Manual]</a>').fadeTo('slow', 1, function(){
                                    setTimeout(redirect, 1000);
                                });
                            });
                            */
                        } else {
                            alert('No');
                            /*
                            $('#one').html(data.content);
                            $('#two').html('<a href="#" reset>Retry</a>').fadeTo('slow', 1);
                            */
                        }
                    }, "json");
                });
            });
        });
    });
});

When I test this code it alerts "yes" twice if I enter everything correctly and makes 2 mysql entries in the database from the php file. I looked up other questions relating to this problem but none have fixed this so I was wondering if I was doing anything wrong here, or if theres some way to fix it. Thanks for the help.

Upvotes: 0

Views: 88

Answers (1)

Scoup
Scoup

Reputation: 1323

The problem is in this line:

$('#one, #two, #three #four').fadeTo('slow', 0, function(){

You attached fateTo to 3 elements, 4 if you put another "," after #three. So, after each fadeTo jQuery will call the callback function() that where is your post submit. You can create a count to wait for all fadeTo finish or change your logic to submit only in the "one" callback.

Here a sample:

var count = 0; // count of elements that already finished the fadeTo
var limit = 2; // number of elements that have to wait the fadeTo
$('#regForm').submit(function (e) {
    e.preventDefault();
    $('#regForm').fadeTo('slow', 0, function () {
        $('#regForm').css('display', 'none');
        $('#mainbox').animate({
            height: 90
        }, 100);
        count = 0;
        $('#one, #two, #three #four').fadeTo('slow', 0, function () {
            fadeToSubmit();

        });
    });
});

function fadeToSubmit(){
    count++;
    if(count == limit){
            $('#one').html('Processing...').fadeTo(300, 1, function () {
                $.post("/data/handles/account/register.php", {
                    user: $('#user').val(),
                    pass: $('#pass').val(),
                    passc: $('#passc').val(),
                    email: $('#email').val()
                }, function (data) {
                    if (data.error == 8) {
                        alert('Yes');

                    } else {
                        alert('No');

                    }
                }, "json");
            });
    }
}

Upvotes: 1

Related Questions