Recently in one of my web application I wanted to disable a button depending on the value in html span. Basically my idea is to enable and disable publish button in my web application depending on span text value.
In this asp.net web application, user update information as required then click on apply change button. Apply change button update the record in MS Sql server database also change the publish flag to No. Now user will be able to see a publish button, this button event basically publish data in external source. When user click on publish data button this will push the data into external server and update the record matching with the primary key. It will also update the local database record only changed the flag to Yes so that user would not able to publish this record again unless they do any other changes.
Here is the html code for span text –
<table> <tr><th>Sync Status: </th><td colspan="3"><asp:Label ID="lblSync" runat="server" Text='<%# Eval("SYNC") %>' /> </td></tr> <tr><td colspan="3"><asp:Button ID="btnPublish" runat="server" Text="Publish to RecData" OnClick="btnPublish_Click" /> </td></tr> </table>
[important]I have stripped out all the other html code just to focus on this example. You notice I am using asp label control here which renders as span field in html source.[/important]
The above label rendered the page with span tag and text of the label text value.
<table> <tr><th>Sync Status: </th><td colspan="3"><span id="MainContent_FormView1_lblSync">Yes </span> </td></tr> <tr><td colspan="3"><input type="submit" name="ctl00$MainContent$FormView1$btnPublish" value="Publish to RecData" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$FormView1$btnPublish", "", true, "", "", false, false))" id="MainContent_FormView1_btnPublish" /> </td></tr> </table>
Here is my jQuery script to grab the span value and set the button property.
<script type="text/javascript"> $(function () { $("#tabs").tabs(); var sync = $("#MainContent_FormView1_lblSync").text(); if ($.trim(sync) != "No") { alert(sync); $("#MainContent_FormView1_btnPublish").attr("disabled", "disabled"); } }); </script>
Now when the span text is Yes the button get disabled and for anything else it is enabled.
This is the working screen shot –
Everything is very open with a very clear description of the challenges.
It was really informative. Your website is very helpful.
Many thanks for sharing!