Form being sent twice in a row

Question

Form being sent twice in a row

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I have this code in my JS:

$('#form-sign-in').bind('submit', function(e)

And in my FORM it has a Input Type Submit . When I click on it to make a simple registration, it is sending two requests.

I'm using ajax .

I see the Google Inspect Element on the XHR tab and it shows me two requests for the signup page.

     $.ajax({
        type: "POST",
        url: baseURL + '/form-cadastro',
        data: $(this).serialize(),
        beforeSend: function(){
            $("#confirmar-cadastro").val('Aguarde...').prop('disabled');
        },
        success: function(result){
            $('input, label').hide();
            $('.message').html(result).addClass('message');

            setTimeout(function(){
                $('.message').html('').addClass('message');
                $('input, label').show();
                $("#confirmar-cadastro").val('Confirmar').removeProp('disabled');
            }, 4000);
        }
    });

javascript jquery ajax

asked by anonymous 30.06.2015 / 20:01

2 answers

3

Place in your form onsubmit="return suaFuncao()" and your submit button onclick=return suaFuncao() .

And in your js:

function suaFuncao() {
    $.ajax({
            type: "POST",
            url: baseURL + '/form-cadastro',
            data: $(this).serialize(),
            beforeSend: function(){
                $("#confirmar-cadastro").val('Aguarde...').prop('disabled');
            },
            success: function(result){
                $('input, label').hide();
                $('.message').html(result).addClass('message');

                setTimeout(function(){
                    $('.message').html('').addClass('message');
                    $('input, label').show();
                    $("#confirmar-cadastro").val('Confirmar').removeProp('disabled');
                }, 4000);
            }
        });
    return false; /* <-- IMPORTANTE ISSO AQUI pra quebrar o submit */
}

30.06.2015 / 20:07

How to create a REST service with PHP and MySQL and .htaccess How to make a String presentable in this format yyyy-mm-dd HH: mm: ss.fff

score 2 · Accepted Answer

Diego , you're probably forgetting to prevent the default ( event.preventDefault() ) .

Problem

The button is sending (being of type submit ) and bind is intercepting, duplicating the request. It is important that the button is not of type submit , otherwise it sends the form of truth and its ajax also (since form is with bind ).

Solution

To facilitate, instead of using $('#form-sign-in').bind('submit', function(e) in scope, you could do:

Change the button type from type="submit" to button .

Enter an ID on this button, example: <button id="btEnviar">Enviar</button>

Call JQuery to send the form using this button:

$('#btEnviar').on('click', function()
{

   $.ajax({
        type: "POST",
        url: baseURL + '/form-cadastro',
        data: $(this).serialize(),
        beforeSend: function(){
            $("#confirmar-cadastro").val('Aguarde...').prop('disabled');
        },
        success: function(result){
            $('input, label').hide();
            $('.message').html(result).addClass('message');

            setTimeout(function(){
                $('.message').html('').addClass('message');
                $('input, label').show();
                $("#confirmar-cadastro").val('Confirmar').removeProp('disabled');
            }, 4000);
        }
    });

});