How do I reset the value from the parameter passed by URL from Javascript in JSP

Question

This is my first question ever in this website which I hope I can explain it well. I did find the same problem but mostly in PHP and I don't really understand (eg- How to replace url parameter with javascript/jquery? ). Here my explaination:

I have a function in Javascript (in page testStudentFile.jsp):

 <script language="javascript"> function onParamChange(){ var thisForm = document.frmParam; var strBranch = thisForm.reqBranch.value; var strFaculty = thisForm.reqFaculty.value; var strCourse = thisForm.reqCourse.value; location.href ="testStudentFile.jsp?reqBranch="+strBranch+"&reqFaculty="+strFaculty+"&reqCourse="+strCourse; } </script> 

Which get the value from here (and post at the same page):

 <form name="frmParam" action="testStudentFile.jsp" method="POST"> <tr> <td width="20%"><strong>Branch:</strong></td> <td> <%renderDropDownList2(out, "reqBranch", arrBranch, requestValue.strBranch,"onchange=\\"onParamChange()\\"");%><%=strBranchDesc%> </td> </tr> <tr> <td width="20%"><strong>Faculty:</strong></td> <td> <%renderDropDownList2(out, "reqFaculty", arrFaculty, requestValue.strFaculty,"onchange=\\"onParamChange()\\"");%><%=strFacultyDesc%> </td> </tr> <tr align="left"> <td><strong>Course: </strong></td> <td> <%renderDropDownList2(out, "reqCourse", arrCourse, requestValue.strCourse,"onchange=\\"onParamChange()\\"");%><%=strCourseDesc%> </td> </tr> <tr align="left"> <td>&nbsp;</td><td><strong><%out.print(arrStudent.size() + " students");%></strong> </td> </tr> <tr> <td></td> <td><input name="reqSearch" class="iform" type="submit" value="Search"></td> </tr> </form> 

And the data was retrieved from the method void that called data using sql query. Example one of the query:-

  <%! public void populateBranch(JspWriter out, Connection ConnTC, ArrayList arrBranch)throws Exception{ String sqlSelect = " SELECT DISTINCT branch FROM university"+ " WHERE active='Y'"+ " AND branch='PK'"+ " OR branch='ZZ'"; //out.print(sqlSelect); PreparedStatement stmtSelect = ConnTC.prepareStatement(sqlSelect); ResultSet rsSelect = stmtSelect.executeQuery(); while(rsSelect.next()){ String strBranch = getValue(rsSelect.getString("fbrncd")); arrBranch.add(strBranch); } rsSelect.close(); stmtSelect.close(); } %> 

Here is my problem:

When I choose PK for branch, it will automatically list down the related faculties and next the related courses from the dropdownlists, but when I choose ZZ, the faculty and course choosen from PK branch didnt reset to the default(empty) before I can choose a faculty and a course for branch ZZ. How do I reset the dropdownlist (without reset button) to the default in the value of the parameter of the URL as stated in the Javascript above whenever the branch changed?

(Example)

From--> http://xxx.xxx.xx.x/portal/testApp/request/testStudentFile.jsp?reqBranch=PK&reqFaculty=FAS&reqCourse=AV

To--> http://xxx.xxx.xx.x/portal/testApp/request/testStudentFile.jsp?reqBranch=ZZ&reqFaculty=&reqCourse=

Warm Regards <3,

Eja ;-)

Answer 1

Do you want clear strFaculty and strCourse when branch is ZZ?? Then, just try this

var thisForm = document.frmParam;

var strBranch = thisForm.reqBranch.value;
var strFaculty = strBranch == 'ZZ' ? '' : thisForm.reqFaculty.value;
var strCourse = strBranch == 'ZZ' ? '' : thisForm.reqCourse.value;

location.href = ....

I hope that this is useful for you. Thanks.

Answer 2

Here is my solution to reset a dropdown list when another changes. Based on this thread and this one .

Simply call a function when the value is changed in one dropdown:

onchange="reset()"

In your reset function, select the element you wish to change index of and set it to 0:

var element = document.getElementById('id');
element.value = 0; // first value, an empty option in this example

Updated JSFiddle