Submit being called twice

Question

I have a form where I need to intercept the event submit, cancel it and via Ajax, perform the required request. However, even using the preventDefault(); and return false; the submit is being executed twice.

$("#frmTeste").on('submit', function (e) {
    e.preventDefault();
    alert('teste');
    return false;
});

$("#btnTeste").on('click', function () {
    $("#frmTeste").submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste">
    <input type="text" name="teste">
    <button id="btnTeste">
        Cadastrar
    </button>
</form>

Answer 1

The e.preventDefault(); will prevent the form to do Ubmit, but who is doing Ubmit is the button, once by default behavior, and again because of the eventListener you put in it.

You can treat this in the following ways:

1. put a e.preventDefault(); in the eventListener of the button also.

2. declare the button as <button type="button"> for him not to do submit as standard behavior.

3. create no eventListener for the button, it already makes Submit as default

$("#frmTeste").on('submit', function (e) {
    e.preventDefault();
    alert('teste');
    return false;
});

$("#btnTeste1").on('click', function (e) {
    e.preventDefault();
    $("#frmTeste").submit();
});

$("#btnTeste2").on('click', function () {
    $("#frmTeste").submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste">
    <input type="text" name="teste">
    <button id="btnTeste1">
        Cadastrar1
    </button>
    <button id="btnTeste2" type="button">
        Cadastrar2
    </button>
    <button id="btnTeste3">
        Cadastrar3
    </button>     
</form>

Answer 2

even using preventDefault(); and Return false; Submit is running twice.

Note the comments:

$("#frmTeste").on('submit', function (e) { // AO SUBMIT
    e.preventDefault(); // NÃO EXECUTAR O PADRÃO (SUBMIT) ????
    alert('teste'); 
    return false;
});

$("#btnTeste").on('click', function () { // AO CLICAR EM #btnTeste
    $("#frmTeste").submit(); // SUBMIT NO FORMULÁRIO
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste">
    <input type="text" name="teste">
    <button id="btnTeste">
        Cadastrar
    </button>
</form>

For this to work, you should put the preventDefault() on the block that captures click the button, and not on the block that submits the form:

    $("#btnTeste").on('click', function (e) {
        e.preventDefault();
        $("#frmTeste").submit();
    });

But still, this is wrong! You can just put one button with type="submit" that would equal!

Solved the error in the code, let’s go to a solution:

intercept the event Ubmit, cancel it and via Ajax, perform the request

This, perhaps, is a solution to your question:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste" action="" method="post">
    <input type="text" name="teste">
    <button id="btnTeste">
        Cadastrar
    </button>
</form>

<script type="text/javascript">
    $('#btnTeste').on('click', function(e){
        e.preventDefault(); // NÃO EXECUTA O SUBMIT, COMO ACONTECE NORMALMENTE
        e.stopPropagation(); // IMPEDE QUE SEJAM EXECUTADOS OUTROS HANDLERS
        $.ajax({
            url: $('#frmTeste').attr('action'),
            method: $('#frmTeste').attr('method'),
            data: $('#frmTeste').serialize(),
            beforeSend: function(){
                // TUDO QUE ACONTECE ANTES DE EXECUTAR A REQUISIÇÃO AJAX
            },
            success: function(){
                // TUDO QUE ACONTECE APÓS A REQUISIÇÃO (RESPOSTA DA REQUISIÇÃO)
                // SE FOR EXIBIR ALGO REFERENTE A RESPOSTA, DEVE ADICIONAR O PARÂMETRO NA function(<parametro>){ //...
            },
            error: function(){
                // TUDO QUE ACONTECE CASO OCORRA ALGUM ERRO NA REQUISIÇÃO
            }
        });
    });
</script>

I haven’t tested the code, but I usually use the jQuery 1.2. I believe that in the version that you are using should reformulate the part of ajax with the .done / .error...