sweet - jquery deshabilitar el botón de enviar en el formulario

sweet alert custom buttons

Question

Por cualquier motivo, aunque este código actualiza la página, no se publican campos ...

$(''form'').submit(function(){
    $(''input[type=submit]'', this).attr(''disabled'', ''disabled'');
});

¿Hay una mejor manera de codificar esto?

Answer 1

He visto algunas maneras de hacer esto:

• Desactivar botones al hacer clic
• Desactivar botones al enviar
• Deshabilitar el formulario al enviar

Pero ninguno parece funcionar como se esperaba, así que hice mi propio método.

Agregue una clase a su formulario llamado submit-once y use el siguiente jQuery:

$(''form.submit-once'').submit(function(e){
  if( $(this).hasClass(''form-submitted'') ){
    e.preventDefault();
    return;
  }
  $(this).addClass(''form-submitted'');
});

Esto agrega otra clase a su formulario: form-submitted . Luego, si intenta volver a enviar el formulario y tiene esta clase, jQuery evitará que el formulario se envíe y saldrá de la función en el momento de la return; y así, nada se vuelve a presentar.

Elegí usar $(''form.submit-once'') lugar de $(''form'') porque algunos de mis formularios usan Ajax, que debería poder enviarse varias veces.

Puedes probarlo en este jsFiddle . Agregué target="_blank" al formulario para que pueda probar el envío del formulario varias veces.

Nota al margen: es posible que desee considerar a los usuarios que no son JS, ya que también evita el doble envío del servidor. Por ejemplo, tenga una variable de sesión que almacene la fecha / hora del último envío e ignore cualquier otro envío dentro de los 3 segundos.

Answer 2

Lo que funcionó para mí ...

$(''body'').bind(''pagecreate'', function() {
    $("#signin-btn").bind(''click'', function() {
        $(this).button(''disable'');
        showProgress(); // The jquery spinny graphic
        $(''form'').submit();
    });
});

Answer 3

Lo que terminé usando, que está funcionando en Chrome 53:

$(''input[type=submit]'').addClass(''submit-once'').click(function(e){
    if($(this).hasClass(''form-submitted'') ){
        e.preventDefault();
        return;
    }
    $(this).addClass(''form-submitted'');
});

Answer 4

No hay razón para que su código no funcione . Al enviar el formulario, el botón enviar está deshabilitado. Verifiqué los encabezados que se transmiten a JSFiddle en la demostración, y el campo del formulario se está enviando (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 próximos pasos deben ser:

• Use algo que le permita inspeccionar el tráfico HTTP (mi favorito es Fiddler ) para ver si sus campos de formulario se están enviando al servidor. Si lo son, obviamente es un problema en su servidor.
• Si los campos del formulario no se están enviando, hay algo más en tu página. Publique más de su código para que podamos ver exactamente lo que está sucediendo.

Answer 5

Si necesita agregar un botón, siempre hay una etiqueta que puede ayudar. Si no desea que se envíe el botón de envío, la mejor manera es no agregar un botón de envío.

Answer 6

Su código está cambiando la acción de 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()
})

Answer 7

Tu código está bien. Me encontré con este mismo problema, pero para mí el problema estaba en PHP, no en javascript. Cuando desactivas el botón, ya no se envía con el formulario y mi PHP confía en el botón de envío

if(isset($_POST[''submit''])){
   ...
}

Así que la página se actualiza pero php no se ejecuta. Ahora estoy usando un campo diferente que tiene un atributo required .

Answer 8

Una solución genérica, para todas las entradas, botones y enlaces, utilizando un icono de carga de imagen, es:

$(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 enlaces necesitas agregar la clase "enviar".