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-28 13:35:38Z

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, 2012 at 13:35

answered Aug 28, 2012 at 12:02

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

codingbiz Over a year ago

if you add another item tomorrow, the selectedIndex will not be 8

Musa Over a year ago

@codingbiz what if you added one today?

kat_indo Over a year ago

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?

Musa Over a year ago

@kat_indo you can use the display property instead of visibility.

kat_indo Over a year ago

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.

Viktor S. · Accepted Answer · 2012-08-28 12:03:21Z

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

vijay kondal · Accepted Answer · 2012-08-28 12:07:00Z

4

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

answered Aug 28, 2012 at 12:07

vijay kondal

803 bronze badges

1 Comment

codingbiz Over a year ago

Your answer is wrong but I won't downvote. Am sure somebody will. this.selectedIndex=='other' is wrong

Raj · Accepted Answer · 2016-04-13 07:26:24Z

1

$(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>

answered Apr 13, 2016 at 7:26

Raj

112 bronze badges

Comments

defau1t · Accepted Answer · 2012-08-28 12:09:44Z

0

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

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

answered Aug 28, 2012 at 12:09

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Comments

codingbiz · Accepted Answer · 2012-08-28 12:16:35Z

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, 2012 at 12:16

answered Aug 28, 2012 at 12:04

codingbiz

26.4k9 gold badges62 silver badges99 bronze badges

Comments

Sukanya Suku · Accepted Answer · 2015-12-23 12:47:41Z

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, 2015 at 12:47

answered Dec 23, 2015 at 12:42

Sukanya Suku

573 bronze badges

1 Comment

Sukanya Suku Over a year ago

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

Prakruthi HM · Accepted Answer · 2016-08-18 09:41:35Z

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>

Collectives™ on Stack Overflow

display/hide textbox based on drop down list

8 Answers 8

5 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related