Call javascript onsubmit does not "hold" the Submit until it gives confirmation of shunning

Question

I find the following mistake:

<form action="" method="post" onsubmit="sweetalert(1)">
            Dados aqui !!!

            <input type="button" id="selectall-game-button" label="check all" value="Selecionar tudo">
            <input type="submit" id="delete-game-button" value="Eliminar" style="display:none;"/>

JS

function sweetalert(x) {
    switch (x) {
        case 1:
            swal({
                title: "Aviso!",
                text: "Tens a certeza que queres apagar este/s ficheiro/s?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Sim, eliminar!",
                cancelButtonText: "Não, cancelar!",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function(isConfirm) {
                if (isConfirm) {
                    swal("Eliminado!", "O/s ficheiro/s foi/foram eliminado/s!", "success");
                } else {
                    swal("Cancelado", "A operação foi cancelada, os ficheiros foram salvos!", "error");
                }
            });
            break;
    }
}

I have tested only with Alert and confirm on onsubmit and everything went well. But when putting this script on onsubmit it does not "hold" the function, immediately deletes the data before confirming whether or not to delete the file.

Answer 1

You can’t use it onsubmit="sweetalert(1)". The only way to expect a boolean return on onsubmit is using the confirm native (ugly and confused), which is synchronous (meaning that it "traps" the flow of code, as you said).

You need to place an intermediate function call there, cancel Ubmit, and wait for the interaction to manually submit, if applicable. Something like that:

<form id="meuForm" action="" method="post" onsubmit="sweetalert(1); return false;">

And there in his function(isConfirm){ you take the form and submit if you pass your verification:

document.getElementById('meuForm').submit();

_{Note: that switch in its function is totally unnecessary, can eliminate.}

Answer 2

Basic example.

HTML:

 <a href="delete.php?id=45454"  onClick="return confirm_delete('John');">
 <img src="../../../images/icones/effacer.png" border="0" alt="Deletar">
 </a>

JAVASCRIPT:

 function confirm_delete(msg)
 {
     var msg_total;
     if (msg == '')
     {
        msg_total = msg_glb_delete_start + "\n" + msg_glb_delete_end;
     }
     else
     {
        msg_total = msg_glb_delete_start + "\n( " + msg + " )\n"+ msg_glb_delete_end;
     }

     ret = confirm(msg_total);
     return ret;

 }

 msg_glb_delete_start = "Tem certeza que deseja apagar este registro?";
 msg_glb_delete_end = "Esta operação é definitiva. Clique em OK para continuar.";

Otherwise, if you want to use sweetalert obligatorily, you lack things in your code: you have:

 <form action="" method="post" onsubmit="sweetalert(1)">

when the code must be:

  <form action="" method="post" onsubmit="sweetalert(); return false;">

Missing ; and missing "Return false". Probably this is the problem.