javascript - formulario - Desactive el botón asp.net después de hacer clic para evitar hacer doble clic

evitar reenvio de formulario javascript

Question

Tengo un botón ASP.NET que necesito deshabilitar después de que el usuario hace clic para evitar hacer doble clic. Una vez que se completa el envío, debe habilitarse de nuevo. Puede alguien ayudarme con esto?

Answer 1

Aquí hay una solución que funciona para el objeto de botón asp.net. En la parte delantera, agregue estos atributos a su asp: definición del botón:

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

En la parte posterior, en la llamada al método del controlador de eventos click, agregue este código al final (preferiblemente en un bloque finally)

myButton.Enabled = true;

Answer 2

Compruebe este enlace, la forma más sencilla y no deshabilita las validaciones.

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

Si tienes, por ej.

  <form id="form1" runat="server">
      <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />
  </form>

Entonces puedes usar

  <script type = "text/javascript">
  function DisableButton() {
      document.getElementById("<%=Button1.ClientID %>").disabled = true;
  }
  window.onbeforeunload = DisableButton;
  </script>

Para deshabilitar el botón si la validación ha sido exitosa y luego , al igual que la página está haciendo una devolución de datos del servidor.

Answer 3

Deshabilite el botón en el evento OnClick y vuelva a habilitarlo en el controlador de eventos de devolución de llamada de AJAX. Así es como lo hago con jQuery.

<script>
$(document).ready(function() {

    $(''#buttonId'').click(function() {
         $(this).attr(''disabled'', ''disabled'');
         callAjax();
    });

});

function callAjax()
{
    $.ajax({
      url: ''ajax/test.html'',
      success: function(data) {
         //enable button
         $(''#buttonId'').removeAttr(''disabled'');

      }
    });
}
</script>

Answer 4

Esta solución funciona si está utilizando validadores asp.net:

<script language="javascript" type="text/javascript">
function disableButton(sender,group)
{
    Page_ClientValidate(group);
    if (Page_IsValid)
    {
        sender.disabled = "disabled";
        __doPostBack(sender.name, '''');
    }
}</script>

y cambia el botón:

<asp:Button runat="server" ID="btnSendMessage" Text="Send" OnClick="btnSendMessage_OnClick" OnClientClick="disableButton(this,''theValidationGroup'')" CausesValidation="true" ValidationGroup="theValidationGroup" />

Answer 5

Esto funciona con un botón html regular.

    <input id="Button1"
    onclick="this.disabled=''true'';" type="button"
    value="Submit" name="Button1"
    runat="server" onserverclick="Button1_Click">

El botón está deshabilitado hasta que finalice la devolución de datos, evitando hacer doble clic.

Answer 6

He encontrado this y funciona:

btnSave.Attributes.Add(
    "onclick", 
    "this.disabled = true;" + ClientScript.GetPostBackEventReference(btnSave, null) + ";");

Answer 7

Me gusta desactivar el botón y llamar a una devolución de datos, de esta manera, el código subyacente se ejecuta después de que el botón esté desactivado.

así es como me aferro del código:

btnProcess.Attributes.Add("onclick", " this.disabled = true; __doPostBack(''btnProcess'', ''''); return false;")

Luego vuelve a habilitar el botón en el código detrás:

btnProcess.Enabled = True

Answer 8

Prueba esto, funcionó para mí

<asp:Button ID="button" runat="server" CssClass="normalButton" 
Text="Button"  OnClick="Button_Click" ClientIDMode="Static" 
OnClientClick="this.disabled = true; setTimeout(''enableButton()'', 1500);" 
UseSubmitBehavior="False"/>  

Entonces

<script type="text/javascript">
function enableButton() {
document.getElementById(''button'').disabled = false;
}
</script>

Puede ajustar el tiempo de demora en "setTimeout"

Answer 9

Puede usar el evento onclick lado del cliente para hacer eso:

yourButton.Attributes.Add("onclick", "this.disabled=true;");

Answer 10

Puedes hacer esto con javascript. en su etiqueta de form , onsubmit="javascript:this.getElementById("submitButton").disabled=''true'';"

Answer 11

Si a alguien le importa, encontré esta publicación inicialmente, pero uso la compilación de ASP.NET en Validación en la página. Las soluciones funcionan, pero deshabilite el botón aunque haya sido validado. Puede usar este código siguiente para hacerlo de modo que solo deshabilite el botón si pasa la validación de página.

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" OnClientClick=" if ( Page_ClientValidate() ) { this.value=''Submitting..''; this.disabled=true; }" UseSubmitBehavior="false" />

Answer 12

Si desea evitar el doble clic debido a un código del lado del servidor de respuesta lenta, entonces esto funciona bien:

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

Intente poner un Threading.Thread.Sleep (5000) en el evento _Click () en el servidor y verá que el botón está desactivado por el tiempo que el servidor está procesando el evento click.

¡No es necesario que el código del servidor vuelva a habilitar el botón!

Answer 13

Solo necesita agregar 2 atributos para el botón asp:

OnClientClick="this.disabled=''true'';"  UseSubmitBehavior="false"

p.ej

<asp:Button ID="Button1" runat="server" Text="TEST" OnClientClick="this.disabled=''true'';"  UseSubmitBehavior="false" CssClass="button-content btnwidth" OnClick="ServerSideMethod_Click"  />

Para más detalles:

https://bytes.com/topic/asp-net/answers/918280-disable-button-click-prevent-multiple-postbacks

Answer 14

ninguna de las soluciones anteriores funciona para mí y finalmente encontré la manera más fácil de hacerlo.

button1.enabled = false 

cuando necesitas habilitar solo hazlo.

button1.enabled = true

Answer 15

usando jQuery:

$(''form'').submit(function(){
    $('':submit'', this).click(function() {
        return false;
    });
});

Answer 16

<asp:Button ID="btnSend" runat="server" Text="Submit"  OnClick="Button_Click"/>

        <script type = "text/javascript">
            function DisableButton()
            {
                document.getElementById("<%=btnSend.ClientID %>").disabled = true;
            }
            window.onbeforeunload = DisableButton;
        </script>

Answer 17

<script type = "text/javascript">
function DisableButtons() {
    var inputs = document.getElementsByTagName("INPUT");
    for (var i in inputs) {
        if (inputs[i].type == "button" || inputs[i].type == "submit") {
            inputs[i].disabled = true;
        }
    }
}
window.onbeforeunload = DisableButtons;
</script>