0

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";
        }else{
            document.getElementById("hiddenField").style.display = "none";
        }
    }

    function showfield(){
        if(document.frm.mpp.checked){
            document.getElementById("hideablearea").style.display = "block"
        }else{
            document.getElementById("hideablearea").style.display = "none";
        }
    }
</script>

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

<body>
    <form name='frm' action='nextpage.asp'>
        Test<br>
        <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>
        </select>
            
        <div id="hiddenField" style="display: none">
            <input type='text'>phone type<br>
            <input type='text'>phone price<br>
        </div>

        <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>
            </select>
        </div>

        </form>
    <body>
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by parry_kulk
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.