display/hide textbox based on drop down list

Question

For-example I've got a code:

<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex=='other'){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>

I need the textbox to appear when option "other" is selected. The above code is not working :(

Musa · Accepted Answer · 2012-08-28T13:35:38.087

15

selectedIndex gives an index i.e. a number, so the index for "other" is 8, you can get the value of the selected option from the value property of the select element. To access the form a control is in use the elements form property this.form, also your you table cells should be in a row.

<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>

edited Aug 28 '12 at 13:35

answered Aug 28 '12 at 12:02

Musa

96,336
17
118
137

if you add another item tomorrow, the `selectedIndex` will not be `8` – codingbiz Aug 28 '12 at 12:17
2

@codingbiz what if you added one today? – Musa Aug 28 '12 at 12:18
Thank u for the solution @Musa. I was wondering if there's a way to handle the following problem. The "other" textbox is hidden until you select the value, but it still takes up space, so the design looks weird, because you just see an empty space. Is there a way to resolve this? – kat_indo Jul 30 '14 at 21:57
@kat_indo you can use the display property instead of visibility. – Musa Jul 30 '14 at 23:44
Thank you for getting back on this one @Musa! I was able to figure it out after all by researching about it a bit more. – kat_indo Aug 02 '14 at 01:35

score 4 · Answer 2 · answered Aug 28 '12 at 12:03

    <form name="myform">
       <table>
         <td>
           <select name="one" onchange="if (this.options[this.selectedIndex].value =='other'){document.myform['other'].style.visibility='visible'}else {document.myform['other'].style.visibility='hidden'};">
             <option value="" selected="selected">Select...</option>
             <option value="1">1</option>
             <option value="2">3</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="other">Other</option>
          </select>
         <input type="textbox" name="other" style="visibility:hidden;"/>
       </td>
    </table>
 </form>

score 4 · Answer 3 · answered Aug 28 '12 at 12:07

<form name="myform">
<table>
<td>
<select name="one" id="mySelect">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>

<script type="text/javascript">
$('#mySelect').bind('onchange',function(){
if (this.value==='other')
{
this.myform['other'].style.visibility='visible'
}
else {
this.myform['other'].style.visibility='hidden'};
}
</script>

Your answer is wrong but I won't downvote. Am sure somebody will. `this.selectedIndex=='other'` is wrong — codingbiz, Aug 28 '12 at 12:08

score 1 · Answer 4 · answered Apr 13 '16 at 07:26

$(document).ready(function () {
        $('#types').change(function () {
            if ($('#types').val() == 'Other') {
                $('#other').show();
            }
            else {
                $('#other').hide();
            }
        });
    });



<body>
<form id="form1" runat="server">
    <div>

   <select id="types" name="types">
            <option value="Type 1">Type 1</option>
            <option value="Type 2">Type 2</option>
            <option value="Type 3">Type 3</option>
            <option value="Other">Other</option>
        </select>

        <input type="text" id="other" name="other" style="display: none;" />
    </div>
</form>

codingbiz · Answer 5 · 2012-08-28T12:16:35.833

0

this.selectedIndex returns an integer not a string. Something like 0,1,2 and probably 8 for 'others'. 8 == 'other' can never be true

try this

onchange="if (this.options[this.selectedIndex].value =='other')"

edited Aug 28 '12 at 12:16

answered Aug 28 '12 at 12:04

codingbiz

26,179
8
59
96

score 0 · Answer 6 · answered Aug 28 '12 at 12:09

0

First of all enclose your td in a tr and then below is the DEMO

http://jsfiddle.net/3Snmh/5/

answered Aug 28 '12 at 12:09

defau1t

10,593
2
35
47

Sukanya Suku · Answer 7 · 2015-12-23T12:47:41.207

0

<form name="form" action="" method="post">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='yes'){this.form['yes'].style.visibility='visible'}else {this.form['yes'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="text" name="yes" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>

edited Dec 23 '15 at 12:47

answered Dec 23 '15 at 12:42

Sukanya Suku

57
3

selected a value , gives an yes or no values . To select the value, you can get the value of the selected option from the value property of the select element. selected value is "yes",that time hidden text field will be show .value is "no" ,the text filed is hidden – Sukanya Suku Dec 24 '15 at 09:12

score 0 · Answer 8 · answered Aug 18 '16 at 09:41

JQuery

$(document).ready(function() {
        $("select").change(function() {
            $(this).find("option:selected").each(function() {
                if ($(this).attr("value") == "class") {
                    $(".box").not(".class_name").hide();
                    $(".class_name").show();
                    $(".box").not(".class_name").val("");
                } 

                else if ($(this).attr("value") == "ref") {
                    $(".box").not(".ref_id").hide();
                    $(".ref_id").show();
                    $(".box").not(".ref_id").val("");
                }

                else {
                    $(".box").hide();
                }
            });
        }).change();
    });

HTML

<div>
            <select>
                <option>Choose</option>
                <option value="class">Class</option>
                <option value="ref">Particular</option>
            </select>
        </div>
        <div class="class_name box">
            Class Name: <input type="text" name="c">
        </div>
        <div class="ref_id box">
            Reference_id : <input type="text" name="r">
        </div>

display/hide textbox based on drop down list

8 Answers8

Linked