Here is your modified code
<SCRIPT TYPE="text/javascript">
/* Function called on change event of Dept Drop Down */
function populateSubjectMenu() {
var selectedIndexVal = document.getElementById("sem_select").selectedIndex;
var selectedSemVal =document.getElementById("sem_select").options[selectedIndexVal].value;
selectedIndexVal = document.getElementById("dept_select").selectedIndex;
var selectedDeptVal =document.getElementById("dept_select").options[selectedIndexVal].value;
callAjaxFunction(selectedSemVal,selectedDeptVal);
}
/* function called to do Ajax Request */
function callAjaxFunction(semVal,deptVal){
var url="populateSubjects.jsp?semVal="+semVal+"&"+deptVal;
var xmlHttp;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', url, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(url);
}
/* Call back function of Ajax Response*/
function updatepage(response){
//alert(str);
document.getElementById("result").innerHTML = response;
}
</SCRIPT>
<HTML>
<BODY>
<FORM>
Semester :
<label>
<select name="sem_select" id="sem_select" >
<option value="">-- Select --</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fiveth</option>
<option value="6">Sixth</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
</label>
Department :
<select name="dept_select" id="dept_select" onchange="populateSubjectMenu();">
<option value="">-- Select --</option>
<option value="cse">Computer Science & Engineering</option>
<option value="ec">Electronics & Communication</option>
<option value="it">Information Technology</option>
<option value="ft">Food Technology</option>
<option value="ee">Electrical Engineering</option>
<option value="ei">Electronics & Intrumentation</option>
</select>
<div id="result"></div>
</FORM>
</BODY>
</HTML>
Here is the code for "populateSubjects.jsp" which acts as servlet on ajax call
<%@page import="java.sql.*"%>
<%@page import="javax.sql.*"%>
<%
//open a database connection
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
try{
String url = "jdbc:sqlserver://[DB Server IP]:[DB Server Port];";
String driver = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
String userName = "[Your Schema username]";
String password = [Your Schema pwd] ;
String semVal=request.getParameter("semVal");
String deptVal=request.getParameter("deptVal");
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url,userName,password);
String s=[FONT=Consolas]"Select sub_code,sub_name from subject_details where semester ="+ [/FONT] semVal [FONT=Consolas]+" and department='"+ [/FONT] deptVal [FONT=Consolas]+"'"[/FONT];
stmt=conn.prepareStatement(s);
rs=stmt.executeQuery();
out.print("<p class='style9'>Subjects : ");
out.print("<select name='sub_select' id='sub_select'>");
out.print("<option value=''>--Select--</option>");
while (rs.next()) {
String [SIZE=13px][FONT=Consolas]sub_code[/FONT][/SIZE]= rs.getString("[SIZE=13px][FONT=Consolas]sub_code[/FONT][/SIZE]");
String [SIZE=13px][FONT=Consolas]sub_name[/FONT][/SIZE] = rs.getString("[SIZE=13px][FONT=Consolas]sub_name[/FONT][/SIZE]");
out.print("<option value='"+[SIZE=13px][FONT=Consolas]sub_code[/FONT][/SIZE]+"'>"+[SIZE=13px][FONT=Consolas]sub_name[/FONT][/SIZE]+"</option>");
}
out.print("</select>");
}catch(Exception e ){
out.print("<div><font color='red'>The following exception was thrown:</font></div>");
}finally{
try{if(rs!=null)rs.close();}catch(SQLException e2){/*noop*/}
try{if(stmt!=null)stmt.close();}catch(SQLException e2){/*noop*/}
try{if(conn!=null)conn.close();}catch(SQLException e2){/*noop*/}
}
%>
In order to run the above files, Please deploy them in any web container or app server and change the DB connection details to that of yours. Let me know if any issues.