Jithin Jithin - 11 days ago 6
Ajax Question

How to pass selected dropdown value in ajax ( JSP )?

I


n my web application i am using a dynamic dropdown for selecting
class,division and student_id. When selecting the class the division
dropdown fills according to the class selected.. Simmilarly in the
student_id the dropdown fills by getting the class and the division.


My problem is that i can't pass the class value and the division value at the same time to the jsp page..

My Home.jsp. code is ..

<%@page import="java.sql.*"%>
<html>
<head>
<script language="javascript" type="text/javascript">
var xmlHttp
var xmlHttp


function showdivision(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="divisionn.jsp";
url +="?passclassname=" +str;
xmlHttp.onreadystatechange = divisionChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}




function divisionChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("division").innerHTML=xmlHttp.responseText
}
}



function showstudid(str){

var select = document.getElementById("class");
var classvalue = select.options[select.selectedIndex].value;

if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="studid.jsp";
url +="?passdivision=" +encodeURI(str);
url +="&passclass=" +encodeURI(classvalue);

xmlHttp.onreadystatechange = studidchange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}


function studidchange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("studid").innerHTML=xmlHttp.responseText
}
}



</script>
</head>
<body>
<table border="1">
<tr><th>Class</th><th>Division</th><th>studid</th></tr>
<tr><td>
<select name='class' onchange="showdivision(this.value)">
<option value="none">Select</option>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/demo","root","password");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select class from class1");
while(rs.next()){
%>
<option value="<%=rs.getString(1)%>"><%=rs.getString(1)%></option>
<%
}
%>
</select>
</td>
<td id='division'><select name='division' >
<option value='-1'></option>
</select>
</td>
<td id='studid'> <select name='studid' >
<option value='-1'></option>
</select>
</td>
</tr>
</table>
</body>
</html>


Divisionn.jsp code is..

<%@page import="java.sql.*"%>
<%
String classs=request.getParameter("passclassname");
String bu="<select name='division' onchange='showstudid(this.value);'><option value='-1'>Select</option>";
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/demo","root","password");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select division_no from class1 where class='"+classs+"' ");
while(rs.next()){
bu=bu+"<option value='"+rs.getString(1)+"'>"+rs.getString(1)+"</option>";
}
bu=bu+"</select>";
response.getWriter().println(bu);
}
catch(Exception e){
System.out.println(e);
}

%>


studid.jsp code is...

<%--
Document : divisionn
Created on : Nov 26, 2016, 11:13:27 AM
Author : Jithin
--%>


<%@page import="java.sql.*"%>
<%
String division=request.getParameter("passdivision");

String classs=request.getParameter("passclass");



String bu="<select name='division'><option value='-1'>---Select--</option>";
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/demo","root","password");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select studid from class1 where division_no='"+ division+"' and class='"+ classs+"' ");
while(rs.next()){
bu=bu+"<option value='"+rs.getString(1)+"'>"+rs.getString(1)+"</option>";
}
bu=bu+"</select>";
response.getWriter().println(bu);
}
catch(Exception e){
System.out.println(e);
}

%>


This code is not working .. the problem is with the code which am passing the selected class name..

function showstudid(str){

var select = document.getElementById("class");
var classvalue = select.options[select.selectedIndex].value;

if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="studid.jsp";
url +="?passdivision=" +encodeURI(str);
url +="&passclass=" +encodeURI(classvalue);

xmlHttp.onreadystatechange = studidchange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}


Can anybody help me find a sollution .. Thanks in advance ...

Answer

To pass multiple parameters via the URL you will need to use proper URL encoding.

var url="studid.jsp";
url +="?passdivision=" +encodeURI(str);
url +="&passclass=" +encodeURI(xclass);

Note that additional parameters are separated by & and the encodeURI function will URL encode your data.

Also consider using prepared statements as your SQL query has an obvious SQL injection vulnerability.