jknj72
asked on
Javascript disable buttons
I have a co-worker who asked for some help. He has a page with a bunch of buttons on on it. When a certain button is clicked he wants every button on the page to be disabled as to not interrupt the process of the first button being clicked. When the process completes it causes a postback and enables everything back, which is what we want. Is there a good way of disabling all the buttons on a page from a click of a button. I had given him the following code and he hasnt tried it yet but I wanted to do a little more research in case it doesnt work.
So I have the following code in my program that disables a button from a FileUpload control onchange event and thought it would work for his program..
markup:
and the script looks like this:
If this works for him then what I need to do is use the SetDisabled() to disable every button on the page.I was thinking on using a class for every button and use javascript or jquery to identify all the classes that have a certain name and disable them that way I just dont know the syntax.
Any help would be appreciated
So I have the following code in my program that disables a button from a FileUpload control onchange event and thought it would work for his program..
markup:
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="textbox" Width="228px" Height="25px" onchange="SetEnabled(); return false;" ></asp:FileUpload>and the script looks like this:
function SetDisabled() {
var myButton = document.getElementById('UploadButton');
$(myButton).attr('disabled', 'disabled');
}
function SetEnabled() {
var myButton = document.getElementById('UploadButton');
$(myButton).removeAttr('disabled');
}If this works for him then what I need to do is use the SetDisabled() to disable every button on the page.I was thinking on using a class for every button and use javascript or jquery to identify all the classes that have a certain name and disable them that way I just dont know the syntax.
Any help would be appreciated
ASKER
"This is not the most efficient solution, and the use of .attr() is incorrect"
Well its funny you say that because I notcied I couldnt get the SetDisabled function to work(so I am setting the Enabled=False in code behind) but I am using the SetEnabled and that does work.
"If you are using jQuery then use jQuery"
I am gonna try and use this because I dont have his program available to send you the HTML. So I will check back after I try this
"If you are going to use plain JavaScript then use just plain JavaScript"
I have been researching this and was under the impression that there is no disabled property so that wouldnt work? But I will check it out.
Thanks so much for your help and I will get back to you when I figure out the best solution...
Well its funny you say that because I notcied I couldnt get the SetDisabled function to work(so I am setting the Enabled=False in code behind) but I am using the SetEnabled and that does work.
"If you are using jQuery then use jQuery"
I am gonna try and use this because I dont have his program available to send you the HTML. So I will check back after I try this
"If you are going to use plain JavaScript then use just plain JavaScript"
I have been researching this and was under the impression that there is no disabled property so that wouldnt work? But I will check it out.
Thanks so much for your help and I will get back to you when I figure out the best solution...
Well its funny you say that because I notcied I couldnt get the SetDisabled function to work(so I am setting the Enabled=False in code behind) but I am using the SetEnabled and that does work.It will work but it is not the right way of doing it. The attr refers to the actual attribute value on the element which does not have to exist for the disabled property to be set. For consistent results you should always use .prop()
If you are using jQuery then use jQueryWhat I meant here was you are mixing JavaScript and jQuery when you don't need to - this is not quite acurate as jQuery is JavaScript but what I mean is you are doing this
document.getElementById('UploadButton');$('#UploadButton');I have been researching this and was under the impression that there is no disabled property so that wouldnt work?There most definitely is
Try it here
Works back to IE6
ASKER
I want to use jQuery because that seems to be the most bang for your buck. I have set the OnClientClick=SetDisabled(
function SetDisabled() {
// WE USE .prop() NOT attr() TO SET PROPERTIES
$('#btnBuildTable').click(
$('.buttons').prop({ disabled: true });
});
Now I will assign a class = "buttons" and that should work correct? Im will try this now but if you see anything out of place please let me know.
Thanks again
function SetDisabled() {
// WE USE .prop() NOT attr() TO SET PROPERTIES
$('#btnBuildTable').click(
$('.buttons').prop({ disabled: true });
});
Now I will assign a class = "buttons" and that should work correct? Im will try this now but if you see anything out of place please let me know.
Thanks again
ASKER
it didnt work for me. I set the folowing on my target button
<asp:Button ID="btnBuildTable" runat="server" Text="Refresh Policy Errors Table on UAT Test" OnClientClick="SetDisabled
and for each button on the form I set this
<asp:Button ID="btnSubID" runat="server" Text="Get Errors in this Submission" BackColor="White" Width="220px" CssClass="buttons" />
I put an alert in the function and it hits it so I know its getting there, its just not working. Do you know what Im doing wrong?
<asp:Button ID="btnBuildTable" runat="server" Text="Refresh Policy Errors Table on UAT Test" OnClientClick="SetDisabled
and for each button on the form I set this
<asp:Button ID="btnSubID" runat="server" Text="Get Errors in this Submission" BackColor="White" Width="220px" CssClass="buttons" />
I put an alert in the function and it hits it so I know its getting there, its just not working. Do you know what Im doing wrong?
Before we look at how to solve that problem let's look at your SetDisabled function as you need to do some house keeping there.
There are two primary ways in which we assign an event handler to an event.
1. In the element itself with an onclick attribute
2. Using script to bind an event handler to target elements using a selector.
In your code you have mixed the two. You want to do either this
Option 1
Or we can do this
Option 2
And then use this script
For information purposes only
Now back to your code and why it is not working. ASP generates its own ID's which are not the same as the ID of the control. To get access to the ID that your script uses you need to use the ClientID of the control.
NB This assumes that where your jQuery code is output it has sightof your control otherwise this will not work
So where you have #btnBuildTable in your jQuery you would need to replace this with <%= btnBuildTable.ClientID%>
However given the two options we have looked at above - you don't need the ID - I present the above for information purposes only
There are two primary ways in which we assign an event handler to an event.
1. In the element itself with an onclick attribute
2. Using script to bind an event handler to target elements using a selector.
In your code you have mixed the two. You want to do either this
Option 1
<asp:Button ID="btnBuildTable" runat="server" Text="Refresh Policy Errors Table on UAT Test" OnClientClick="SetDisabled();"/>function SetDisabled() {
$('.buttons').prop({ disabled: true });
});Or we can do this
Option 2
<asp:Button ID="btnBuildTable" runat="server" Text="Refresh Policy Errors Table on UAT Test" CssClass="masterButton"/>And then use this script
$('.masterButton').click(function() {
$('.buttons').prop({ disabled: true });
});For information purposes only
Now back to your code and why it is not working. ASP generates its own ID's which are not the same as the ID of the control. To get access to the ID that your script uses you need to use the ClientID of the control.
NB This assumes that where your jQuery code is output it has sightof your control otherwise this will not work
So where you have #btnBuildTable in your jQuery you would need to replace this with <%= btnBuildTable.ClientID%>
However given the two options we have looked at above - you don't need the ID - I present the above for information purposes only
ASKER
Ok I will try this first thing in the morning and thanks for the explanation. Im new to this so I appreciate it.
Instead of disabling all the button, why do you use a progress bar to block the whole page?
ASKER
Lakshmi - Im not sure this is not my app I am just trying to help a coworker.
Julian - I am implementing this now. One last question....Should I add CssClass="buttons" to all the buttons I want disabled?
I currently have
<script type="text/javascript" language="javascript">
function SetDisabled() {
$('.masterButton').click(f
$('.buttons').prop({ disabled: true });
});
}
</script>
<asp:Button ID="btnBuildTable" runat="server" Text="Refresh Policy Errors Table on UAT Test" UseSubmitBehavior="true" CssClass="masterButton"/>
Heres the question......
<asp:Button ID="btnSubID" runat="server" Text="Get Errors in this Submission" BackColor="White" Width="220px" UseSubmitBehavior="False" CssClass="buttons" />
Thanks again for your help
Julian - I am implementing this now. One last question....Should I add CssClass="buttons" to all the buttons I want disabled?
I currently have
<script type="text/javascript" language="javascript">
function SetDisabled() {
$('.masterButton').click(f
$('.buttons').prop({ disabled: true });
});
}
</script>
<asp:Button ID="btnBuildTable" runat="server" Text="Refresh Policy Errors Table on UAT Test" UseSubmitBehavior="true" CssClass="masterButton"/>
Heres the question......
<asp:Button ID="btnSubID" runat="server" Text="Get Errors in this Submission" BackColor="White" Width="220px" UseSubmitBehavior="False" CssClass="buttons" />
Thanks again for your help
Should I add CssClass="buttons" to all the buttons I want disabled?
Yes
I currently havePlease see my earlier post - you are duplicating code with the above - it will work but it is not right.
<script type="text/javascript" language="javascript">
function SetDisabled() {
$('.masterButton').click(function () {
$('.buttons').prop({ disabled: true });
});
}
</script>
What this code is doing is adding an event handler to the masterButton element - it does not do anything other than that - so the first time you click on the masterButton it will do nothing - after that every time you click the buttons will be disabled AND the event handler will be attached AGAIN - please read my earlier post on how to get around this.
ASKER
I apologize I did read your post but will have to take another look at it
ASKER
I took out the function SetDisabled and have this script now
and in the master button I have this
and every other button I have this
I run this and nothing happens so I am obviously messing up somewhere again Im just not sure where
<script type="text/javascript" language="javascript">
$('.masterButton').click(function () {
$('.buttons').prop({ disabled: true });
});
</script>and in the master button I have this
<asp:Button ID="btnBuildTable" runat="server" Text="Refresh Policy Errors Table on UAT Test" CssClass="masterButton"/> and every other button I have this
<asp:Button ID="btnSubID" runat="server" Text="Get Errors in this Submission" BackColor="White" Width="220px" CssClass="buttons" /> I run this and nothing happens so I am obviously messing up somewhere again Im just not sure where
Ok some more minor housekeeping (not impactive just convention). Script tags no longer require the type / language attributes now we just do this
No in relation to the error.
1. I am going to assume you have included the jQuery library on the page - if not that is your problem
2. When it comes to JavaScript / jQuery programming, the console (F12) is your friend. Check it for errors. If you have a JS error on the page it could stop the script from running.
3. Show us the generated HTML so we can see what the page looks like. .Net mangles things between code behind and HTML in the browser we need to check that what we think is in the page is actually there.
Do a view source on the page
Copy out the HTML with the .masterButtons button and the .buttons buttons
Copy out the jQuery bit
Paste the above here
<script>
...
</script>No in relation to the error.
1. I am going to assume you have included the jQuery library on the page - if not that is your problem
2. When it comes to JavaScript / jQuery programming, the console (F12) is your friend. Check it for errors. If you have a JS error on the page it could stop the script from running.
3. Show us the generated HTML so we can see what the page looks like. .Net mangles things between code behind and HTML in the browser we need to check that what we think is in the page is actually there.
Do a view source on the page
Copy out the HTML with the .masterButtons button and the .buttons buttons
Copy out the jQuery bit
Paste the above here
ASKER
Ok here is the View Source generated code...I just copied everything...Buttons have class="buttons" and the main button has class="masterButton"
Thanks again
Thanks again
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script type="text/javascript">
$('.masterButton').click(function () {
$('.buttons').prop({ disabled: true });
});
</script>
</head>
<body>
<form method="post" action="./devDataQuality.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjM1NjU3ODQwD2QWAgIDD2QWBAIpDzwrABECARAWABYAFgAMFCsAAGQCOw9kFgJmD2QWBAIBDxYEHgVTdHlsZQUNZGlzcGxheTpibG9jax4HVmlzaWJsZWhkAgMPFgQfAAUNZGlzcGxheTpibG9jax8BaGQYAQULZ3JkQ29ub0xpc3QPZ2RbNCfU1GWsIEmL2nfOMDczQfqw5LiaO9gBzSIXkexcLw==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=zgp6OpuzUq02VmAJj34H8GciwctuEACM6wToKiJCUAzvq3m2ZQxXC3tvOYQs7ksC2DKfHjwrXGoShhr--LHLgw5sJ3iIeJUGeYFIHKHIdL41&t=636261572160000000" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=rrzaqnxFdkUdtG79hG0fWKnBXIHMtDf6ngciJWVqxySSoF8K1WR6bllBPG5izg1Pr7XfuX2qhy5lZFd2_DRjGUJmdm89PVNW1-G5Gr3jdA6LtGC-NATa69hOVbBNgbI8vVPL6z4OO11yC9J84uRbnnqvUGvDwlCkuGQB28vZvac1&t=64280561" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=CYGnL-6zrB2b5RRETvg_B9M09zRhpj29Ok-PQ_dji0pNKdbeSRXjuFmYNElwbQ4VHmPI9zvEem4H_rIU2pyX65eyj1bmV1y0p5-EzLkFL_taUNWSVjIhhnfauC0cB4o1gB4WjgvsvAg74e2WHEeNpKpFy5EZFXRoVzZ50B6-q8jUVYzDuNg3ZUyCUYCCwL0o0&t=247db424" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=lzrCuAlAQQ25ZU3_qv9IjwMRZfFhweDjhF5LVoNMimYb52FxomId8byTRERWmTwTClqnWgAOdP1JocHe6O9xB9tf7l86ivHLIA3FUmzcOJDO_2BKVo_B_U7dCFzF6tV6RsbShpBI9GTAkY4gdDsnDER9G3zJQt8l3-C0Bi6vs3H7YiIwPHeQPg-KN-zXewGd0&t=247db424" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="00C4C274" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAjgltFZa7HbT7AGbj0l755nkjqnC/obQobHoDUmAyJU62q3M44hdS8y4uOqS4Mb5Y14Y7b39DtfzBtd1OHQVcC7TRA0UX9TeLoxmJeblP5BVHs0c1BOgndDCUuH9DMladm/Ddi58i/dsQ6aLnYJIUBmFFMkgzFi9hhUx12nfF9g1EXlONX5XQ6/hcrY/abs/mRVwCOnns7Z+818etBkCeNQ" />
</div>
<div>
<section class="featuredUAT" id="featured">
<div class="content-wrapperUAT">
<hgroup class="titleUAT">
<h1>Carrier Testing on UAT.</h1>
</hgroup>
</div>
</section>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', ['tUpdatePanel2','UpdatePanel2'], [], [], 90, '');
//]]>
</script>
<div id="div1" style="vertical-align:top">
<div id="divReports" style="vertical-align:top">
<table style="vertical-align:top; width:95%" class="BypassPrint">
<thead>
<tr>
<th style="text-align:center; font-family: 'Times New Roman', Times, serif; font-size: x-large; color: #800000; text-decoration: underline; vertical-align: middle;">
<span id="Label1">Policy Level Errors Search Parameters UAT Test</span>
</th>
</tr>
</thead>
<tr>
<td style="text-align: center;">
<hr/>
<p class="Note">
Note: The UAT database is refreshed with production data on average every quarter throughout the year so all carrier data processed through UAT during testing is deleted. This includes any new carriers not approved in production and all errors generated, it is recommended to print any reports associated with carrier testing for future reference.
</p>
<span id="lblLastDate" style="font-weight:bold;"></span><br />
<span id="lblLastRunTime" style="font-size:Medium;"></span><br />
<hr/>
<input type="submit" name="btnBuildTable" value="Refresh Policy Errors Table on UAT Test" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnBuildTable", "", true, "", "", false, false))" id="btnBuildTable" class="masterButton" />
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<td style="vertical-align: middle; text-align: right">
<span id="Label2" style="font-size:Large;">Submission ID:</span>
</td>
<td>
<input name="txtSubID" type="text" maxlength="7" id="txtSubID" style="width:100px;" />
</td>
<td>
<span id="RegularExpressionValidator1" style="color:Red;font-weight:bold;visibility:hidden;">Invalid Submission ID</span>
</td>
<td id="btnSubIDSearch">
<input type="submit" name="btnSubID" value="Get Errors in this Submission" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubID", "", true, "", "", false, false))" id="btnSubID" class="buttons" style="background-color:White;width:220px;" />
</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right">
<span id="Label5" style="font-size:Large;">Coverage ID:</span>
</td>
<td style="vertical-align: top;">
<input name="txtCovID" type="text" maxlength="10" id="txtCovID" style="width:100px;" />
<span id="Label12">(Processed Start Date:)</span>
</td>
<td>
<span id="RegularExpressionValidator2" style="color:Red;font-weight:bold;visibility:hidden;">Invalid Coverage ID</span>
</td>
<td id="btnCovIDSearch">
<input type="button" name="btnCovID" value="Get Errors for this Coverage" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnCovID", "", true, "", "", false, true))" id="btnCovID" class="buttons" style="background-color:White;width:220px;" />
</td>
</tr>
<tr>
<td colspan="4" style="vertical-align: top; text-align: center;">
<span id="lblUpdPnl1" style="color:#CC0000;font-size:Larger;font-weight:bold;"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="vertical-align:top; width:95%" class="BypassPrint">
<tr>
<td style="vertical-align:middle; text-align:center">
<div id="UpdateProgress1" style="display:none;">
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; text-align: center">
<table style="width:100%">
<tr>
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:left;">
<span id="Label8" style="display:inline-block;width:140px;"></span>
<span id="Label6" style="display:inline-block;font-size:Larger;font-weight:bold;width:300px;"> Carrier Name</span>
<span id="Label9" style="display:inline-block;font-size:Larger;font-weight:bold;width:215px;">CARRIER ID</span>
<span id="Label10">(CARRIER ID's IN BLUE ARE GROUPS)</span>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:left;">
<div id="divList" class="divScrolls">
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<hr/>
<span id="lblCarrierSelected" style="color:Maroon;background-color:Yellow;font-size:Large;"></span>
<hr/>
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:right">
<span id="Label3" style="font-size:Large;">Policy Effective Date:</span>
</td>
<td style="vertical-align:middle; text-align:left">
</td>
<td style="vertical-align:middle; text-align:right">
<span id="Label7" style="font-size:Large;">Policy Number:</span>
</td>
<td style="vertical-align:middle; text-align:left">
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:right">
<span id="Label4" style="font-size:Large;">Processed Start Date:</span>
</td>
<td>
</td>
<td colspan="2">
<input type="submit" name="btnReset" value="Reset Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnReset", "", true, "", "", false, false))" id="btnReset" class="buttons" style="font-size:Large;width:200px;" />
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:right">
<span id="Label11" style="font-size:Large;">Processed End Date:</span>
</td>
<td>
</td>
<td colspan="2" id="btnSearchPolicyProc">
<input type="submit" name="btnSearchPolicy" value="Search Policy Errors on UAT Test" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSearchPolicy", "", true, "", "", false, false))" id="btnSearchPolicy" class="buttons" style="background-color:White;font-size:Large;width:350px;" />
</td>
</tr>
<tr>
<td colspan="4">
<hr/>
<span id="lblMessage" style="color:#CC0000;font-size:Large;"></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="UpdatePanel2">
<table style="width:100%">
<tr>
<td style="vertical-align:middle; text-align:center; width:100%;">
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:center; width:100%;">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("RegularExpressionValidator1"), document.getElementById("RegularExpressionValidator2"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RegularExpressionValidator1 = document.all ? document.all["RegularExpressionValidator1"] : document.getElementById("RegularExpressionValidator1");
RegularExpressionValidator1.controltovalidate = "txtSubID";
RegularExpressionValidator1.focusOnError = "t";
RegularExpressionValidator1.errormessage = "Invalid Submission ID";
RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
RegularExpressionValidator1.validationexpression = "^[0-9]+$";
var RegularExpressionValidator2 = document.all ? document.all["RegularExpressionValidator2"] : document.getElementById("RegularExpressionValidator2");
RegularExpressionValidator2.controltovalidate = "txtCovID";
RegularExpressionValidator2.focusOnError = "t";
RegularExpressionValidator2.errormessage = "Invalid Coverage ID";
RegularExpressionValidator2.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
RegularExpressionValidator2.validationexpression = "^[0-9]+$";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
document.getElementById('RegularExpressionValidator1').dispose = function() {
Array.remove(Page_Validators, document.getElementById('RegularExpressionValidator1'));
}
document.getElementById('RegularExpressionValidator2').dispose = function() {
Array.remove(Page_Validators, document.getElementById('RegularExpressionValidator2'));
}
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter":500,"dynamicLayout":true}, null, null, $get("UpdateProgress1"));
});
//]]>
</script>
</form>
</body>
</html>
Ok there are two issues on your page
Issue 1 jQuery has not been defined before your script. I can't see it on the page but it is possible that it has been packed and is embedded in one of the script references further down the page - not possible to tell from only this listing
Issue 2
Your script appears before everything else which means it is not going to find the elements it is meant to act on. You need to put it inside a document ready (see below)
Move script to just before </body> tag and change to look like this
Issue 1 jQuery has not been defined before your script. I can't see it on the page but it is possible that it has been packed and is embedded in one of the script references further down the page - not possible to tell from only this listing
Issue 2
Your script appears before everything else which means it is not going to find the elements it is meant to act on. You need to put it inside a document ready (see below)
Move script to just before </body> tag and change to look like this
<script>
$(function() {
$('.masterButton').click(function () {
$('.buttons').prop({ disabled: true });
});
});
</script>ASKER
Ok I moved the script to the bottom of page before the end body tag and I also added jquery references in the head of the page and Im still not able to get this to work.
Sorry for taking so long but I think I have done everything you have said. If nothing else, Im getting good JQuery tips !! I appreciate it
Sorry for taking so long but I think I have done everything you have said. If nothing else, Im getting good JQuery tips !! I appreciate it
ASKER
just an fyi, I am hitting the function...I put in an alert and it comes up so its gotta be something Im doing in the function
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This worked Julian. Thank you so much for your help and all your tips. They have helped me out a lot.
ASKER
Thanks again!
You are most welcome.
ASKER
I probably should have seen this coming but how would I be able to switch which button is the CssClass="masterButton" and which buttons I want to assign "CssClass=buttons"
Can I do this programatically?
I can ask a new question if you want just let me know'
Thanks
JK
Can I do this programatically?
I can ask a new question if you want just let me know'
Thanks
JK
I don't understand - explain the conditions under which you would want to switch?
ASKER
Well I just found out that if any of the buttons are clicked there is a different process that occurs and he wants any of the buttons to cause all the other buttons to be disabled. So instead of one button being the master button and the other buttons being in the buttons class, and being disabled. If "any" of the buttons get clicked I want to disable all other buttons that were not clicked
Example: 5 buttons on page
if button1 clicked then buttons2,3,4,5 disabled and button1 is enabled
If button2 clicked then buttons1,3,4,5 disabled and button2 is enabled
and so on...
if this is going to change the answer in a significant way then let me know and I will ask another question.
Thanks
Example: 5 buttons on page
if button1 clicked then buttons2,3,4,5 disabled and button1 is enabled
If button2 clicked then buttons1,3,4,5 disabled and button2 is enabled
and so on...
if this is going to change the answer in a significant way then let me know and I will ask another question.
Thanks
Give them all a class of buttons and then just use this code
$('.buttons').click(function(e) {
e.preventDefault();
$(this).siblings().prop({disabled: true});
});ASKER
I see that your sample works but for some reason mine is not working
I have my code below...
I have my code below...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="Scripts/jquery-3.1.1.slim.js"></script>
<script src="Scripts/jquery-3.1.1.js"></script>
</head>
<body>
<form method="post" action="./devDataQuality.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjM1NjU3ODQwD2QWAgIDD2QWCgIdDw8WAh4EVGV4dGVkZAIpDzwrABECARAWABYAFgAMFCsAAGQCKw8PFgIfAGVkZAI5Dw8WAh8ABRhQbGVhc2Ugc2VsZWN0IENhcnJpZXIgSURkZAI7D2QWAmYPZBYEAgEPFgQeBVN0eWxlBQ1kaXNwbGF5OmJsb2NrHgdWaXNpYmxlaGQCAw8WBB8BBQ1kaXNwbGF5OmJsb2NrHwJoZBgBBQtncmRDb25vTGlzdA9nZECjNnE1TOvxFGXrHLyvBHBXYRN2kbTVkAlZ0cs2eQp5" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=zgp6OpuzUq02VmAJj34H8GciwctuEACM6wToKiJCUAzvq3m2ZQxXC3tvOYQs7ksC2DKfHjwrXGoShhr--LHLgw5sJ3iIeJUGeYFIHKHIdL41&t=636261572160000000" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=rrzaqnxFdkUdtG79hG0fWKnBXIHMtDf6ngciJWVqxySSoF8K1WR6bllBPG5izg1Pr7XfuX2qhy5lZFd2_DRjGUJmdm89PVNW1-G5Gr3jdA6LtGC-NATa69hOVbBNgbI8vVPL6z4OO11yC9J84uRbnnqvUGvDwlCkuGQB28vZvac1&t=64280561" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=CYGnL-6zrB2b5RRETvg_B9M09zRhpj29Ok-PQ_dji0pNKdbeSRXjuFmYNElwbQ4VHmPI9zvEem4H_rIU2pyX65eyj1bmV1y0p5-EzLkFL_taUNWSVjIhhnfauC0cB4o1gB4WjgvsvAg74e2WHEeNpKpFy5EZFXRoVzZ50B6-q8jUVYzDuNg3ZUyCUYCCwL0o0&t=247db424" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=lzrCuAlAQQ25ZU3_qv9IjwMRZfFhweDjhF5LVoNMimYb52FxomId8byTRERWmTwTClqnWgAOdP1JocHe6O9xB9tf7l86ivHLIA3FUmzcOJDO_2BKVo_B_U7dCFzF6tV6RsbShpBI9GTAkY4gdDsnDER9G3zJQt8l3-C0Bi6vs3H7YiIwPHeQPg-KN-zXewGd0&t=247db424" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="00C4C274" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAjaFXdHl+hPqLtITle2YGvfkjqnC/obQobHoDUmAyJU62q3M44hdS8y4uOqS4Mb5Y14Y7b39DtfzBtd1OHQVcC7TRA0UX9TeLoxmJeblP5BVHs0c1BOgndDCUuH9DMladm/Ddi58i/dsQ6aLnYJIUBmFFMkgzFi9hhUx12nfF9g1Jgasf+/+X281O1ve0H8lY2OX0iOCjJnI/IrLzWmPIaK" />
</div>
<div>
<section class="featuredUAT" id="featured">
<div class="content-wrapperUAT">
<hgroup class="titleUAT">
<h1>Carrier Testing on UAT.</h1>
</hgroup>
</div>
</section>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', ['tUpdatePanel2','UpdatePanel2'], [], [], 90, '');
//]]>
</script>
<div id="div1" style="vertical-align:top">
<div id="divReports" style="vertical-align:top">
<table style="vertical-align:top; width:95%" class="BypassPrint">
<thead>
<tr>
<th style="text-align:center; font-family: 'Times New Roman', Times, serif; font-size: x-large; color: #800000; text-decoration: underline; vertical-align: middle;">
<span id="Label1">Policy Level Errors Search Parameters UAT Test</span>
</th>
</tr>
</thead>
<tr>
<td style="text-align: center;">
<hr/>
<p class="Note">
Note: The UAT database is refreshed with production data on average every quarter throughout the year so all carrier data processed through UAT during testing is deleted. This includes any new carriers not approved in production and all errors generated, it is recommended to print any reports associated with carrier testing for future reference.
</p>
<span id="lblLastDate" style="font-weight:bold;"></span><br />
<span id="lblLastRunTime" style="font-size:Medium;"></span><br />
<hr/>
<input type="submit" name="btnBuildTable" value="Refresh Policy Errors Table on UAT Test" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnBuildTable", "", true, "", "", false, false))" id="btnBuildTable" Class="button" />
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<td style="vertical-align: middle; text-align: right">
<span id="Label2" style="font-size:Large;">Submission ID:</span>
</td>
<td>
<input name="txtSubID" type="text" maxlength="7" id="txtSubID" style="width:100px;" />
</td>
<td>
<span id="RegularExpressionValidator1" style="color:Red;font-weight:bold;visibility:hidden;">Invalid Submission ID</span>
</td>
<td id="btnSubIDSearch">
<input type="submit" name="btnSubID" value="Get Errors in this Submission" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubID", "", true, "", "", false, false))" id="btnSubID" Class="button" style="background-color:White;width:220px;" />
</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: right">
<span id="Label5" style="font-size:Large;">Coverage ID:</span>
</td>
<td style="vertical-align: top;">
<input name="txtCovID" type="text" maxlength="10" id="txtCovID" style="width:100px;" />
<span id="Label12">(Processed Start Date:)</span>
</td>
<td>
<span id="RegularExpressionValidator2" style="color:Red;font-weight:bold;visibility:hidden;">Invalid Coverage ID</span>
</td>
<td id="btnCovIDSearch">
<input type="submit" name="btnCovID" value="Get Errors for this Coverage" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnCovID", "", true, "", "", false, false))" id="btnCovID" Class="button" style="background-color:White;width:220px;" />
</td>
</tr>
<tr>
<td colspan="4" style="vertical-align: top; text-align: center;">
<span id="lblUpdPnl1" style="color:#CC0000;font-size:Larger;font-weight:bold;"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="vertical-align:top; width:95%" class="BypassPrint">
<tr>
<td style="vertical-align:middle; text-align:center">
<div id="UpdateProgress1" style="display:none;">
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; text-align: center">
<table style="width:100%">
<tr>
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:left;">
<span id="Label8" style="display:inline-block;width:140px;"></span>
<span id="Label6" style="display:inline-block;font-size:Larger;font-weight:bold;width:300px;"> Carrier Name</span>
<span id="Label9" style="display:inline-block;font-size:Larger;font-weight:bold;width:215px;">CARRIER ID</span>
<span id="Label10">(CARRIER ID's IN BLUE ARE GROUPS)</span>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:left;">
<div id="divList" class="divScrolls">
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<hr/>
<span id="lblCarrierSelected" style="color:Maroon;background-color:Yellow;font-size:Large;"></span>
<hr/>
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:right">
<span id="Label3" style="font-size:Large;">Policy Effective Date:</span>
</td>
<td style="vertical-align:middle; text-align:left">
</td>
<td style="vertical-align:middle; text-align:right">
<span id="Label7" style="font-size:Large;">Policy Number:</span>
</td>
<td style="vertical-align:middle; text-align:left">
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:right">
<span id="Label4" style="font-size:Large;">Processed Start Date:</span>
</td>
<td>
</td>
<td colspan="2">
<input type="submit" name="btnReset" value="Reset Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnReset", "", true, "", "", false, false))" id="btnReset" class="button" style="font-size:Large;width:200px;" />
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:right">
<span id="Label11" style="font-size:Large;">Processed End Date:</span>
</td>
<td>
</td>
<td colspan="2" id="btnSearchPolicyProc">
<input type="submit" name="btnSearchPolicy" value="Search Policy Errors on UAT Test" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSearchPolicy", "", true, "", "", false, false))" id="btnSearchPolicy" class="button" style="background-color:White;font-size:Large;width:350px;" />
</td>
</tr>
<tr>
<td colspan="4">
<hr/>
<span id="lblMessage" style="color:#CC0000;font-size:Large;">Please select Carrier ID</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="UpdatePanel2">
<table style="width:100%">
<tr>
<td style="vertical-align:middle; text-align:center; width:100%;">
</td>
</tr>
<tr>
<td style="vertical-align:middle; text-align:center; width:100%;">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("RegularExpressionValidator1"), document.getElementById("RegularExpressionValidator2"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RegularExpressionValidator1 = document.all ? document.all["RegularExpressionValidator1"] : document.getElementById("RegularExpressionValidator1");
RegularExpressionValidator1.controltovalidate = "txtSubID";
RegularExpressionValidator1.focusOnError = "t";
RegularExpressionValidator1.errormessage = "Invalid Submission ID";
RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
RegularExpressionValidator1.validationexpression = "^[0-9]+$";
var RegularExpressionValidator2 = document.all ? document.all["RegularExpressionValidator2"] : document.getElementById("RegularExpressionValidator2");
RegularExpressionValidator2.controltovalidate = "txtCovID";
RegularExpressionValidator2.focusOnError = "t";
RegularExpressionValidator2.errormessage = "Invalid Coverage ID";
RegularExpressionValidator2.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
RegularExpressionValidator2.validationexpression = "^[0-9]+$";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
document.getElementById('RegularExpressionValidator1').dispose = function() {
Array.remove(Page_Validators, document.getElementById('RegularExpressionValidator1'));
}
document.getElementById('RegularExpressionValidator2').dispose = function() {
Array.remove(Page_Validators, document.getElementById('RegularExpressionValidator2'));
}
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter":500,"dynamicLayout":true}, null, null, $get("UpdateProgress1"));
});
//]]>
</script>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.button').click(function (e) {
$(this).siblings().prop({ disabled: true });
});
});
</script>
</body>
</html>
My fault - I made the mistake of assuming all buttons were in the same container.
This should do it
NB: You don't need to include the bootstrap.min.js file - that is just part of my standard template for samples - all you need is the above.
This should do it
<script>
$(function() {
$('.button').click(function(e) {
e.preventDefault();
$('.button').not(this).prop({disabled: true});
});
});
</script>NB: You don't need to include the bootstrap.min.js file - that is just part of my standard template for samples - all you need is the above.
ASKER
works like a charm....thanks so much again
You are most welcome.
Using jQuery
Open in new window
The above assumes you have a unique ID on your target button
You give the other buttons a class for each button on the page. If you show us the page HTML we can maybe find a way that does not involve adding a class - but that is the easiest solution without knowing the underlying page structure.
Just a note
This is not the most efficient solution, and the use of .attr() is incorrect
Open in new window
If you are using jQuery then use jQueryOpen in new window
If you are going to use plain JavaScript then use just plain JavaScriptOpen in new window
Mixing them is just inefficient.