6

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

8 Answers 8

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>
5
  • if you add another item tomorrow, the selectedIndex will not be 8
    – codingbiz
    Aug 28, 2012 at 12:17
  • 2
    @codingbiz what if you added one today?
    – Musa
    Aug 28, 2012 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, 2014 at 21:57
  • @kat_indo you can use the display property instead of visibility.
    – Musa
    Jul 30, 2014 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 2, 2014 at 1:35
4
    <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>​
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>
1
  • Your answer is wrong but I won't downvote. Am sure somebody will. this.selectedIndex=='other' is wrong
    – codingbiz
    Aug 28, 2012 at 12:08
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>

0
0

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

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

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')"
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>
1
  • 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 Dec 24, 2015 at 9:12
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.