¿Por qué mi formulario no se publica cuando desactivo el botón Enviar para evitar hacer doble clic?

https://stackoverflow.com/questions/400616

03-07-2019
|

Pregunta

Al igual que cualquier otro desarrollador web en el planeta, tengo un problema con los usuarios que hacen doble clic en el botón Enviar en mis formularios. Tengo entendido que la forma convencional de manejar este problema es deshabilitar el botón inmediatamente después del primer clic, sin embargo, cuando hago esto, no se publica .

Investigué un poco sobre esto, Dios sabe que hay suficiente información, pero otras preguntas como Desactivar botón en el envío del formulario , deshabilitar el botón parece funcionar. El póster original de Deshabilitar botón después de enviar parece haber tenido el mismo problema que yo, pero no se menciona cómo / si lo resolvió.

Aquí hay un código sobre cómo repetirlo (probado en IE8 Beta2, pero tenía el mismo problema en IE7)

Mi código aspx

<%@ 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 código 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");
    }
}

Observe que cuando hace 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 estará deshabilitado (como se esperaba), pero nunca la devolución de datos.

¿QUÉ MIERDA ESPERO AQUÍ?

Gracias de antemano.

Solución

Creo que solo te falta esta etiqueta:

UseSubmitBehavior="false"

Pruébalo así:

<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"/>

Explicación

Otros consejos

fallen888 tiene razón, su enfoque no funciona entre navegadores. Yo uso este pequeño fragmento para evitar el doble- clic.

UseSubmitBehavior="false" convierte el botón de enviar al botón normal (<input type="button">). Si no desea que esto suceda, puede ocultar el botón de envío e insertar inmediatamente el botón deshabilitado en su lugar. Debido a que esto sucede tan rápido, se verá como un botón deshabilitado para el usuario. Los detalles se encuentran en el blog de Josh Stodola .

Ejemplo de código (jQuery):

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

" Deshabilitar " Los controles HTML no siempre producen un comportamiento consistente en todos los principales navegadores. Así que 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 haría es mover el botón fuera de la parte visible de la ventana cambiando el className del botón a una clase CSS que contenga lo siguiente:

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

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

Una imagen que parece un botón deshabilitado
O simplemente texto simple que dice " Por favor, espere ... "

Y esto se puede hacer de la misma manera pero a la inversa. Comience con el elemento oculto en la carga de la página y luego cambie a un className visible en el envío del formulario.

Utilizamos el siguiente script JQuery, para deshabilitar todos los botones (input type = submit and button), cuando se hace clic en un botón .

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

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

Este script podría extenderse fácilmente con una comprobación de Page_ClientValidate ().

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

Esta es la forma correcta y simple de hacer esto:

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

Cree un método auxiliar en su aplicación (por ejemplo, en un espacio de nombres de Utlity):

    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, simplemente puede llamar:

    Utility.PreventMultipleClicks(button1, page)

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

Lo que esto hace es simplemente establecer el controlador al hacer clic en: this.disabled = true

y luego agrega los botones al controlador de publicación posterior, por lo que obtenemos:

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

Esto no interrumpe el comportamiento predeterminado de la página y funciona en todos los navegadores como se esperaba.

¡Disfruta!

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

Asegúrese de que su función de javascript devuelve verdadero (o un valor que se evaluaría como booleano verdadero), 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
}

PARA USUARIOS JQUERY

Te encontrarás con todo tipo de problemas al intentar agregar javascript directamente al evento onClick en los botones ASP.NET cuando utilices escuchas de eventos jQuery.

Encontré que la mejor manera de deshabilitar los botones y hacer que la devolución de datos funcione es 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;
    });

Donde ValidateForm es su función de validación personalizada que devuelve verdadero o falso si su formulario valida el lado del cliente.

Y buttonID es la identificación de su botón, como '# button1'

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow