javascript - formulario - evitar doble submit jquery

¿Cómo deshabilitar el botón de enviar una vez que se ha hecho clic?

Question

Tengo un botón de enviar al final del formulario.

He agregado la siguiente condición al botón de enviar:

onClick="this.disabled=true;
this.value=''Sending…'';
this.form.submit();"

Pero cuando pasa a la siguiente página, los parámetros no pasan y se pasan los valores nulos.

Answer 1

Aquí hay un ejemplo que se expande en la solución de Andreas Köberle. Utiliza jQuery para el controlador de eventos y el evento listo para documentos, pero esos podrían cambiarse a JS simple:

(function(document, $) {
$(function() {
$(document).on(''click'', ''[disable-on-click], .disable-on-click'', function() {
var disableText = this.getAttribute("data-disable-text") || ''Processing...'';
if(this.form) {
this.form.submit();
}
this.disabled = true;
if(this.tagName === ''BUTTON'') {
this.innerHTML = disableText;
} else if(this.tagName === ''INPUT'') {
this.value = disableText;
}
});
});
})(document, jQuery);

Luego se puede usar en HTML de esta manera:

<button disable-on-click data-disable-text="Saving...">Click Me</button>
<button class="disable-on-click">Click Me</button>
<input type="submit" disable-on-click value="Click Me" />

Answer 2

Creo que la forma fácil de deshabilitar el botón es :data => { disable_with: "Saving.." } Esto enviará un formulario y luego hará que un botón se deshabilite, Tampoco deshabilitará el botón si tiene validaciones como required = ''required''.

Answer 3

En mi caso esto fue necesario.

Deshabilitar el botón de enviar en el envío del formulario

Funciona bien en Internet Explorer y Firefox sin él, pero no funcionó en Google Chrome.

El problema es que está desactivando el botón antes de que pueda desencadenar el evento de envío.

Answer 4

Los elementos de formularios HTML deshabilitados no se envían junto con los valores de publicación / obtención cuando envía el formulario. Por lo tanto, si inhabilita su botón de enviar una vez que hace clic y este botón de enviar tiene el atributo de name establecido, no se enviará en los valores de publicación / obtención ya que el elemento está ahora deshabilitado. Este es un comportamiento normal.

Una de las formas de superar este problema es usar elementos de formulario ocultos.

Answer 5

No creo que necesites this.form.submit() . El código de inhabilitación debería ejecutarse, luego pasará el clic que hará clic en el formulario.

Answer 6

Otra solución que he usado es mover el botón en lugar de deshabilitarlo. En ese caso, no tienes esos problemas de "desactivación". Finalmente, lo que realmente quieres es que la gente no presione dos veces; si el botón no está allí, no pueden hacerlo.

También puede reemplazarlo con otro botón.

Answer 7

Primero debe enviar su formulario y luego cambiar el valor de su envío:

onClick="this.form.submit(); this.disabled=true; this.value=''Sending…''; "

Answer 8

Probablemente estés enviando el formulario dos veces. Elimine this.form.submit() o agregue return false al final.

debe terminar con onClick="this.disabled=true; this.value=''Sending…'';"

Answer 9

Si deshabilita el botón, su par nombre = valor no se enviará como parámetro. Pero el remanente de los parámetros debe enviarse (siempre que sus respectivos elementos de entrada y el formulario principal no estén deshabilitados). ¿Probablemente está probando el botón solamente o los otros campos de entrada o incluso el formulario están deshabilitados?

Answer 10

Tu pregunta es confusa y deberías publicar un código, pero esto debería funcionar:

onClick="this.disabled=true; this.value=''Sending...''; submitForm(); return false;"

Creo que cuando usas this.form.submit() hace lo que sucede naturalmente cuando haces clic en el botón de enviar. Si desea enviar la misma página, debe considerar el uso de AJAX en el método submitForm() (arriba).

Además, al devolver false al final del valor del atributo onClick , se suprime el evento predeterminado de la activación (en este caso, se envía el formulario).

Answer 11

Usando JQuery, puedes hacer esto ...

$("#submitbutton").click(
function() {
alert("Sending...");
window.location.replace("path to url");
}
);

Answer 12

Yo hice el truco. Cuando se establece el tiempo de espera, funciona perfectamente y envía todos los valores.

 $(document).ready(function () {
document.getElementById(''btnSendMail'').onclick = function () {
setTimeout(function () {
document.getElementById(''btnSendMail'').value = ''Sending…'';
document.getElementById(''btnSendMail'').disabled = true;
}, 850);
}
});

Answer 13

el truco es retrasar el botón para ser deshabilitado, y enviar el formulario puede usar window.setTimeout(''this.disabled=true'',0); sí, incluso con 0 MS está trabajando

Answer 14

probado en IE11, FF53, GC58:

onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"

Answer 15

A better trick, so you don''t lose the value of the button is
function showwait() {
document.getElementById(''WAIT'').style[''display'']=''inline'';
document.getElementById(''BUTTONS'').style[''display'']=''none'';
}

envolver código para mostrar en un div

id = WAIT style = "display: none"> texto para mostrar (end div)

ajustar el código para ocultarlo en un div

id = BUTTONS style = "display: inline"> ... botones o lo que sea para esconderse
onclick = "showwait ();" (fin div)

Answer 16

function xxxx() {
// submit or validate here , disable after that using below
document.getElementById(''buttonId'').disabled = ''disabled'';
document.getElementById(''buttonId'').disabled = '''';
}