Menu
suppose I've a 3 options in a drop down box say red , blue, others. If a user select option as an others then below a text box should be visible to wrtie his own favourite color. I can populate the drop down box with colors but do not know how to bring textbox visible on selection of others in the drop-down box. I know that using javascript it is possible to do but I am quite new to javascript. can anybody please help me out??
This is the select option I am implementing in my html form
<select name="color"> // color
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" /></td> // this textbox should be hidden //until unless others is selected in the drop down box
340
Below is the core JavaScript you need to write:
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
As Umesh Patil answer have comment say that there is problem. I try to edit answer and get reject. And get suggest to post new answer. This code should solve problem they have (Shashi Roy, Gaven, John Higgins).
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('othercolor');
if(val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="othercolor" id="othercolor" style='display:none;'/>
</body>
</html>
Coded an example at http://jsbin.com/orisuv
HTML
<select name="color" onchange='checkvalue(this.value)'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none'/>
Javascript
function checkvalue(val)
{
if(val==="others")
document.getElementById('color').style.display='block';
else
document.getElementById('color').style.display='none';
}
Inline:
<select
onchange="var val = this.options[this.selectedIndex].value;
this.form.color[1].style.display=(val=='others')?'block':'none'">
I used to do this
In the head (give the select an ID):
window.onload=function() {
var sel = document.getElementById('color');
sel.onchange=function() {
var val = this.options[this.selectedIndex].value;
if (val == 'others') {
var newOption = prompt('Your own color','');
if (newOption) {
this.options[this.options.length-1].text = newOption;
this.options[this.options.length-1].value = newOption;
this.options[this.options.length] = new Option('other','other');
}
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
