¿Cuál es el mejor enfoque para deshabilitar un botón de envío (del lado del cliente)?

Detalles:¿Cuál es el mejor enfoque para deshabilitar un botón de envío (del lado del cliente)?

Sólo después de desactivar el usuario hace clic en el botón de enviar, pero antes de la publicación de vuelta al servidor
ASP.NET formularios web (.NET 1.1)
Prefiero jQuery (si cualquier biblioteca en absoluto)
debe estar habilitado si se vuelve a cargar de forma (es decir, tarjeta de crédito fallaron)

esto no es una necesidad que hago esto, pero si no hay una forma sencilla de hacerlo sin tener que cambiar demasiado , Lo haré. (Es decir, si no hay una solución simple, probablemente no lo hará, así que no se preocupe por la excavación demasiado profunda)

Fuente

2008-09-05 Macho Matt

Para todos los botones de envío, a través de jQuery , que sería:

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

O podría ser más útil hacerlo en el formulario de presentación:

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

Pero yo creo que se pueda da una mejor respuesta a tu pregunta si conocemos un poco más sobre el contexto.

Si se trata de una solicitud de Ajax, deberá asegurarse de habilitar los botones de envío nuevamente en caso de éxito o error.

Si este es un envío de formulario HTTP estándar (aparte de deshabilitar el botón con javascript) y está haciendo esto para protegerse de múltiples envíos de la misma forma, entonces debe tener algún tipo de control en el código que se ocupa de los datos enviados, porque desactivar un botón con javascript podría no evitar múltiples envíos.

Fuente

2008-09-05 16:05:04 SpoonMeiser

en jQuery:

$('#SubmitButtonID').click(function() { this.disabled = true; });

Fuente

2008-09-05 15:46:53 Jimmy

Hay tres formas de enviar un formulario que debe ser cubierto. Use las sugerencias de David McLaughlin y Jimmy. Uno deshabilitará el elemento de formulario de botón de envío, mientras que el otro desactivará el formulario de formulario HTML básico.

Para el tercero, estos no deshabilitarán Javascript para hacer un formulario.submit(). El método OnSubmit="return false" solo se aplica cuando un usuario hace clic en el botón Enviar o presiona Intro en un elemento de formulario de entrada. Las secuencias de comandos del lado del cliente deberán manejarse también.

Fuente

2008-09-05 16:05:08 spoulson

Supongo que no desea que presionen el botón de enviar más de una vez mientras se procesa el envío.

Mi enfoque ha sido simplemente ocultar el botón por completo y mostrar algún tipo de indicador de estado (gif animado, etc.) en su lugar.

Aquí hay un ejemplo muy artificial (es técnicamente en el prototipo, pero creo que una versión de jQuery sería muy similar):

<html> 
    <head> 
     <script type="text/javascript" src="include/js/prototype.js"></script> 

     <script type="text/javascript"> 
      function handleSubmit() 
      { 
       $('submit').hide(); 
       $('progressWheel').show(); 
       return true; 
      } 
     </script> 
    </head> 
    <body> 
     <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/> 
     <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/> 
    </body> 
</html>

Fuente

2008-09-05 16:08:22

+1 fue útil ya que necesitaba el valor del botón de envío publicado en la solicitud. Desactivar el botón significa que el valor no se publica. – ajbeaven

¿Qué tal

Código detrás:

btnContinue3. Atributos.Artículo ("onclick") = "disableSubmit()"

Javascript:

function disableSubmit() { 
    document.getElementById('btnContinue3').onclick = function() { 
     alert('Please only click once on the submit button!'); return false; 
    }; 
}

ésto no resuelve el problema de lo que ocurre si los tiempos de devolución de datos, pero aparte de eso funcionó para mí.

Fuente

2008-10-30 06:40:13

Lo que debe tener en cuenta es que no debe desactivar el botón antes de enviar el formulario. Si desactiva el botón mediante javascript en el evento OnClick, puede perder el envío del formulario.

Así que le sugiero que oculte el botón usando javascript colocando una imagen encima o moviendo el botón fuera del rango visible. Eso debería permitir que el formulario enviado proceda normalmente.

Fuente

2008-10-30 07:21:38

Se podría hacer algo como esto:

$('form').submit(function() { 
    $(this) 
     .find(":submit,:image")    // get all the submit buttons 
     .attr({ disabled : 'disabled' }) // disable them 
     .end()        // go back to this form 
     .submit(function() {    // change the onsubmit to always reject. 
      return false; 
     }) 
    ; 
});

Los beneficios de este:

Se trabajará con todas sus formas, con todos los métodos de presentación:
- clic en un presente elemento
- presionando enter, o
- llamando form.submit() de algún otro código
Se desactivará toda presentar elementos:
- <input type="submit"/>
- <button type="submit"></button>
- <input type="image" />
es muy corto.

Fuente

2008-10-30 07:57:29 nickf

¿Cuál es el mejor enfoque para deshabilitar un botón de envío (del lado del cliente)?

Respuesta

Cuestiones relacionadas