asp.net - permitir - ¿Cuál es el mejor enfoque para deshabilitar un botón de envío(del lado del cliente)?
deshabilitar la cache y el boton atras del navegador (7)
Detalles:
- Solo deshabilitar después de que el usuario haga clic en el botón Enviar, pero antes de la publicación en el servidor
- Webforms de ASP.NET (.NET 1.1)
- Prefiero jQuery (si hay alguna biblioteca)
- Debe estar habilitado si la forma se vuelve a cargar (es decir, la tarjeta de crédito falló)
No es una necesidad que haga esto, pero si hay una manera simple de hacerlo sin tener que cambiar demasiado, lo haré. (es decir, si no hay una solución simple, probablemente no lo haga, así que no te preocupes por excavar demasiado)
Hay tres formas de enviar un formulario que debe ser cubierto. Use las sugerencias de David McLaughlin y Jimmy. Uno deshabilitará el elemento de formulario de botón de envío, mientras que el otro desactivará el formulario de formulario HTML básico.
Para el tercero, estos no deshabilitarán Javascript para hacer un formulario.submit (). El OnSubmit="return false" solo se aplica cuando un usuario hace clic en el botón Enviar o presiona Intro en un elemento de formulario de entrada. Las secuencias de comandos del lado del cliente deberán manejarse también.
Lo que hay que tener en cuenta es que no debe deshabilitar el botón antes de enviar el formulario. Si desactiva el botón mediante javascript en el evento OnClick, puede perder el envío del formulario.
Por lo tanto, le sugiero que oculte el botón con javascript colocando una imagen encima o moviendo el botón fuera del rango visible. Eso debería permitir que el formulario enviado proceda normalmente.
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 conociéramos un poco más sobre el contexto.
Si se trata de una solicitud de AJAX, deberá asegurarse de habilitar los botones de envío nuevamente ya sea con éxito o error.
Si se trata de un envío de formulario HTTP estándar (además de deshabilitar el botón con javascript) y está haciendo esto para protegerse de múltiples envíos de la misma forma, entonces debe tener algún tipo de control en el código que trata con el datos enviados, porque desactivar un botón con javascript podría no evitar múltiples envíos.
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:
- hacer clic en un elemento enviar
- presionando enter, o
- llamando a
form.submit()desde otro código
- Deshabilitará todos los elementos de envío:
-
<input type="submit"/> -
<button type="submit"></button> -
<input type="image" />
-
- es realmente corto.
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 lo que sucede si la devolución de datos se agota, pero aparte de eso funcionó para mí.
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 ocultar el botón por completo y mostrar algún tipo de indicador de estado (gif animado, etc.) en su lugar.
Aquí hay un ejemplo muy artificial (técnicamente está en 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; });