¿Cómo enviar el formulario una sola vez después de hacer clic múltiple en enviar?

Question

Tengo un problema cuando intento enviar el formulario haciendo clic en el botón enviar, lleva un tiempo publicar la solicitud durante este si vuelvo a hacer clic en el botón Enviar, volverá a enviar todos los parámetros y se guardarán los parámetros. dos veces, tres veces ... etc.

No sé cómo limitar el botón Enviar para que el formulario no se envíe dos veces. Creo que cuando hice clic en Enviar, tengo que deshabilitar el botón de enviar para que el usuario no pueda volver a hacer clic, ¿es correcto hacerlo?

Answer 1

<input type="submit" onclick="this.disabled = true" value="Save"/> 

Answer 2

I love the simplicity and directness of Zoidberg's answer.

Pero si desea conectar el manejador del uso de código en lugar de marcado (algunas personas prefieren mantener el marcado y el código completamente separados), aquí se está utilizando Prototype:

document.observe('dom:loaded', pageLoad); 
function pageLoad() { 
    var btn; 

    btn = $('idOfButton'); // Or using other ways to get the button reference 
    btn.observe('click', disableOnClick); 
} 
function disableOnClick() { 
    this.disabled = true; 
} 

o usted podría utilizar funciones anónimas (no soy un fan de ellos):

document.observe('dom:loaded', function() { 
    var btn; 

    btn = $('idOfButton'); // Or using other ways to get the button reference 
    btn.observe('click', function() { 
     this.disabled = true; 
    }); 
}); 

Hacerlo usando jQuery se verá muy similar.

Answer 3

Desactivar el botón es una solución, pero puede ser un problema para los usuarios de teclado que simplemente pulsan enter para enviar un formulario. En este escenario, el botón no se desactivará. El método infalible sería para controlar el evento onsubmit así:

(function() { 
    var allowSubmit = true; 
    frm.onsubmit = function() { 
     if (allowSubmit) 
      allowSubmit = false; 
     else 
      return false; 
    } 
})(); 

(así, como más segura de que se puede obtener con JS activado de todos modos). Podría desactivar el botón como una confirmación visual para el usuario final de que el formulario solo puede enviarse una vez.

Answer 4

Si está utilizando rieles con ujs, a continuación, echar un vistazo a disable_with en http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag

Answer 5

Sé que esto es viejo, pero en lugar de desactivar, simplemente ocultar el botón, no se puede hacer clic lo que no puede ver.

<input type="submit" onclick="this.style.visibility = 'hidden'" value="Save"/> 

Answer 6

si está presente forma de uso/post en PHP a continuación, utilizar el código

onclick="disableMe();" in type="submit" 

su código botón de enviar

<input name="bt2" type="submit" onclick="disableMe();" id="bt2" style="width:50px;height:30px; margin-left:30px;" value="Select" />