Desactivación de múltiples presentar en los formularios HTML

Question

Si mis usuario hace clic más de una vez en un botón de envío de un formulario, que esencialmente envía peticiones GET / POST múltiples (dependiendo de las Preferencias del formulario).

Me parece que al desactivar el botón de enviar usando JS es un poco problemático, ya que si un usuario intenta parada (ESC / STOP), no restablece el botón (a menos que coger eso y que el uso de JS mango de nuevo) , si el usuario regresa (el botón trasero) de la página siguiente, el botón de envío es aún está incapacitado (por lo menos en Firefox).

¿Cuál es la mejor práctica para inhabilitar múltiples presenta el formulario.

Gracias!

Answer 1

Javascript funciona bien para mí. Asegurarse de que el botón (s) están habilitadas atrás cuando el usuario cancela su presentación es parte de la usabilidad.

Si no desea desactivar los botones usando javascript, entonces tal vez en el serverside se puede coger mensajes duplicados en un determinado lapso de tiempo?

Answer 2

Esto podría no responder a su pregunta, pero creo que para generar algo uniq para identificar la solicitud en el lado del servidor podría ser una mejor idea. validación del lado del cliente es siempre problemática.

Answer 3

se unen al desactivar a la forma de presentar y luego su deshabilitar a la carga de la página (para restablecer al actualizar / volver):

function disableSubmits( domNode, toDisable )
{
    domNode = domNode || document.getElementsByTagName( 'body' )[ 0 ];

    toDisable = !!toDisable;

    for( var i = 0; i < inputs.length; ++i )
    {
        if( 'submit' === inputs[i].getAttribute( 'type' ) )
        {
            inputs[i].disabled = toDisable;
        }
    }
}

var onloadhandler = function( )
{
    var theForm = document.getElementById( 'theForm' );

    theForm.onsubmit = function( ){ disableSubmits( theForm, true ); }

    disableSubmits( theForm, false );
};

var old = window.onload;

window.onload =  'function' === typeof old
                 ? function( ){ old(); onloadhandler(); }
                 : onloadhandler;