Deshabilitar formularios con javascript al enviar para evitar el doble envío

Question

Me gustaría deshabilitar un formulario después de enviarlo para evitar envíos dobles.Creo que es un caso de uso bastante estándar, pero todos los ejemplos que puedo encontrar son defectuosos.

Todo lo que puedo encontrar se basa en deshabilitar el botón de enviar, pero esto no impide que el formulario se vuelva a enviar si el usuario presiona la tecla Intro en el formulario, lo cual es un enfoque bastante común.

Estoy pensando en modificar uno de los scripts existentes para tener en cuenta esto, pero antes de reinventar la rueda, ¿alguien conoce algún script que ya maneje esto correctamente y que pueda compartir?Estoy realmente sorprendido de que no parezca haber nada por ahí todavía.

Answer 1

Se puede crear una variable booleana (o un objeto con una variable miembro booleano) y sólo enviar el formulario cuando la variable es falsa. Algo así como:

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

Por supuesto, tendría que llamar init después de la carga de la página, en cualquier sabor que usted elija para hacer eso (window.onload = ..., window.addEventListener(...), window.attachEvent(...), etc.).

Answer 2

http://jsfiddle.net/c2N4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

Answer 3

Probé muchas soluciones pero ninguna funcionó para mí.Utilicé este y está funcionando muy bien:

jQuery

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

HTML/PHP

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>