Toggle Button
Want to make a toggle button? Eat this:
Here is a simple toggle button using JavaScript, it is like an on/off switch. Using this button you can enable or disable the select field(you can use any element).
Check the Example
How does it work(Or what your PM wants you to do)?
Loading the JavaScript
The JavaScript code has to be included in the <head> of the html page, below is the code which has to be included in <head> tag.
Html Code
Create a select field and a button in body section, below is the code which has to be included in <body> tag.
Hope you like the stuff. More to come your way! Stay tuned.
Here is a simple toggle button using JavaScript, it is like an on/off switch. Using this button you can enable or disable the select field(you can use any element).
Check the Example
How does it work(Or what your PM wants you to do)?
- When you click on the button it should make the input/select field disabled or enabled.
- Button value(the text that appears on the button) should be changed to enabled when the input/select field is disabled and vice versa.
Loading the JavaScript
The JavaScript code has to be included in the <head> of the html page, below is the code which has to be included in <head> tag.
<script type="text/javascript">
function toggle()
{
//Checking if select field is enabled
if (document.getElementById("mySelect").disabled == false)
{
//Changing the select field state to disabled and changing the value of button to enable
document.getElementById("mySelect").disabled = true
document.getElementById("btn").value="Enable list"
return
}
//Checking if select field is disabled
if (document.getElementById("mySelect").disabled == true)
{
//Changing the select field state to enabled and changing the value of button to disable
document.getElementById("mySelect").disabled = false
document.getElementById("btn").value="Disable list"
return
}
}
</script>
Html Code
Create a select field and a button in body section, below is the code which has to be included in <body> tag.
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input id="btn" onclick="toggle()" value="Disable list" type="button">
</form>
Hope you like the stuff. More to come your way! Stay tuned.
posted by Uday at 8:09 AM
6 Comments:
Yes, you can also use onload to make the select field disabled...
I have a gridview and image field in it . That image button should be on and off button. javascript to toggle that image,,
I have a gridview and image field in it . That image button should be on and off button. javascript to toggle that image,,
This y far the cleanest code I have come across on the web to implement the toggle feature...
Thanks a ton
I just used this same code with an empty div replacing the select box. Worked well.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (document.getElementsByTagName)
document.getElementsByTagName('style')[0].disabled = false; //true - loads the page in nocss mode.
function changeCSS(nr)
{
if (document.getElementsByTagName)
x = document.getElementsByTagName('style');
else if (document.all)
x = document.all.tags('style');
else
{
alert('This script does not work in your browser');
return;
}
nr--;
for (var i=0;i<x.length;i++)
{
dis = !(i == nr);
x[i].disabled = dis;
}
}
// -->
</SCRIPT> in head section
in body section
<INPUT type=button value="CSS" onClick="javascript:changeCSS(1)">
<INPUT type=button value="NoCSS" onClick="javascript:changeCSS(0)">
with the above code I can disable/enable the internal stylesheet. As your script is somewhat similar to my requirement, can you please correct the above function using a single input button and also toggle the button text to enable/disable or css/nocss
Post a Comment
<< Home