javascript - formulario - Deshabilitar el botón de enviar SOLAMENTE después de enviar
evitar doble submit jquery (12)
Tengo el siguiente HTML y jquery:
<html dir="ltr" lang="en">
<head>
</head>
<body>
<h2>Test disabling submit button for 1 minute...</h2>
<br/>
<p style="text-align:center">
<form id="yourFormId" name="yourFormId" method="post" action="#">
<input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>
<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
</script>
<!--script ends here-->
</body>
</html>
Tal como está, el botón de enviar se desactiva cuando se lo presiona. Sin embargo, una vez presionado, no parece realizar el envío. Si eliminé el jquery para desactivar el botón, el botón realiza el envío normalmente.
¿Cómo puedo desactivar el botón solo después de haber realizado el envío? el jquery actual anterior parece entrar en conflicto con la operación de envío.
Cualquier sugerencia para resolver este problema sería extremadamente útil.
Agregue la parte de deshabilitar en el evento de envío.
$(document).ready(function () {
$("#yourFormId").submit(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
Al leer los comentarios, parece que estas soluciones no son consistentes en todos los navegadores. Decidí entonces pensar cómo habría hecho esto hace 10 años antes del advenimiento de jQuery y la vinculación de la función de evento.
Así que aquí está mi solución hipster retro:
<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert(''your request is being processed!''); return false; }" action="" method="GET">
<input type="submit" value="submit - but only once!"/>
</form>
El principal punto de diferencia es que estoy confiando en la capacidad de detener el envío de un formulario mediante el retorno de falso en el controlador de envío, y estoy usando una variable de indicador global, lo que me hará ir directo al infierno.
Pero en el lado positivo, no puedo imaginar ningún problema de compatibilidad con el navegador: ¡eh, probablemente incluso funcione en Netscape!
Como señalaron varias personas, deshabilitar el botón de enviar tiene algunos efectos secundarios negativos (al menos en Chrome impide que se envíe el nombre / valor del botón presionado). Mi solución fue simplemente agregar un atributo para indicar que se ha solicitado el envío, y luego verificar la presencia de este atributo en cada envío. Debido a que estoy usando la función de envío, esto solo se llama después de que toda la validación de HTML 5 sea exitosa. Aquí está mi código:
$("form.myform").submit(function (e) {
// Check if we have submitted before
if ( $("#submit-btn").attr(''attempted'') == ''true'' ) {
//stop submitting the form because we have already clicked submit.
e.preventDefault();
}
else {
$("#submit-btn").attr("attempted", ''true'');
}
});
Esta solución tiene las ventajas de trabajar en dispositivos móviles y es bastante simple:
<form ... onsubmit="myButtonValue.disabled = true; return true;">
Este es el guión editado, espero que ayude,
<script type="text/javascript">
$(function(){
$("#yourFormId").on(''submit'', function(){
return false;
$(".submitBtn").attr("disabled",true); //disable the submit here
//send the form data via ajax which will not relaod the page and disable the submit button
$.ajax({
url : //your url to submit the form,
data : { $("#yourFormId").serializeArray() }, //your data to send here
type : ''POST'',
success : function(resp){
alert(resp); //or whatever
},
error : function(resp){
}
});
})
});
</script>
La prueba con un setTimeout, que funcionó para mí y pude enviar mi formulario, se refiere a esta respuesta https://.com/a/779785/5510314
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop(''disabled'', true);
}
});
Me enfrenté al mismo problema. Los clientes pueden enviar un formulario y, a continuación, varias direcciones de correo electrónico recibirán un mensaje de correo electrónico. Si la respuesta de la página lleva demasiado tiempo, a veces el botón se presionó dos veces o incluso más veces.
Intenté desactivar el botón en el controlador onsubmit, pero el formulario no se envió. Las soluciones anteriores funcionan bien, pero para mí fue un poco complicado, así que decidí probar algo más.
En el lado izquierdo del botón Enviar, coloqué un segundo botón, que no se muestra y se desactiva al inicio:
<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>
En el controlador onsubmit adjunto al formulario, el envío ''real'' está oculto y el envío ''falso'' se muestra con un mensaje de que los mensajes se están enviando.
function checkinput // submit handler
{
..
...
$("#btnverzenden").hide(); <= real submit button will be hidden
$("#btnverzenden2").show(); <= fake submit button gets visible
...
..
}
Esto funcionó para nosotros. Espero que te ayude.
Mi problema se resolvió cuando bind sección de bind a mi archivo de script.
Totalmente hice estos 2 pasos:
1 - Desactiva el botón y evita el doble envío:
$(''form'').submit(function () {
$(this).find('':submit'').attr(''disabled'', ''disabled'');
});
2 - Habilitar botón de enviar si se produjo un error de validación:
$("form").bind("invalid-form.validate", function () {
$(this).find('':submit'').prop(''disabled'', false);
});
Oye, esto funciona,
$(function(){
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
$(''#yourFormId'').submit();
});
});
Puse esto en mi código global para trabajar en todos los botones de envío:
$("input[type=''submit'']").on("click", function (e) {
$(this).attr("disabled", true);
$(this).closest("form").submit()
});
$(function(){
$("input[type=''submit'']").click(function () {
$(this).attr("disabled", true);
});
});
eso es.
$(document).ready(function() {
$(body).submit(function () {
var btn = $(this).find("input[type=submit]:focus");
if($(btn).prop("id") == "YourButtonID")
$(btn).attr("disabled", "true");
});
}
y en el código del lado del servidor:
protected void YourButton_Clicked(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "$(''#YourButtonID'').removeAttr(''disabled'');", true);
}