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>