ColorChanger using SelectBox

Posted on 03/08/2012 by Admin

Assume a form,where you have a select box with following values
–select–
Red
green
blue

And Your have some Text,
When you choose any color from SelectBox,The color of the Text changes

Implement this in your html page

index.html

--selectRedGreenBlue



Customer Name
Customer Age

Output:-

Explaination:-
A single page can have multiple form,here we have 2 forms myfrom1,myform2
myform1 contains a selectbox (mySelectbox) with color values
myform2 contains 2 textfield with label.
The whole textfield with label is wrapped inside div and span tag having ids (custName,custAge)

EventHandling on SelectBox
on change of selectBox value,fun1() is called.
This method reads the value of the selectbox present in myform1

var colorVal=document.myform1.mySelectBox.value;

Then we apply the color to both the div and span,using its Id    
    document.getElementById("custName").style.color=colorVal;
    document.getElementById("custAge").style.color=colorVal;

Hope this helps you.
Any Bug or Improvement,we Would like to hear from You.
Follow this blog by entering the email id,so that all the updates will be at ur mail..
Thank You for reading this.