mensaje - confirmacion de envio de formulario javascript

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

Question

Escribí este código para desactivar los botones de enviar en mi sitio web después del clic:

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

Lamentablemente, no envía el formulario. ¿Cómo puedo arreglar esto?

EDITAR Me gustaría vincular el envío, no el formulario :)

Answer 1

Como se dijo anteriormente, si agrega el atributo deshabilitado en el botón de enviar, los datos no serán enviados.

El truco de @Valamas funciona, pero encontré una solución que es muy fácil de implementar:

$(''#yourform'').submit(function(){
    $(''#mySubmitButton'').addClass(''disabled'');
});

Y define la clase deshabilitada en CSS así:

.disabled{
    cursor:not-allowed;
}

Esto hará lo mismo que disabled = "disabled", pero sin las consecuencias en los datos enviados.

Answer 2

Esto debería solucionarlo en tu aplicación.

$(":submit").closest("form").submit(function(){
    $('':submit'').attr(''disabled'', ''disabled'');
});

Answer 3

Hazlo en onSubmit() :

$(''form#id'').submit(function(){
    $(this).find('':input[type=submit]'').prop(''disabled'', true);
});

Lo que está sucediendo es que estás deshabilitando el botón por completo antes de que realmente desencadene el evento de envío.

Probablemente también deba pensar en nombrar sus elementos con ID o CLASSes, por lo que no selecciona todas las entradas de tipo de envío en la página.

Demostración: http://jsfiddle.net/userdude/2hgnZ/

(Tenga en cuenta que utilizo preventDefault() y return false por lo que el formulario no se envía en el ejemplo, déjelo en uso).

Answer 4

He estado usando blockUI para evitar incompatibilidades del navegador con botones deshabilitados u ocultos.

http://malsup.com/jquery/block/#element

Entonces mis botones tienen una autobutton de clase:

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = ''<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> '' + nv;
        $(this).html(nv2);
        var form = $(this).parents(''form:first'');

        $(this).block({ message: null });
        form.submit();                
        });   

Entonces una forma es así:

<form>
....
<button class="autobutton">Submit</button>   
</form>

Answer 5

La solución simple y efectiva es

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Fuente: here

Answer 6

Lo siguiente funcionó para mí:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $(''#form_id'').on(''submit'', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

Esto cancela el evento de envío si el usuario intenta enviar el formulario varias veces (haciendo clic en el botón Enviar, presionando Entrar, etc.)

Answer 7

Tu código realmente funciona en FF, no funciona en Chrome.

Esto funciona en FF y Chrome.

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $(''form'').on(''submit'', function(e){
          //console.log(''submit2'', e, $(this).find(''[clicked=true]''));
          var submit = $(this).find(''[clicked=true]'')[0];
          if (!submit.hasAttribute(''disabled''))
          {
            submit.setAttribute(''disabled'', true);
            setTimeout(function(){
              submit.removeAttribute(''disabled'');
            }, 1000);
          }
          submit.removeAttribute(''clicked'');
          e.preventDefault();
        });
        $(''[type=submit]'').on(''click touchstart'', function(){
          this.setAttribute(''clicked'', true);
        });
      });
    </script>

Answer 8

Una forma más simple. Lo intenté y funcionó bien para mí:

$('':input[type=submit]'').prop(''disabled'', true);

Answer 9

Cómo deshabilitar el botón de enviar

solo llame a una función en evento onclick y ... devuelva true para enviar y falso para desactivar submit. O llame a una función en window.onload como:

window.onload = init();

y en init () hacer algo como esto:

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do 

Answer 10

Específicamente si alguien enfrenta un problema en Chrome

Lo que debe hacer para solucionarlo es utilizar la etiqueta onSubmit en el elemento para desactivar el botón Enviar. Esto permitirá que Chrome deshabilite el botón inmediatamente después de presionarlo y el envío del formulario continuará.

p.ej

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById(''submit'').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

Answer 11

Los controles deshabilitados no envían sus valores, lo que no ayuda a saber si el usuario hizo clic en guardar o eliminar.

Así que guardo el valor del botón en un oculto que se envía. El nombre de lo oculto es lo mismo que el nombre del botón. Llamo a todos mis botones por el nombre del button .

Por ejemplo, <button type="submit" name="button" value="save">Save</button>

Basado en esto que encontré here . Simplemente almacene el botón presionado en una variable.

$(document).ready(function(){
    var submitButton$;

    $(document).on(''click'', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on(''submit'', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $(''#button'', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $(''<input>'')
                .attr({ type: ''hidden'', id: ''button'', name: ''button'' })
                .appendTo(form$);
        }
        hiddenButton$.attr(''value'', submitButton$.attr(''value''));
        submitButton$.attr("disabled", "disabled");
    }
});

Aquí está mi función IsNull . Utilice o sustituya su propia versión por IsNull o undefined, etc.

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === ''undefined'' || obj == "";

    return is;
}