CODEWITHSUNDEEP
javascriptjqueryajaxforms
Shub
Shub

Reputation: 2704

jquery AJAX form is submitted twice while regestration

I have a login form which acts for both login/regestration using jquery and works perfectly while login but submits form twice in case of regestration. The code I am using is.

$(document).on('click', '#button', function() {

    $("#loginform").submit(function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                if (data === 'success') {
                    if ($("#type").val() != "reset") {
                        $('#subheading').html($("#button").html() + ' was Successfull');
                    } else {
                        $('#subheading').html(' Email Sent Please Check your inbox...');
                    }
                    $('#subheading').css('color', "rgb(28, 184, 65)");
                    $("#loginform").fadeOut('slow');

                           //To Load page again
                           $.get('index.php').done(function(data){
                               document.write(data);
                               document.close();
                           }).fail(function(){
                               window.location.href = "index.php";
                           });

                } else if (data === '1') {
                    $('#subheading').html('Invalid Username');
                    $('#subheading').css('color', "rgb(202, 60, 60)");
                } else if (data === '2') {
                    $('#subheading').html('Invalid Password');
                    $('#subheading').css('color', "rgb(202, 60, 60)");
                } else {
                    $('#subheading').html(data);
                    $('#subheading').css('color', "rgb(202, 60, 60)");
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails 
                $('#subheading').html('Unable to Contact with Server Please Make You have a working internet connection or try again later');
                $('#subheading').css('color', "rgb(202, 60, 60)");
            }
        });
        e.preventDefault(); //STOP default action
        e.unbind(); //unbind. to stop multiple form submit.

    });
    $("#loginform").submit(); //Submit  the FORM
});

The server replies success on successful login/signup on AJAX Call.

While registration at first server returns success and set session and on next returns already logged in message

My Login form is Live here.

By removing $("#loginform").submit();(2nd last line) the signup works and the form is submitted only once but the login for isnt submitted even once.

one solution I can do is to add an if($("#type").val() != "regestration") before $("#loginform").submit(); but It wont be a good solution.

PS:There are several similar question and I had already spent an hour searching them but none helped.

You can use username and password as "test" for testing.

Upvotes: 1

Views: 485

Answers (1)

justanother
justanother

Reputation: 46

My guess is that you are you registering the submit handler twice considering you are adding it on the document click handler. I suggest moving submit handler for the form outside the click handler, that way it will run only once.

In other words:

$(document).on('click', '#button', function() {
    $("#loginform").submit(); //Submit  the FORM
});

$("#loginform").submit(function(e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data, textStatus, jqXHR) {
            if (data === 'success') {
                if ($("#type").val() != "reset") {
                    $('#subheading').html($("#button").html() + ' was Successfull');
                } else {
                    $('#subheading').html(' Email Sent Please Check your inbox...');
                }
                $('#subheading').css('color', "rgb(28, 184, 65)");
                $("#loginform").fadeOut('slow');

                       //To Load page again
                       $.get('index.php').done(function(data){
                           document.write(data);
                           document.close();
                       }).fail(function(){
                           window.location.href = "index.php";
                       });

            } else if (data === '1') {
                $('#subheading').html('Invalid Username');
                $('#subheading').css('color', "rgb(202, 60, 60)");
            } else if (data === '2') {
                $('#subheading').html('Invalid Password');
                $('#subheading').css('color', "rgb(202, 60, 60)");
            } else {
                $('#subheading').html(data);
                $('#subheading').css('color', "rgb(202, 60, 60)");
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            //if fails 
            $('#subheading').html('Unable to Contact with Server Please Make You have a working internet connection or try again later');
            $('#subheading').css('color', "rgb(202, 60, 60)");
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.

});

Upvotes: 3

Related Questions