Form being sent twice in a row

Question

I have this code in my JS:

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

And in my FORM 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 in Google’s Inspect Element in the tab XHR and shows me two requests for the registration 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);
        }
    });

Answer 1

Put in your form onsubmit="return suaFuncao()" and on your button Submit 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 */
}

Answer 2

Diego, you are probably forgetting to prevent the pattern (event.preventDefault()).

Problem

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

Solution

For ease, rather than use $('#form-sign-in').bind('submit', function(e) in scope, could do:

1. Change the type of button type="submit" for button.
2. Insert an ID on this button, example: <button id="btEnviar">Enviar</button>

3. Call the 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);
           }
       });
   
   });