All geek questions in one place

How to activate a text box if I select another option from the drop-down list

Suppose I have 3 options in the drop-down list: red, blue, others. If the user selects the option as others, then under the text box should be visible how to use your favorite color. I can fill the drop-down list with flowers, but I don’t know how to bring the text box for selecting others to the drop-down list. I know that using javascript can be done, but I'm completely new to javascript. anyone please help me out ??

This is the selection option that I implement 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
+6
source share
5 answers

The following is the basic 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>
+24
source

Coded 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'; }
+7
source

Inline:

 <select onchange="var val = this.options[this.selectedIndex].value; this.form.color[1].style.display=(val=='others')?'block':'none'">

I used this

In the head (specify identifier):

 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'); } } } }
+2
source

Simply

 <select id = 'color2' name = 'color' onchange = "if ($('#color2').val() == 'others') { $('#color').show(); } else { $('#color').hide(); }"> <option value="red">RED</option> <option value="blue">BLUE</option> <option value="others">others</option> </select> <input type = 'text' name = 'color' id = 'color' />

edit: jQuery plugin required

+1
source

As Umesh Patil says, answer that there is a problem. I am trying to edit the answer and receive a denial. And suggest posting a new answer. This code should solve the 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>
0
source

Source: https://habr.com/ru/post/910348/

More articles:


All Articles