¿Cuál es el mejor enfoque para deshabilitar (del lado del cliente) un botón de envío?

StackOverflow https://stackoverflow.com/questions/46079

Pregunta

Detalles:

  • Solo deshabilite después de que el usuario haga clic en el botón Enviar, pero antes de volver a publicar en el servidor.
  • Formularios web ASP.NET (.NET 1.1)
  • Prefiere jQuery (si existe alguna biblioteca)
  • Debe estar habilitado si el formulario se recarga (es decir,tarjeta de crédito fallida)

No es una necesidad que haga esto, pero si hay una manera sencilla de hacerlo sin tener que cambiar demasiado, lo haré.(es decir.si no hay una solución simple, probablemente no la haré, así que no te preocupes por profundizar demasiado)

¿Fue útil?

Solución

Para todos los botones de envío, a través de JQuery, sería:

$('input[type=submit]').click(function() { this.disabled = true; });

O podría ser más útil hacerlo al enviar el formulario:

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

Pero creo que podríamos dar una mejor respuesta a su pregunta si supiéramos un poco más sobre el contexto.

Si se trata de una solicitud ajax, deberá asegurarse de habilitar los botones de envío nuevamente en caso de éxito o fracaso.

Si se trata de un envío de formulario HTTP estándar (aparte de deshabilitar el botón con javascript) y lo hace para protegerse de múltiples envíos del mismo formulario, entonces debería tener algún tipo de control en el código que trata con el datos enviados, porque deshabilitar un botón con javascript podría no evitar envíos múltiples.

Otros consejos

Podrías hacer algo como esto:

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

Beneficios de esto:

  • Funcionará con todos sus formularios, con todos los métodos de envío:
    • haciendo clic en un elemento de envío
    • presionando enter, o
    • vocación form.submit() de algún otro código
  • Deshabilitará todos los elementos de envío:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • es muy corto.

Supongo que no desea que presionen el botón de enviar más de una vez mientras se procesa el envío.

Mi enfoque ha sido simplemente ocultar el botón por completo y mostrar algún tipo de indicador de estado (gif animado, etc.).

Aquí hay un ejemplo muy artificial (técnicamente está en un prototipo, pero creo que una versión de jquery sería muy similar):

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

en JQuery:

$('#SubmitButtonID').click(function() { this.disabled = true; });

Lo que hay que tener en cuenta es que no se debe desactivar el botón antes de enviar el formulario.Si desactiva el botón usando javascript en el evento OnClick, puede perder el envío del formulario.

Entonces te sugiero que ocultes el botón usando javascript colocando una imagen encima o moviendo el botón fuera del rango visible.Eso debería permitir que el envío del formulario se realice normalmente.

Hay tres formas de enviar un formulario que deben cubrirse.Utilice las sugerencias de David McLaughlin y Jimmy.Uno deshabilitará el elemento del formulario del botón de envío mientras que el otro deshabilita el envío del formulario HTML básico.

Para el tercero, estos no impedirán que Javascript realice un form.submit().El OnSubmit="return false" El método solo se aplica cuando un usuario hace clic en el botón Enviar o presiona Enter en un elemento del formulario de entrada.También será necesario gestionar las secuencias de comandos del lado del cliente.

Qué tal si

Código detrás:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

JavaScript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

Esto no resuelve el problema de qué sucede si se agota el tiempo de espera de la devolución, pero aparte de eso funcionó para mí.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top