Tengo un formulario que el servidor tarda un poco en procesar. Necesito asegurarme de que el usuario espere y no intente volver a enviar el formulario haciendo clic nuevamente en el botón. Intenté usar el siguiente código jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>

Cuando intento esto en Firefox, todo se deshabilita, pero el formulario no se envía con ninguno de los datos POST que se supone que debe incluir. No puedo usar jQuery para enviar el formulario porque necesito que el botón se envíe con el formulario, ya que hay varios botones de envío y determino cuál fue utilizado por cuál valor se incluye en la POST. Necesito que el formulario se envíe tal como es y necesito deshabilitar todo inmediatamente después de que eso suceda.

¡Gracias!

Actualización en 2018 : acabo de recibir algunos puntos para esta vieja respuesta, y solo quería agregar que la mejor solución sería hacer que la operación sea idempotente para que los envíos duplicados sean inofensivos.

Por ejemplo, si el formulario crea un pedido, coloque una ID única en el formulario. La primera vez que el servidor ve una solicitud de creación de pedido con esa identificación, debe crearla y responder "éxito". Los envíos posteriores también deberían responder "éxito" (en caso de que el cliente no obtuviera la primera respuesta) pero no deberían cambiar nada.

Los duplicados deben detectarse mediante una comprobación de unicidad en la base de datos para evitar condiciones de carrera.

Creo que tu problema es esta línea:

$('input').attr('disabled','disabled');

Está deshabilitando TODAS las entradas, incluidas, supongo, aquellas cuyos datos se supone que debe enviar el formulario.

Para deshabilitar solo los botones de envío, puede hacer esto:

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

Sin embargo, no creo que IE envíe el formulario si incluso esos botones están deshabilitados. Sugeriría un enfoque diferente.

Un complemento jQuery para resolverlo

Acabamos de resolver este problema con el siguiente código. El truco aquí es usar jQuery's data()para marcar el formulario como ya enviado o no. De esa manera, no tenemos que meternos con los botones de envío, lo que asusta a IE.

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};

Úselo así:

$('form').preventDoubleSubmission();

Si hay formas de AJAX que debe ser permitido enviar múltiples veces por carga de la página, puede darles una clase que indica que, a continuación, les excluyen de su selector de la siguiente manera:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

El enfoque de sincronización es incorrecto: ¿cómo sabe cuánto tiempo durará la acción en el navegador del cliente?

Cómo hacerlo

$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});

Cuando se envía el formulario, deshabilitará todos los botones de envío dentro.

Recuerde, en Firefox cuando deshabilita un botón, este estado se recordará cuando regrese al historial. Para evitar que tenga que habilitar botones en la carga de la página, por ejemplo.

Creo que la respuesta de Nathan Long es el camino a seguir. Para mí, estoy usando la validación del lado del cliente, por lo que acabo de agregar una condición para que el formulario sea válido.

EDITAR : si esto no se agrega, el usuario nunca podrá enviar el formulario si la validación del lado del cliente encuentra un error.

        // jQuery plugin to prevent double submission of forms
        jQuery.fn.preventDoubleSubmission = function () {
            $(this).on('submit', function (e) {
                var $form = $(this);

                if ($form.data('submitted') === true) {
                    // Previously submitted - don't submit again
                    alert('Form already submitted. Please wait.');
                    e.preventDefault();
                } else {
                    // Mark it so that the next submit can be ignored
                    // ADDED requirement that form be valid
                    if($form.valid()) {
                        $form.data('submitted', true);
                    }
                }
            });

            // Keep chainability
            return this;
        };

event.timeStampNo funciona en Firefox. Devolver falso no es estándar, debe llamar event.preventDefault(). Y mientras lo hacemos, use siempre llaves con una construcción de control .

Para resumir todas las respuestas anteriores, aquí hay un complemento que hace el trabajo y funciona en varios navegadores.

jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    jQuery(this).bind('submit', function(event) {

        if(last_clicked) {
            time_since_clicked = jQuery.now() - last_clicked;
        }

        last_clicked = jQuery.now();

        if(time_since_clicked < 2000) {
            // Blocking form submit because it was too soon after the last submit.
            event.preventDefault();
        }

        return true;
    });
};

Para abordar Kern3l, el método de sincronización funciona para mí simplemente porque estamos tratando de detener un doble clic en el botón Enviar. Si tiene un tiempo de respuesta muy largo para un envío, le recomiendo reemplazar el botón o formulario de envío con una flecha giratoria.

El bloqueo completo de los envíos posteriores del formulario, como lo hacen la mayoría de los ejemplos anteriores, tiene un efecto secundario negativo: si hay una falla en la red y quieren intentar volver a enviarla, no podrían hacerlo y perderían los cambios que hecho. Esto definitivamente haría que un usuario enojado.

Por favor, consulte el complemento jquery-safeform .

Ejemplo de uso:

$('.safeform').safeform({
    timeout: 5000,  // disable next submission for 5 sec
    submit: function() {
        // You can put validation and ajax stuff here...

        // When done no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
});

... pero el formulario no se envía con ninguno de los datos POST que se supone que debe incluir.

Correcto. Los nombres / valores de elementos de formulario deshabilitados no se enviarán al servidor. Debe establecerlos como elementos de solo lectura .

Además, los anclajes no se pueden desactivar de esa manera. Deberá eliminar sus HREF (no recomendado) o evitar su comportamiento predeterminado (mejor manera), por ejemplo:

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>

Existe la posibilidad de mejorar el enfoque de Nathan Long . Puede reemplazar la lógica para la detección del formulario ya enviado por este:

var lastTime = $(this).data("lastSubmitTime");
if (lastTime && typeof lastTime === "object") {
    var now = new Date();
    if ((now - lastTime) > 2000) // 2000ms
        return true;
    else
        return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else

El código de Nathan pero para el complemento jQuery Validate

Si utiliza el complemento jQuery Validate, ya tienen implementado el controlador de envío, y en ese caso no hay razón para implementar más de uno. El código:

jQuery.validator.setDefaults({
  submitHandler: function(form){
    // Prevent double submit
    if($(form).data('submitted')===true){
      // Previously submitted - don't submit again
      return false;
    } else {
      // Mark form as 'submitted' so that the next submit can be ignored
      $(form).data('submitted', true);
      return true;
    }
  }
});

Puede expandirlo fácilmente dentro de } else { bloque para deshabilitar las entradas y / o enviar el botón.

Salud

Terminé usando ideas de esta publicación para llegar a una solución que es bastante similar a la versión de AtZako.

 jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    $(this).bind('submit', function(event){

    if(last_clicked) 
      time_since_clicked = event.timeStamp - last_clicked;

    last_clicked = event.timeStamp;

    if(time_since_clicked < 2000)
      return false;

    return true;
  });   
};

Usando así:

$('#my-form').preventDoubleSubmission();

Descubrí que las soluciones que no incluían algún tipo de tiempo de espera sino que simplemente desactivaban el envío o los elementos de formulario inhabilitados causaban problemas porque una vez que se activa el bloqueo, no puede enviar nuevamente hasta que actualice la página. Eso me causa algunos problemas cuando hago cosas de ajax.

Esto probablemente se puede mejorar un poco, ya que no es tan elegante.

Si usa AJAX para publicar un formulario, el conjunto async: falsedebería evitar envíos adicionales antes de que se borre el formulario:

$("#form").submit(function(){
    var one = $("#one").val();
    var two = $("#two").val();
    $.ajax({
      type: "POST",
      async: false,  // <------ Will complete submit before allowing further action
      url: "process.php",
      data: "one="+one+"&two="+two+"&add=true",
      success: function(result){
        console.log(result);
        // do something with result
      },
      error: function(){alert('Error!')}
    });
    return false;
   }
});

La solución de Nathan modificada un poco para Bootstrap 3. Esto establecerá un texto de carga en el botón de envío. Además, expirará después de 30 segundos y permitirá que el formulario se vuelva a enviar.

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

  $(this).on('submit',function(e){
    var $form = $(this);

    $('input[type="submit"]', $form).button('loading');

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

Use dos botones de envío.

<input id="sub" name="sub" type="submit" value="OK, Save">
<input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none">

Y jQuery:

$("#sub").click(function(){
  $(this).val("Please wait..");
  $(this).attr("disabled","disabled");
  $("#sub2").click();
});

Use un contador simple al enviar.

    var submitCounter = 0;
    function monitor() {
        submitCounter++;
        if (submitCounter < 2) {
            console.log('Submitted. Attempt: ' + submitCounter);
            return true;
        }
        console.log('Not Submitted. Attempt: ' + submitCounter);
        return false;
    }

Y llame a la monitor()función al enviar el formulario.

    <form action="/someAction.go" onsubmit="return monitor();" method="POST">
        ....
        <input type="submit" value="Save Data">
    </form>

He tenido problemas similares y mis soluciones son las siguientes.

Si no tiene ninguna validación del lado del cliente, simplemente puede usar el método jquery one () como se documenta aquí.

http://api.jquery.com/one/

Esto deshabilita el controlador después de haber sido invocado.

$("#mysavebuttonid").on("click", function () {
  $('form').submit();
});

Si está haciendo la validación del lado del cliente como lo estaba haciendo, entonces es un poco más complicado. El ejemplo anterior no le permitiría enviar nuevamente después de una validación fallida. Prueba este enfoque en su lugar

$("#mysavebuttonid").on("click", function (event) {
  $('form').submit();
  if (boolFormPassedClientSideValidation) {
        //form has passed client side validation and is going to be saved
        //now disable this button from future presses
        $(this).off(event);
   }
});

Puede detener el segundo envío por este

$("form").submit(function() {
        // submit more than once return false
        $(this).submit(function() {
            return false;
        });
        // submit once return true
        return true; // or do what you want to do
    });
});

Mi solución:

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

    $form.find('[type="submit"]').click(function () {
        $(this).prop('disabled', true);
        $form.submit();
    });

    // Keep chainability
    return this;
};

En mi caso, el formulario de envío del formulario tenía un código de validación, por lo que incrementé la respuesta de Nathan Long, incluido un punto de control de envío

$.fn.preventDoubleSubmission = function() {
      $(this).on('submit',function(e){
        var $form = $(this);
        //if the form has something in onsubmit
        var submitCode = $form.attr('onsubmit');
        if(submitCode != undefined && submitCode != ''){
            var submitFunction = new Function (submitCode);
            if(!submitFunction()){
                event.preventDefault();
                return false;
            }                   
        }

        if ($form.data('submitted') === true) {
            /*Previously submitted - don't submit again */
            e.preventDefault();
        } else {
          /*Mark it so that the next submit can be ignored*/
          $form.data('submitted', true);
        }
      });

      /*Keep chainability*/
      return this;
    };

Cambiar el botón de enviar:

<input id="submitButtonId" type="submit" value="Delete" />

Con botón normal:

<input id="submitButtonId" type="button" value="Delete" />

Luego use la función de clic:

$("#submitButtonId").click(function () {
        $('#submitButtonId').prop('disabled', true);
        $('#myForm').submit();
    });

Y recuerde volver a habilitar el botón cuando sea necesario:

$('#submitButtonId').prop('disabled', false);

No puedo creer el buen truco css anticuado de los eventos de puntero: ninguno no ha sido mencionado todavía. Tuve el mismo problema al agregar un atributo deshabilitado, pero esto no se publica nuevamente. Pruebe lo siguiente y reemplace #SubmitButton con la ID de su botón de envío.

$(document).on('click', '#SubmitButton', function () {
    $(this).css('pointer-events', 'none');
})

¿Por qué no solo esto? Esto enviará el formulario pero también deshabilitará el botón de envío,

   $('#myForm').on('submit', function(e) {
       var clickedSubmit = $(this).find('input[type=submit]:focus');
       $(clickedSubmit).prop('disabled', true);
   });

Además, si está utilizando jQuery Validate, puede colocar estas dos líneas debajo if ($('#myForm').valid()).

este código mostrará la carga en la etiqueta del botón y establecerá el botón en

deshabilite el estado, luego, después del procesamiento, vuelva a habilitar y regrese el texto del botón original **

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
});

Resolví un problema muy similar usando:

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});