Ajax data form serialize prevent double submit

Question

I'm struggeling making my form to preven double submision if i press rly fast the button that triggers the click call. I tried to disable the button after succes but it still send it twice. Here is my code:

<script>
$(document).ready(function () {

    $("button#rezerva").click(function () {
        var chkArray = [];
        $(".table:checked").each(function () {
            chkArray.push($(this).attr("id"));
        });
        var selected;
        selected = chkArray.join(",");
        $.ajax({
            type: "POST",
            url: "http://rezerv.city/engine/app/add_rezervare.php?mese=" + selected,
            data: $("form#formular_rezervare").serialize(),
            success: function (data) {
                switch (data) {
                    case "nume_error":
                        $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow");
                        break;
                    case "tel_error":
                        $(".msg").html("<p>Vă rugăm completați telefonul</p>").fadeIn("slow");
                        break;
                    case "email_error":
                        $(".msg").html("<p>Vă rugăm completați un email valid</p>").fadeIn("slow");
                        break;
                    case "tel_numar":
                        $(".msg").html("<p>Numarul de telefon trebuie sa contina 10 cifre</p>").fadeIn("slow");
                        break;
                    case "adaugat":
                        $('#rezerva").attr('disabled', 'disabled')
                        var ora = document.getElementById("timepicker1").value;
                        var zi_aleasa = document.getElementById("zi").value;
                        var tip = document.getElementById("tipp").value;
                        var id_local = document.getElementById("id_local").value;
                        $("#filtru_zi").load("http://rezerv.city/select_tip_rezervare.php?zi=" + zi_aleasa + "&tip=" + tip + "&id=" + id_local);
                        $(".succes").html("<p class=\'text-center\'>Ati rezervat masa <b>" + selected + "</b> in data de <b>" + zi_aleasa + "</b> la ora <b>" + ora + "</b></p><p class=\'text-center\'><button class=\'btn btn-default\' type=\'button\' id=\'inchide\'>Închide</button></p>").fadeIn("slow");
                        break;
                    default:
                        alert("A aparut o eroare. Va rugam incercati mai tarziu.");
                }
            },
        });
    });
});
</script>

Answer 1

I would suggest changing the handler from an onclick to onsubmit and using e.preventDefault.

$("#formid").on('submit', function(e){
    e.preventDefault();
    //the rest of your code
});

Answer 2

I would bind the event listener to the form's submit event rather than the button's click. I know you didn't ask at it in your question, but binding to the form's submit event will give a much better user experience since your user's will still be able to press enter in the form to submit it.

Now, as to your issue, it looks like the problem is with your use of Ajax. The form still submits even though your ajax request hasn't return yet. What you need to do is:

$(function () {
    $('#myform').submit(function (e) {
          e.preventDefault();

          // continue on with your business logic
    });
});

Of course the click event works the same way, so if you need to bind to the submit button's click event you can do the following as well:

$(function () {
    $("button#rezerva").click(function (e) {
        e.preventDefault();

        // continue on with business logic
    });
});

Answer 3

you must disable immediatly when clicked on subbmit not in the succes

selected = chkArray.join(",");
 $('#rezerva"]').attr('disabled','disabled')//ADD THIS
 $.ajax({
            type: "POST",
            url: "http://rezerv.city/engine/app/add_rezervare.php?mese="+selected,
            data: $("form#formular_rezervare").serialize(),
            success: function(data){ 
            switch(data) {
                    case "nume_error":
                         $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow");
 $('#rezerva"]').attr('enable','enable')//ADD THIS
                        break;