8

Al igual que cualquier otro desarrollador web en el planeta, tengo un problema con los usuarios al hacer doble clic en el botón Enviar en mis formularios. Según entiendo, la forma convencional de manejar este problema es desactivar el botón inmediatamente después del primer clic; sin embargo, cuando lo hago, no se publica.¿Por qué mi formulario no se publica cuando desactivo el botón de enviar para evitar hacer doble clic?

Hice algunas investigaciones sobre esto, Dios sabe que hay suficiente información, pero otras preguntas como Disable button on form submission, deshabilitar el botón parece funcionar. El póster original de Disable button after submit parece haber tenido el mismo problema que yo, pero no se menciona cómo/si lo resolvió.

Aquí hay algo de código en la forma en que lo repita (probado en IE8 Beta 2, pero tuvo el mismo problema en IE7)

Mi código aspx código

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<script language="javascript" type="text/javascript"> 
    function btn_onClick() 
    { 
     var chk = document.getElementById("chk"); 
     if(chk.checked) 
     { 
      var btn = document.getElementById("btn"); 
      btn.disabled = true; 
     } 
    } 
</script> 
<body> 
    <form id="form1" runat="server"> 
     <asp:Literal ID="lit" Text="--:--:--" runat="server" /> 
     <br /> 
     <asp:Button ID="btn" Text="Submit" runat="server" /> 
     <br /> 
     <input type="checkbox" id="chk" />Disable button on first click 
    </form> 
</body> 
</html> 

Mi cs

using System; 

public partial class _Default : System.Web.UI.Page 
{ 
    protected override void OnInit(EventArgs e) 
    { 
     base.OnInit(e); 
     btn.Click += new EventHandler(btn_Click); 
     btn.OnClientClick = "btn_onClick();"; 
    } 

    void btn_Click(object sender, EventArgs e) 
    { 
     lit.Text = DateTime.Now.ToString("HH:mm:ss"); 
    } 
} 

Aviso que cuando haces clic en el botón, se produce una devolución de datos y se actualiza la hora. Pero cuando marca la casilla de verificación, la próxima vez que haga clic en el botón, el botón se desactivará (como se esperaba), pero nunca lo hará.

¿QUÉ HECK ME FALTA AQUÍ?

Gracias de antemano.

Respuesta

9

Creo que sólo se está perdiendo esta etiqueta:

UseSubmitBehavior="false" 

Trate de esta manera:

<asp:Button ID="btnUpdate" runat="server" UseSubmitBehavior="false" OnClientClick="if(Page_ClientValidate()) { this.disabled = true; } else {return false;}" Text = "Update" CssClass="button" OnClick="btnUpdate_Click" ValidationGroup="vgNew"/> 

Explanation

+0

Gracias, esto funciona. Pero cuando UseSubmitBehaviour desactiva la publicación del formulario del navegador predeterminado y utiliza la publicación del formulario ASP.NET, estoy algo nervioso acerca de una técnica específica de MS en lugar de la forma convencional de hacer las cosas. ¿Sabes si hay alguna repercusión al usar esto? THX otra vez –

+0

ninguno que he visto. Me alegro de ayudar – Echostorm

+0

Esto ha funcionado perfectamente en mis soluciones. Gracias Echostorm. – jwalkerjr

4

"Deshabilitar" controles HTML no siempre produce un comportamiento constante en todos los navegadores principales. Por lo tanto, trato de evitar hacer eso en el lado del cliente, porque (trabajando con el modelo ASP.NET) necesita hacer un seguimiento del estado del elemento en el cliente y el servidor en ese caso.

lo que he hecho es botón de moverse fuera de la parte visible de la ventana por el cambio className del botón a una clase CSS que contiene lo siguiente:

.hiddenButton 
{ 
    position: absolute; 
    top: -1000px; 
    left: -1000px; 
} 

Ahora, qué poner en lugar del botón ?

  1. Cualquiera de una imagen que se parece a un botón desactivado
  2. o texto simplemente que dice "Por favor, espere ..."

Y esto se puede hacer de la misma manera pero a la inversa. Comience con el elemento que se oculta al cargar la página y luego cambie a un className visible al enviar el formulario.

0

Para fines de depuración, ¿qué sucede si coloca una cláusula else en contra de if (chk.checked)?

+0

Hola Neil, no estoy seguro de que te sigo, pero si usted está sugiriendo que volver a habilitar el botón, no va a funcionar con un simple más, ya que una vez que está deshabilitado no se puede hacer clic. Tendría que crear un evento de clic de casilla de verificación para reactivarlo, y quería mantener las cosas lo más simples posible. ¿Es eso lo que querías decir? –

+0

No, me pregunto si la razón por la que no funciona es porque la chk, marcada, puede no ser verdadera, por lo que el botón no está desactivado. –

+0

Oh, está bien. No, definitivamente desactiva el botón, pero luego no envía la publicación. Gracias de nuevo. –

6

fallen888 tiene razón, su enfoque no funciona en todos los navegadores. Yo uso this little snippet para evitar hacer doble clic.

1
document.getElementById('form1').onsubmit = function() { 
    document.getElementById('btn').disabled = true; 
}; 
+0

Esto no funciona y es el código que el usuario estaba pidiendo corregir. -1 – Hogan

+0

no, esto está en el envío del formulario en lugar de hacer clic en el botón. De esta forma, PRESENTARÁ el formulario. Pero gracias por el voto a la baja –

0

Asegúrese de que la función de JavaScript devuelve verdadero (o un valor que evaluaría a boolean true), de lo contrario, el formulario no se enviará.

function btn_click() 
var chk = document.getElementById("chk"); 
    if(chk.checked) 
    { 
      var btn = document.getElementById("btn"); 
      btn.disabled = true; 
      return true; //this enables the controls action to propagate 
    } 
    else return false; //this prevents it from propagating 
} 
+0

Gracias tj111, pero no creo que el evento de borboteo esté siendo interrumpido, ya que lo hace hasta que compruebo el botón. –

+0

Me encontré con el mismo problema y mi primer intento fue esta solución. Sin embargo, no funcionó en IE. Tenía que ir con la solución que Vatos explicó, es decir, enviar el formulario en lugar de hacer clic en el botón. – OregonGhost

5

UseSubmitBehavior="false" convertidos presentar un botón a la normalidad (<input type="button">). Si no desea que esto suceda, puede ocultar el botón Enviar e inmediatamente insertar el botón desactivado en su lugar. Debido a que esto sucede tan rápido, se verá como que el botón se deshabilita para el usuario. Los detalles están en the blog of Josh Stodola.

ejemplo de código (jQuery):

$("#<%= btnSubmit.ClientID %>").click(function() 
{ 
    $(this) 
    .hide() 
    .after('<input type="button" value="Please Wait..." disabled="disabled" />'); 
}); 
+0

Esta solución funcionó bien para nosotros ... especialmente cuando necesita que el valor de entrada siga incluido en el formulario. ¡Gracias! – bytebender

+0

Esta es la única solución de trabajo. Stupid WebForms. – Gaui

2

Utilizamos el siguiente script jQuery, para desactivar todos los botones (input type = someterse y botón), cuando se hace clic en un botón .

Acabamos de incluir la secuencia de comandos en un archivo JavaScript global, por lo que no tenemos que recordar nada al crear botones nuevos.

$(document).ready(function() { 
    $(":button,:submit").bind("click", function() { 
     setTimeout(function() { 
      $(":button,:submit").attr("disabled", "true"); 
     }, 0); 
    }); 
}); 

Este script se puede ampliar fácilmente con una comprobación de Page_ClientValidate().

1

Ésta es la manera correcta y simple de hacer esto:

Funciona en todos los navegadores (a diferencia de la solución aceptada arriba).

Crear un método de ayuda en la aplicación (por ejemplo en un programa Utilidad Espacio de nombres):

Public Shared Sub PreventMultipleClicks(ByRef button As System.Web.UI.WebControls.Button, ByRef page As System.Web.UI.Page) 
     button.Attributes.Add("onclick", "this.disabled=true;" + page.ClientScript.GetPostBackEventReference(button, String.Empty).ToString) 
    End Sub 

Ahora desde el código detrás de cada una de sus páginas web sólo tiene que llamar:

Utility.PreventMultipleClicks(button1, page) 

donde button1 es el botón que desea para evitar clics múltiples.

Lo que esto hace es simplemente ajusta el controlador on Pulse para: this.disabled = true

y luego añade los botones propia parte posterior del poste guía, por lo que tenemos:

onclick = "this.disabled = verdadera "; __ doPostBack ('ID ID $', '');".

Esto no rompe el comportamiento por defecto de la página y funciona en todos los navegadores como se esperaba

disfrutar!

+0

agregar javascript a los botones enHaga clic en el html debe evitarse –

+0

Esto es muy bueno. – Graham

0

PARA USUARIOS JQUERY

Va a meterse en todo tipo de problemas al tratar de añadir javascript directamente al evento de clic en los botones de ASP.NET al utilizar detectores de eventos de jQuery.

He encontrado la mejor manera de desactivar los botones y obtener la devolución de datos para el trabajo era hacer algo como esto:

$(buttonID).bind('click', function (e) { 

     if (ValidateForm(e)) { 

      //client side validation ok! 
      //disable the button: 
      $(buttonID).attr("disabled", true); 

      //force a postback: 
      try { 
       __doPostBack($(buttonID).attr("name"), ""); 
       return true; 
      } catch (err) { 
       return true; 
      } 

     } 
     //client side validation failed! 
     return false; 
    }); 

Dónde ValidateForm es su función de validación personalizada que devuelve verdadero o falso si sus formularios sean validados lado del cliente.

Y buttonID es el id del botón como '# botón1'

Cuestiones relacionadas