¿Cómo deshabilitar el botón Enviar después de hacer clic?


13

Drupal no parece evitar envíos de formularios múltiples, incluso en páginas de nodos. Este control de calidad sugiere arreglarlo en el lado del servidor.

¿Cómo podría deshabilitar el botón Enviar después de hacer clic?

¿Alguna otra solución?


¿La API de formulario de Drupal no impide el envío doble gracias a su verificación de valor de token de formulario? ¿No puede enviar un formulario con el mismo token dos veces?
Johnathan Elmore

Respuestas:


12

Solo está en desarrollo, pero el módulo Hide Submit haría el truco. Una de las características es:

Ocultar (o deshabilitar) el botón Enviar después de hacer clic

Lo acabo de instalar en un sitio de desarrollo y parece funcionar bien para los formularios de agregar nodo; Cuando hace clic en el botón Enviar, se oculta y se reemplaza con una imagen de carga y un mensaje "Espere ...", antes de que se envíe el formulario. Sin embargo, no lo he probado en ninguna otra forma.


¿Alguna idea sobre cómo hacer que el módulo hide submit funcione en formularios en sus propios módulos personalizados? Esperaba que fuera en todo el sitio, pero ese no parece ser el caso.
user785179

@ user785179 mire cómo se implementa hook_form_alter(): si está usando hook_form_FORMID_alter(), cámbielo a genérico hook_form_alter(). Si es genérico hook_form_alter()con if dentro, agregue algunos oren esto if.
Mołot

Tenga cuidado con esta solución: el módulo de envío oculto interrumpe las cargas de ajax, causa problemas de autocompletado y, en algunos casos, hace que el botón de envío no haga nada en el primer clic. Solo tuve que desinstalarlo de un sitio.
jenlampton

@Jen Strange, lo he estado usando en docenas de sitios durante años sin ver ningún problema como ese. Quizás tenga otro módulo instalado que interfiera con él
Clive

10

Aquí hay una solución para Drupal 7. El código es una versión simplificada del módulo Hide Submit.

Este código funciona bien incluso con los botones "Agregar más" y los formularios AJAX.

Drupal.behaviors.hideSubmitButton = {
  attach: function(context) {
    $('form.node-form', context).once('hideSubmitButton', function () {
      var $form = $(this);
      $form.find('input.form-submit').click(function (e) {
        var el = $(this);
        el.after('<input type="hidden" name="' + el.attr('name') + '" value="' + el.attr('value') + '" />');
        return true;
      });
      $form.submit(function (e) {
        if (!e.isPropagationStopped()) {
          $('input.form-submit', $(this)).attr('disabled', 'disabled');
          return true;
        }  
      });
    });
  }
};

Quiero implementar esto en tema administrativo. Hizo un archivo sitename.js y copié el código anterior en él. No está trabajando. ¿Debo ajustar las cosas?
Justme

@Justme, ¿dónde pusiste tu archivo sitename.js? Si está en un módulo o subtema, deberá agregarlo al archivo .info para que se cargue o llamar a drupal_add_js () en otro lugar para obtenerlo en la página. ¿Puedes ver que se agrega en la fuente de la página?
jenlampton

Thxs lo resolvió. No sabía que esto debería estar entre: (function ($) {and}) (jQuery); en el archivo js. Funciona como un sharm !!
Justme

0

La forma más fácil es hacer una solución javascript basada en temas para deshabilitar el botón después del envío del formulario. En el archivo theme.info, coloque su archivo javascript para que la api del tema pueda cargarlo.

scripts[] = js/themename-script.js

Ahora, en themename-script.js, agregue a la sección Drupal.behaviors.themename para que tenga el siguiente aspecto:

Drupal.behaviors.themename = function()
{
  $('.node-form').submit(function(){
    $('#edit-submit').attr("disabled", "disabled");
    $('#edit-preview').attr("disabled", "disabled");
  });
}

Entonces el flujo es el siguiente:

  1. Theme carga el javascript
  2. Drupal.behaviors.themename se activa al cargar la página
  3. En el envío de formulario del formulario de agregar nodo (clase basada en el ejemplo anterior, se puede personalizar en el tipo de formulario) deshabilite los botones de envío (enviar y previsualizar) para que no se pueda volver a hacer clic

Estoy seguro de que si hay algún procesamiento ajax, lo anterior podría ser peligroso y el envío del formulario nunca podría volver a realizarse si se detecta un error en la validación form_api, así que pruébelo y personalícelo para satisfacer sus necesidades. Deshabilité ambos botones, ya que aún podía hacer clic en el botón de vista previa mientras el botón de envío estaba deshabilitado. Obviamente su kilometraje puede variar.


2
Estás usando el viejo Drupal.behaviorsestilo de declaración; no funcionará para Drupal 7. Tendría que serlo Drupal.behaviors.themename = { attach: function (context, settings) { // .... Consulte Administración de JavaScript en Drupal 7 para obtener más información
Clive

Estilo de declaración arreglado
Eugene Fidelin

¿Qué valores se deben reemplazar de este script 'node-form'?
pal4life

Traté de hacer que esto funcionara en el tema administrativo pero no tuve suerte. Cambie el nombre de themename con adminimal y copie el código completo en sitename.js y agregue esto al archivo de información del tema. Aún así, recibo fácilmente más envíos del mismo formulario.
Justme
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.