Frankie Frankie - 6 months ago 31
MySQL Question

hidden/show the text field when select dropdown list specified value

I start to generate my script from this solution find at this link display/hide textbox based on drop down list

In this case, the value must be a character value. But in my situation I need to value is a ID number specified get from mysql database.

This is my modified script and not work. When select the Other value, not display the textbox.

<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='10000'){this.form['10000'].style.visibility='visible'}else {this.form['10000'].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="10000">Other</option>
</select>
<input type="textbox" name="10000" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>


But this script workfine if change the value 10000 to OtherValue word.
How to modify this script?

Answer Source

You can rewrite your code like this.

<form name="myform">
    <table>
        <tr>
            <td>
                <select name="one" onchange="if (this.value=='10000'){userselect.style.visibility='visible'}else {userselect.style.visibility='hidden'};">
                <option value="" selected="selected">Select...</option>
                <option value="1">1</option>
                <option value="2">2</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="10000">Other</option>
                </select>
                <input type="textbox" name="10000" id="input" style="visibility:hidden;"/>
            </td>
        </tr>
    </table>
</form>

<script>
var userselect = document.getElementById('input');
</script>