Por alguna razón, aunque este código hace actualizar la página, no hay campos consiguen publican ...jQuery desactivar el botón de enviar en el envío del formulario
$('form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
¿Hay una mejor manera de codificar esta?
Su código está cambiando el envío del formulario. En lugar de enviar, cambia el atributo del botón.
Prueba esto:
$('input[type=submit]').click(function() {
$(this).attr('disabled', 'disabled');
$(this).parents('form').submit()
})
Esto no funcionará si el formulario se envía por otros medios (como presionar Intro en un cuadro de texto). – josh3736
que tampoco funciona. Todo lo que trato de hacer es evitar que las personas doblemente envíen el formulario. ES DECIR. una vez que hacen clic en "enviar", el botón de enviar debe deshabilitarse, el formulario debe enviarse y todas las variables $ _POST deben establecerse. – scarhand
esto no funciona en Chrome 45.0.2454.99 –
No hay razón su código shouldn't work. Al enviar el formulario, el botón de enviar está deshabilitado. Revisé las cabeceras que se transmiten a jsFiddle en la demo, y de hecho se está enviando el campo de formulario (probado en IE y Chrome):
POST http://fiddle.jshell.net/josh3736/YnnGj/show/ HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://fiddle.jshell.net/josh3736/YnnGj/show/
Accept-Language: en-US,en;q=0.7,es;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: fiddle.jshell.net
Content-Length: 9
Connection: Keep-Alive
Pragma: no-cache
test=It+works
Sus siguientes pasos deben ser:
Si necesita agregar un botón, siempre hay una etiqueta que podría ayudar. Si no desea enviar el botón de envío, la mejor manera es no agregar un botón de envío.
Lo que funcionó para mí ....
$('body').bind('pagecreate', function() {
$("#signin-btn").bind('click', function() {
$(this).button('disable');
showProgress(); // The jquery spinny graphic
$('form').submit();
});
});
que he visto unas cuantas maneras de hacer esto:
Pero ninguno ve m para trabajar como se esperaba, así que hice mi propio método.
Añadir una clase a su forma llamada submit-once y utilizar los siguientes jQuery:
$('form.submit-once').submit(function(e){
if($(this).hasClass('form-submitted')){
e.preventDefault();
return;
}
$(this).addClass('form-submitted');
});
Esto añade otra clase a su forma: form-submitted. Luego, si intenta enviar el formulario de nuevo y tiene esta clase, jQuery evitará que el formulario envíe y salga de la función al return; y, por lo tanto, no se volverá a enviar nada.
Elegí usar $('form.submit-once') en lugar de $('form') porque algunos de mis formularios usan Ajax, que debería poder enviar varias veces.
Puede probarlo en this jsFiddle. Agregué target="_blank" al formulario para que pueda probar enviar el formulario varias veces.
Nota al margen: es posible que desee considerar a los usuarios que no sean JS al evitar la doble presentación en el servidor. Por ejemplo, tenga una variable de sesión que almacene la última fecha/hora de envío e ignore cualquier envío posterior en 3 segundos.
¡Me gusta esta solución! La desactivación del botón pareció cancelar la validación del campo de formulario HTML5. Pero esta solución deja felizmente que el navegador ejecute las reglas de validación del campo de formulario. – Htbaa
Una buena manera de controlar los envíos. No se encontraron problemas con este enfoque. –
una solución genérica, para todas las entradas, botones y enlaces, usando un icono de carga de imágenes, es decir:
$(function(){
$(document).on('click', 'input[type=submit], button[type=submit], a.submit, button.submit', function() {
// Preserves element width
var w = $(this).outerWidth();
$(this).css('width', w+'px');
// Replaces "input" text with "Wait..."
if ($(this).is('input'))
$(this).val('Wait...');
// Replaces "button" and "a" html with a
// loading image.
else if ($(this).is('button') || $(this).is('a'))
$(this).html('<img style="width: 16px; height: 16px;" src="path/to/loading/image.gif"></img>');
// Disables the element.
$(this).attr('disabled', 'disabled');
// If the element IS NOT a link, submits the
// enclosing form.
if (!$(this).is('a'))
if ($(this).parents('form').length)
$(this).parents('form')[0].submit();
return true;
})
});
Para los enlaces, debe agregar la clase "enviar".
Lo que terminé usando, que está trabajando en Chrome 53:
$('input[type=submit]').addClass('submit-once').click(function(e){
if($(this).hasClass('form-submitted')){
e.preventDefault();
return;
}
$(this).addClass('form-submitted');
});
Su código está muy bien. Me encontré con este mismo problema, pero para mí el problema estaba en php, no en javascript. Cuando se deshabilita el botón ya no se envía con la forma y mi php se basaba en el botón de envío
if(isset($_POST['submit'])){
...
}
Así se actualice la página php, pero no se ejecuta. Ahora estoy usando un campo diferente que tiene el atributo required.
Bueno, después de que la función realiza su acción, se envía el formulario. ¿No es eso lo que quieres? – EmCo
Así que está tratando de deshabilitar el botón (¿está tratando de usar ajax?) Y enviar los campos del formulario y preguntar sobre ambos? O simplemente deshabilitando. La desactivación no funcionará si la página se actualiza inmediatamente. – justkt
una vez que hacen clic en "enviar", el botón de enviar debe deshabilitarse, el formulario debe enviarse y todas las variables $ _POST deben establecerse. – scarhand