Disable la un buton dupa click

M-am întâlnit cu următoarea situaţie: după completarea datelor unui form, datorită conexiunii la internet lente, utilizatorii grăbiţi au apăsat de mai multe ori butonul de adăugare a datelor din form astfel datele au fost duplicate.

Buton pe disable şi trimiterea datelor spre server.

Vom folosi javascript pentru această operaţie. Codul javascript este următorul:

<script type="text/javascript" language="javascript">
function disable_buton() {

document.getElementById("trimite_date").disabled = "disabled";
document.getElementById("trimite_date").value = "Aşteaptă...";
__doPostBack("trimite_date", "OnClick");

}
</script>

Iar codul HMTL este

<div style="width:300px;float:left;border-style:solid;border-color:Black;border-width:1px;padding:10px;">

Nume: <asp:TextBox ID="nume" runat="server"></asp:TextBox><br />
Vârstă: <asp:TextBox ID="varsta" runat="server" Width="30px"></asp:TextBox><br />
Ocupaţie: <asp:TextBox ID="ocupatie" runat="server"></asp:TextBox><br /><br />

<asp:Button ID="trimite_date" runat="server" Text="Apasă butonul"
onclick="trimite_date_Click" UseSubmitBehavior="False" OnClientClick="disable_buton();" />

<br />
<br />
<asp:Label ID="Label1" runat="server" ForeColor="#999999" Text="Rezultat..."></asp:Label>

</div>

În codul javascript, butonul cu id-ul "trimite date" este pus pe disable, este schimbat text-ul apoi este executată funcţia __dopostback() (cu două semne "_" in faţa numelui). Această funcţie este responsabilă cu trimiterea datelor spre server. Acceptă 2 parametri, primul este id-ul controlului care a iniţiat trimiterea datelor, iar al 2-lea reprezintă o informaţie suplimentară cum ar fi tipul evenimentului asociat controlului.

În codul HTML butonul "trimite_date" are setat atributul UseSubmitBehavior="False" lucru important pentru funcţionarea bună a script-ului.

În cazul unei erori de validare în directiva page se setează atributul EnableEventValidation="false"

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

Descarcă acest exemplu