Thursday, February 16, 2006

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)?

  1. When you click on the button it should make the input/select field disabled or enabled.

  2. 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.

8 Comments:

Blogger Stripe-man said...

Very nice and clean... I do have a question though.. how do Disable the efield by default ?

10:58 PM  
Blogger Stripe-man said...

oh.. forgot to mention...
I did do this by setting the field (select field) to disabled.. but I was wondering if this can be done through onload or something..

11:00 PM  
Blogger Uday said...

Yes, you can also use onload to make the select field disabled...

11:40 PM  
Blogger kartik sukumaran said...

I have a gridview and image field in it . That image button should be on and off button. javascript to toggle that image,,

2:24 AM  
Blogger kartik sukumaran said...

I have a gridview and image field in it . That image button should be on and off button. javascript to toggle that image,,

2:24 AM  
Blogger Srinivasan Narayan said...

This y far the cleanest code I have come across on the web to implement the toggle feature...

Thanks a ton

6:36 PM  
Blogger keylimesoda said...

I just used this same code with an empty div replacing the select box. Worked well.

3:16 PM  
Blogger praosv said...

<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

8:51 PM  

Post a Comment

<< Home