Drop down dependencies with Servlet and AJAX - ajax

Question

I have a 3 drop down list. The 1st drop down is the parent and I want to populate the the 2nd drop down when user select a value from 1st, then populate the 3rd drop down based on 2nd. I'm using servlet to declare the values. Here's the code:
Servlet:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
TblBIRFormNoDAO birdao = DAOFactory.getDaoManager(TblBIRFormNo.class);
List<TblBIRFormNo> birtypelist = birdao.getAllBirFormNumber();
request.setAttribute("birtypelist", birtypelist);
String bir = request.getParameter("bfnsCode");
TblTaxTypeDAO taxdao = DAOFactory.getDaoManager(TblTaxType.class);
if(bir != null){
List<TblTaxType> taxtypelist = taxdao.findAlltaxtCode(bir);
String json = null;
json = new Gson().toJson(taxtypelist);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
String tax = request.getParameter("taxtCode");
TblTaxTypeDAO tdao = DAOFactory.getDaoManager(TblTaxType.class);
if(tax != null){
List<TblTaxType> taxdesclist = tdao.findAlltaxtDesc (tax);
String json = null;
json = new Gson().toJson(taxdesclist);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);
}
From this servlet. I'm getting the value of 1st drop down but it seems I can't get the value of the selected value that will use to populate the 2nd and 3rd.
jsp + AJAX:
<script type="text/javascript">
$(document).ready(function() {
$('#bfnsCode').change(function() {
$.get('Test', function(responseJson) {
var $select = $('#bfnsCode');
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
});
});
</script>
<label style="font-size: 17px;">BIR-Form Number</label><br>
<select name="bfnsCode" id="bfnsCode" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="bircode" items="${birtypelist}">
<option value="${bircode.bfnsCode}">${bircode.bfnsCode}</option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Tax Type</label><br>
<select name="taxtCode" id="taxtCode" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxtype" items="${taxtypelist}">
<option value=""></option>
</c:forEach>
</select>
<br><br>
<label style="font-size: 17px;">Account Code</label><br>
<select name="taxtDesc" id="taxtDesc" class="sel" style="width: 245px; margin-left: 0;">
<option selected="selected" value=""></option>
<c:forEach var="taxdesc" items="${taxdesclist}">
<option value="${taxdesc.taxtDesc}">${taxdesc.taxtDesc}</option>
</c:forEach>
</select>
This part, the only value that is showing is the 1st drop down. What are the missing codes for AJAX? or the servlet?

Answer 1

please find this reference it would be much helpful Reference
Scenario's that i could suggests you is ,,
1.Onload of the page you may get the first drop down to be loaded
2.Onchange of first write the ajax calls to pass the first drop down value as input in ajax calls and append the second select options
3.On change of second write the ajax calls to pass the second drop down value as input to the servlet in ajax calls and append the third select options

Answer 2

When the value of first drop down changes you have to pass the selected value to jquery get function such as this,
<script type="text/javascript">
$(document).ready(function() {
$('#bfnsCode').change(function() {
var $bfnscode=$("select#bfnsCode").val();
$.get('Test',{bfnsCode:$bfnscode},function(responseJson) {
var $select = $('#taxtCode');
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
});
});
You never passed parameter to your get function neither did you populate your second drop down with your response. You have tried to populate the same select option with no values from servlet. The above code should work for you. Good luck!
Update: I just noticed that you have tried to forward the request to jsp. You should not redirect your page when making AJAX calls since you are simply updating the drop down list and the jquery takes care of getting the response from servlet and updating the interface. Remove this from your servlet code,
request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);//remove this line