2

Eu tenho esse código no meu JS:

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

E no meu FORM tem um Input Type Submit. Quando clico nele para fazer um simples cadastro, está mandando duas solicitações.

Estou utilizando ajax.

Eu vejo no Inspect Element do Google na aba XHR e me mostra duas requisições para a página de cadastro.

     $.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);
        }
    });
3
  • Troca o tipo do seu botão pra button.
    – Marconi
    30/06/2015 às 18:10
  • @Marconi, não era isso apenas. Mas ajudou. 30/06/2015 às 18:23
  • Que bom ter te ajudado @DiegoSouza.
    – Marconi
    30/06/2015 às 18:24

2 Respostas 2

4

Diego, provavelmente você está esquecendo de prevenir o padrão (event.preventDefault()).

Problema

O botão está enviando (por ser do tipo submit) e o bind está interceptando, duplicando a requisição. É importante que o botão não seja do tipo submit, senão ele envia o formulário de verdade e seu ajax também (já que o form está com o bind).

Solução

Para facilitar, ao invés de usar $('#form-sign-in').bind('submit', function(e) no escopo, poderia fazer:

  1. Troque o tipo de botão de type="submit" para button.
  2. Insira um ID neste botão, exemplo: <button id="btEnviar">Enviar</button>
  3. Chame o JQuery para enviar o form usando este botão:

    $('#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);
            }
        });
    
    });
    
4
  • 1
    Outra coisa poderia ser a troca do tipo do botão pra button.
    – Marconi
    30/06/2015 às 18:11
  • 1
    Sim, com certeza. O botão está enviando o e bind está interceptando, duplicando a requisição. 30/06/2015 às 18:14
  • Felipe, realmente era isso que estava ocorrendo. Mas além disso também, em uma das páginas estava com um JS duplicado (devido estar trabalhando com blades template), no qual continha esse script. O que o fazia chamar duas vezes a mesma função. 30/06/2015 às 18:23
  • Nossa, hehe, realmente. Que bom que deu certo 30/06/2015 às 18:24
3

Coloca no seu form onsubmit="return suaFuncao()" e no seu botão submit onclick=return suaFuncao().

E no seu 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 */
}
4
  • Outra coisa poderia ser a troca do tipo do botão para 'button' em vez do return false.
    – Marconi
    30/06/2015 às 18:25
  • @Marconi não resolve totalmente, pois se o usuário der um enter dentro do input ele faz um submit no form :) 30/06/2015 às 18:26
  • Hum não sabia. De qualquer jeito outra boa resposta aqui.
    – Marconi
    30/06/2015 às 18:26
  • Exato, apenas o button não resolve o problema. É uma boa resposta, mas é que eu não trabalho assim, com funções, visto que uso mais o jQuery para chamar ações pelo elemento. 30/06/2015 às 18:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .