Hi Guys,

Okay, my question goes like this..
I have two sections which start off as hidden (display: none) and depending on the values submitted the two areas may need to be shown.

For example, if a checkbox is clicked, it displays one area.
And if a specific <select> option is chosen, a 2nd set of fields may be required.

I have the following code, however only the checkbox option is working at the moment.
I need to be able to use both.

SO, if the <select> option "Other" is chosen, the area with 2 text fields is to be displayed.

And if MPP Included? is checked, the 2 fields which correspond to the MPP is to be shown.

<script language="JavaScript">
    function showhidefield() {
        if (document.frm.menu.value == "other") {
            document.getElementById("hiddenField").style.display = "block";
            document.getElementById("hiddenField").style.display = "none";

    function showfield(){
            document.getElementById("hideablearea").style.display = "block"
            document.getElementById("hideablearea").style.display = "none";

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>

    <form name='frm' action='nextpage.asp'>
        <select name = "menu" onchange="showhidefield()">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
            <option value="other">Other</option>
        <div id="hiddenField" style="display: none">
            <input type='text'>phone type<br>
            <input type='text'>phone price<br>

        <br>MPP Included?<br>
        <input type="checkbox" name="mpp" onclick="showfield()">
        <div id="hideablearea" style="display:none">
            <input type='text' value="0">MPP Amount<br>
            <select name = "menu" onclick="showhidefield()">
                <option value="12">12 Months</option>
                <option value="24">24 Months</option>


There are two select boxes with the name="menu" in the above code snippet. Hence the javascript code at line 3 above,

if (document.frm.menu.value == "other") {

is not working as expected.

You can either change the name of the second select box or change the javascript code to

if (document.frm.menu[0].value == "other") {

Hope this helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.