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

Question

Tengo un botón de envío al final del formulario.

he añadido la siguiente condición para el botón de envío:

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

Pero cuando se mueve a la siguiente página, los parámetros no pasó y se transmiten los valores nulos.

Answer 1

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

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

Answer 2

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

Answer 3

Su pregunta es confusa y que realmente debe publicar algo de código, pero esto debería funcionar:

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

Creo que cuando se utiliza this.form.submit() que está haciendo lo que ocurre de manera natural cuando haces clic en el botón enviar. Si desea enviar la misma página, debe considerar el uso de AJAX en el método submitForm() (arriba).

Además, devolver false al final del valor de atributo onClick suprime el evento predeterminado de disparar (en este caso, enviar el formulario).

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 envío una vez que hace clic y el botón Enviar tiene el atributo 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.

Uno de la manera de superar este problema está utilizando elementos de formulario ocultos.

Answer 5

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 6

Usted debe primero presentar su formulario y cambie el valor de su confirmación:

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

Answer 7

El truco está en retraso en el botón que se desactive, y enviar el formulario se puede utilizar window.setTimeout('this.disabled=true',0); sí, incluso con 0 MS está trabajando

Answer 8

usando jQuery, puede hacer esto ..

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

Answer 9

Otra solución nos HE ed 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 por otro botón.

Answer 10

    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'; 
    } 

código de envoltura para mostrar en un div

estilo

id = WAIT = "display: none"> texto que se mostrará (div final)

código de envoltura para esconderse en un div

id = BUTTONS style = "display: inline"> ... botones o lo que sea que se oculte con
onclick = "showwait();" (div final)

Answer 11

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

Answer 12

En mi caso esto era necesario.

Disable submit button on form submit

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

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

Answer 13

Aquí hay un ejemplo que se expande en la solución de Andreas Köberle. Se utiliza jQuery para el controlador de eventos y el evento ready documento, pero los que podría ser cambiado a llanura JS:

(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); 

A continuación, se puede utilizar en HTML así:

<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 14

probado en IE11, FF53, GC58:

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

Answer 15

creo manera fácil botón para desactivar es :data => { disable_with: "Saving.." } Esto presentará un formulario y luego hacer un bloqueo de botón, botón Además, no se desactivará i Si tiene validaciones como required = 'required'.

Answer 16

Lo hice. 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); 
     } 
    });