In my jsp when i select one option in the dropdown it works fine with visibilty toggle but when i try it out for second time on it doesnot work
my jsp :
<html>
<head>
<script src="javascript/display_toggle.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IDOC AUTHORING TOOL</title>
</head>
<body>
<div id="BasePage" style="display:block;" >
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p></p>
<p>Enter/Choose ailment :
<select size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onchange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
<option value ="4">Input Prescription</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"></legend>
Tick off patient context :
<input type="radio" value="V1" checked name="R1">Men
<input type="radio" name="R1" value="V2">Women
<p>
<input type="radio" name="R1" value="V3"> Child
<input type="radio" name="R1" value="V4"> All</p>
</fieldset>
<p>Enter Pre Conditions</p>
<p><textarea rows="2" cols="20"></textarea>
</div>
<!-- ______________________________________________________________________________________________________- -->
<div id="Symptoms" style="display:none;">
<html:form method="POST" action="symptoms" >
<!-- --- -->
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p></p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
<option value ="4">Input Prescription</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"></legend>
Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
</fieldset>
<p>Enter Pre Conditions</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
<p>Must Have Symptoms :
May Have Symptoms :</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="must_have_symptoms"></html:textarea>
<!-- <input type="submit" value="Submit" name="B2">-->
<html:textarea rows="2" name="AuthoringForm" cols="20" property="may_have_symptoms"></html:textarea>
<input type="submit" value="Submit" name="symptomsButton"><input type="reset" value="Reset" onclick="this.form.reset()"></p>
</html:form>
</div>
<!--___________________________________________________________________________________________ -->
<div id="Prevention" style="display:none;">
<html:form method="POST" action="prevention" >
<!-- ---------------------------------- -->
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p></p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
<option value ="4">Input Prescription</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"></legend>
Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
</fieldset>
<p>Enter Pre Conditions</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
<!-- --------------------------------------------------- -->
<p>Input for Prevention :
</p>
<p><html:textarea rows="8" name="AuthoringForm" cols="79" property="prevention"></html:textarea>
<input type="submit" value="Submit" name="preventionButton"><input type="reset" value="Reset" onclick="this.form.reset()">
</p>
</html:form>
</div>
<!--____________________________________________________________________________________________ -->
<div id="decisiontree" style="display:none;">
<html:form method="POST" action="decisiontree" >
<!-- ------------------------------------------------ -->
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p></p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
<option value ="4">Input Prescription</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"></legend>
Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
</fieldset>
<p>Enter Pre Conditions</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
<!-- ------------------------------------------------ -->
<p>
</p>
<fieldset style="width: 1225px; height: 451px; padding: 2">
<legend>Decision Tree Preview </legend>
<applet code="com.vaannila.utility.dynamicTreeApplet.class" archive="./appletjars/dynamictree.jar, ./appletjars/prefuse.jar" width ="1000" height="500">
</applet>
</fieldset><p>
</p>
<p>Enter Follow Up Questions :</p>
<html:textarea rows="4" name="AuthoringForm" cols="45" property="follow_up_questions" ></html:textarea>
<html:radio value="Yes" name="AuthoringForm" property="followupconsent" disabled="false"/> Yes
<html:radio value="No" name="AuthoringForm" property="followupconsent" disabled="false"/> No
<input type="submit" value="Submit" name="followupQuestionButton"><input type="reset" value="Reset" onclick="this.form.reset()"><p>
</p>
</html:form>
</div>
<!-- ______________________________________________________________________________________________________________________________-->
<div id="Prescription" style="display:none;">
<html:form method="POST" action="prescription" >
<!-- ---------------------------------- -->
<p>
<u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
<p></p>
<p>Enter/Choose ailment :
<html:select name="AuthoringForm" property="disease_name" size="1">
<option>Malaria</option>
<option>High Fever</option>
<option>Cholera</option>
</html:select></p>
<p>Choose Authoring Mode :
<select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
<option selected="selected"> </option>
<option value ="1">Input Desicion Tree</option>
<option value ="2">Input Prevention</option>
<option value ="3">Input Symptoms</option>
<option value ="4">Input Prescription</option>
</select></p>
<fieldset style="width: 381px; height: 126px; padding: 2">
<legend align="left"></legend>
Tick off patient context :
<html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men
<html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
<p>
<html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
<html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
</fieldset>
<p>Enter Pre Conditions</p>
<p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
<!-- --------------------------------------------------- -->
<p>Input for Prescription :
</p>
<p><html:textarea rows="8" name="AuthoringForm" cols="79" property="prescrption"></html:textarea>
<input type="submit" value="Submit" name="prescriptionButton" ><input type="reset" value="Reset" onclick="this.form.reset()">
</p>
</html:form>
</div>
</body>
</html>
my javascript:
function display_toggle(){
var e=document.getElementById("AuthoringOption").value;
if (e=="1"){
document.getElementById("Symptoms").style.display="none";
document.getElementById("Prevention").style.display="none";
document.getElementById("decisiontree").style.display="block";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="none";
}
else if(e=="2"){
document.getElementById("Prevention").style.display="block";
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="none";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="none";
}
else if(e=="3"){
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="block";
document.getElementById("Prevention").style.display="none";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="none";
}
else if(e =="4"){
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="none";
document.getElementById("Prevention").style.display="none";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="block";
}
}
All of these
make it extremely difficult to read your code. Can yo remove all the unnecessary stuff? Most likely, the first time you go through your JS, one of the lines produces an error. Many browsers disable JS on the page after an error is produced.I suggest you start by looking at the console to see if any JS errors are displayed.