Having to Press 2 times submit button to actually submit - AJAX

Question

As the title said...

Some of my code: there is more inputs but i'll put this one just to simplify.

 <form name="frmCadastroPlano" id="frmCadastroPlano" class="form-horizontal"  >

 <input class="input-xlarge" id="inputNome" name="inputNome" type="text" value="" style="height: 26;">

 <button type="submit" class="btn btn-primary" id="enviar">Cadastrar</button>

 <button class="btn" name="clear" id="clear">Cancelar</button>



<div id="resposta"></div>

    </form>

Ajax code :

$("#frmCadastroPlano").submit( function(e) {
e.preventDefault();
dataString = $("#frmCadastroPlano").serialize();

$.ajax({
    type: "POST",
    url: "cadastroPlano.php",
    data : dataString,
    dataType: "html",

    success: function(retorno) {
        $("#resposta").html(retorno);
        resetForm('frmCadastroPlano');
    }

});
return false;
});

When i press the button first time all inputs serializes in the url, like GET Method... Example url.php?inputNome=asdas&inputDuracao=asdasda&inputPreco=asdas... The form is then reseted and i have to type the data again so i can finally then submit... i've seen another answer to this similar question but no luck :/ Sry English.

OutPut with alert(dataString) inputNome=asda&inputDuracao=dsadas&inputPreco=dasdas

Edit your question to add the output of `console.log(dataString)` or alert(dataString), right before $.ajax. — Asenar, Nov 05 '13 at 17:29
Done, inputNome=asda&inputDuracao=dsadas&inputPreco=dasdas is what came out... And this only appears in the second time — Sylar, Nov 05 '13 at 17:33
I think there is no problem in your code. Maybe the return value in success makes you believe it's wrong. TRy add `alert(retorno);` right after `succcess(retorno){` — Asenar, Nov 05 '13 at 17:37
@Asenar Added, Now works in the first time, but... i did nothing... just placed the alert code like you said. Maybe it's the browser or something like that? — Sylar, Nov 05 '13 at 17:43

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

When do you run this ajax code? This looks like you're not running this in the document.ready function. Try this

$(document).ready(function() { 
    $("#frmCadastroPlano").submit( function(e) {
        e.preventDefault();
        dataString = $("#frmCadastroPlano").serialize();

        $.ajax({
            type: "POST",
            url: "cadastroPlano.php",
            data : dataString,
            dataType: "html",

            success: function(retorno) {
                $("#resposta").html(retorno);
                resetForm('frmCadastroPlano');
            }

        });
        return false;
    })
});

On a side note: Use a the developer console in your browser (Control+Shift+I in Chrome for example) to see whats happening on the network (eg. GET or POST / which data / ...). This might help you to get down to the root cause of such an issue.

You might as well have look at this stackoverflow question, as it looks like it is similar to your question in this case.

edited May 23 '17 at 10:32

Community

1
1

answered Nov 05 '13 at 17:48

Keeper

920
1
10
16

this screwed up again haha, i press one time, serializes in url, fill up info again, press submit then works fine... sometimes happens sometimes doesn't, thats why i think maybe the browser or so... – Sylar Nov 05 '13 at 18:03
Mhm, sounds strange. Are you sure there is no other problem involved (server side for example?)? Can you reproduce this issue in a stripped down version (only the code you provided here, without any other scripts)? And of course you should then test another browser. By the way, which one are you using? – Keeper Nov 05 '13 at 18:07
Pale Moon, a improved version of Firefox, but the problem still persists in Chrome, gonna test on Opera and Fire. But yes, can be server side too (i use some free hosting due this is only a project of a future system) – Sylar Nov 05 '13 at 18:20
If you test with chrome, does the request work correctly (developer console -> network tab)? what is the result code? – Keeper Nov 05 '13 at 18:37
Sorry for the delayed Answer, Status OK, Seems server side problem as sometimes happens and sometimes doesn't – Sylar Nov 05 '13 at 19:09

score 0 · Answer 2 · answered Nov 05 '13 at 18:48

Try using HTML5 Form object -

$("#frmCadastroPlano").submit( function(e) {
    e.preventDefault();
    dataString = new FormData($("#frmCadastroPlano")[0]);

$.ajax({
    type: "POST",
    url: "cadastroPlano.php",
    data : dataString,
    dataType: "html",
    processData: false,
    timeout: 40000,
    success: function(retorno) {
        $("#resposta").html(retorno);
        resetForm('frmCadastroPlano');
    }
});
return false;
});

score 0 · Answer 3 · answered Nov 05 '13 at 19:00

0

Do you have another script running at the time? May be a chrome or firefox extension?

answered Nov 05 '13 at 19:00

Leonardo

736
4
11

i have another ajax file, both globals, at first i thought that was some kind of conflict... but i ran some tests and the same thing happened. As for extensions i have none. – Sylar Nov 05 '13 at 19:11
try commenting this line(delete cache) and try again: // e.preventDefault(); – Leonardo Nov 06 '13 at 13:05
Which jquery version are you using? – Leonardo Nov 06 '13 at 13:22

Having to Press 2 times submit button to actually submit - AJAX

3 Answers3