JAVASCRIPTS FOR DISABLE BUTTON
Button.JS CODE
---------------
function addLoadEvent(func) {
if(typeof window.onload != 'function')
window.onload = func;
else {
var oldLoad = window.onload;
window.onload = function() {
if(oldLoad) oldLoad();
func();
}
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Button Disabler *
* Version 1.0 *
* Written by Josh Stodola *
* January 29, 2008 *
* *
* * * * * * * * * *CONFIGURATION OPTIONS* * * * * * * * * * * *
* *
* IsTesting (Boolean, defaults to false) *
* When this is set to true, the form will never submit. *
* Use this to confirm that the script is working. *
* *
* DisabledButtonValue (String, defaults to 'Please Wait') *
* This is the value to show on the button once disabled. *
* *
* HideNonSubmitButtons (Boolean, defaults to true) *
* When true, the script will also hide any reset buttons *
* or Javascript buttons it encounters. *
* *
* ShowHourglassCursor (Boolean, defaults to true) *
* When true, the script will change the cursor to the *
* OS-defined "waiting" symbol to indicate loading. *
* *
* StopLoopAtFirstTextbox (Boolean, defaults to false) *
* When true, the script will stop looping through input *
* elements once it encounters the first textbox. The loop *
* begins at the bottom of the form. This can be set to *
* true to make the script more efficient. *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
var ButtonDisabler = {
IsTesting: false,
DisabledButtonValue: 'Please Wait',
HideNonSubmitButtons: true,
ShowHourglassCursor: true,
StopLoopAtFirstTextbox: true,
IsCapable: (document.getElementById && document.createElement),
AddSubmitEvent: function(frm, func) {
if(typeof frm.onsubmit != 'function')
frm.onsubmit = func;
else {
var oldSub = frm.onsubmit;
frm.onsubmit = function() {
if(oldSub) {
if(oldSub())
return func();
else
return false;
}
else
return func();
}
}
},
LoadEventHandlers: function() {
if(ButtonDisabler.IsCapable) {
for(var i = 0; i < document.forms.length; i++) {
var frm = document.forms[i];
ButtonDisabler.AddSubmitEvent(frm, function() {
ButtonDisabler.DisableForm(frm);
return !ButtonDisabler.IsTesting;
});
}
}
},
DisableForm: function(frm) {
if(!frm) return;
var inputs = frm.getElementsByTagName('INPUT');
for(var j = inputs.length - 1; j >= 0; j--) {
var elem = inputs[j];
if(elem.type == 'submit' || elem.type == 'image') {
var btn = document.createElement('button');
btn.disabled = 'disabled';
btn.innerHTML = ButtonDisabler.DisabledButtonValue;
elem.parentNode.insertBefore(btn, elem);
elem.style.display = 'none';
}
if(elem.type == 'reset' || elem.type == 'button') {
if(ButtonDisabler.HideNonSubmitButtons)
elem.style.display = 'none';
}
if(elem.type == 'text' && ButtonDisabler.StopLoopAtFirstTextbox)
break;
}
if(ButtonDisabler.ShowHourglassCursor)
document.body.style.cursor = 'wait';
frm.onsubmit = function() {
return false;
}
}
};
addLoadEvent(ButtonDisabler.LoadEventHandlers);
SCRIPT.js
-------------
function validateForm(frm) {
if(!document.getElementById('radGender_0').checked
&& !document.getElementById('radGender_1').checked) {
alert('I know it\'s rude, but I must know your gender');
return false;
}
if(!document.getElementById('chkFood_0').checked
&& !document.getElementById('chkFood_1').checked
&& !document.getElementById('chkFood_2').checked
&& !document.getElementById('chkFood_3').checked) {
alert('What is your favorite food?');
return false;
}
return true;
}
ASPX PAGE
---------
<%@ Page Language="VB" %>
<script runat="server">
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
Threading.Thread.Sleep(5000)
End Sub
</script>
<!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">
<head runat="server">
<title>Disable Web Form Submit Button - ASP.NET Example</title>
<script type="text/javascript" src="script/button.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Disable Web Form Submit Button</h1>
<h2>Solution by Josh Stodola</h2>
<h3>ASP.NET Example</h3>
<form id="form1" runat="server" onsubmit="return validateForm(this);">
<div>
<label for="txtFirst">First Name</label>
</div>
<div>
<asp:TextBox ID="txtFirst" runat="server" MaxLength="50"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvFirst" runat="server" ErrorMessage="Enter your name" ControlToValidate="txtFirst" SetFocusOnError="true" EnableClientScript="true"></asp:RequiredFieldValidator>
</div>
<div>
<label for="txtLast">Last Name</label>
</div>
<div>
<asp:TextBox ID="txtLast" runat="server" MaxLength="50"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvLast" runat="server" ErrorMessage="Enter your name" ControlToValidate="txtLast" SetFocusOnError="true" EnableClientScript="true"></asp:RequiredFieldValidator>
</div>
<div>
<label for="txtAge">Age</label>
</div>
<div>
<asp:TextBox ID="txtAge" runat="server" MaxLength="2" Width="40"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAge" runat="server" ErrorMessage="Enter your age" ControlToValidate="txtAge" SetFocusOnError="true" EnableClientScript="true"></asp:RequiredFieldValidator>
</div>
<div>
<label for="radGenter">Gender</label>
</div>
<div>
<asp:RadioButtonList ID="radGender" runat="server">
<asp:ListItem Text="Male" Value="0" />
<asp:ListItem Text="Female" Value="1" />
</asp:RadioButtonList>
</div>
<div>
<label for="chkFood">Favorite Foods</label>
</div>
<div>
<asp:CheckBoxList ID="chkFood" runat="server">
<asp:ListItem Text="American" Value="A" />
<asp:ListItem Text="Chinese" Value="C" />
<asp:ListItem Text="Italian" Value="I" />
<asp:ListItem Text="Mexican" Value="M" />
</asp:CheckBoxList>
</div>
<div>
<label for="txtComments">Comments</label>
</div>
<div>
<asp:TextBox ID="txtComments" TextMode="multiLine" Rows="7" Columns="30" runat="server"></asp:TextBox>
</div>
<div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit Form" />
<input id="btnReset" type="reset" value="Clear Form" />
</div>
</form>
</body>
</html>
Tuesday, July 7, 2009
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment