Need Help in to write jQuery function

Question

I need some help in implementing jQuery.

I have a dropdown list with the following code

<td width="20%">Programs<font color="red">*</font>:</td>
<td width="20%"><c:set var="programMap"
value="${userTraining.programMap}"></c:set> <form:select
path="programs" id="selectPrograms"
onchange="javascript:checkboxlist();">
<c:forEach var="item" items="${programMap}">
<form:option value="${item.key}">
<c:out value="${item.value}"></c:out>
</form:option>
</c:forEach>
</form:select></td>

On the change event of my drop down list (javascript function "checkbox()" gets called), and the function fetches course list and display that list "course" tab in checkbox form.

function checkboxlist() {
 document.userTrainingForm.action = "/UserRegistration/training/main/student/getCourses";
 document.userTrainingForm.submit();
 }

Course tab code snippet

<c:set var="courseMap" value="${userTraining.courseMap}"></c:set> 
<c:set var="selectedCourseMap" value="${userTraining.selectedCourseMap}"></c:set> 
<c:forEach var="item" items="${courseMap}">
<c:set var="valuePresent" value="false"></c:set>
<c:forEach var="selectitem" items="${selectedCourseMap}">
<c:if test="${selectitem.key == item.key}">
<c:set var="valuePresent" value="true"></c:set>
</c:if>
</c:forEach>
<c:choose>
<c:when test="${valuePresent == 'true'}">
 <form:checkbox id="chkCourse" path="courseName"
 checked="checked" value="${item.key}"
 style="font-weight: 700" />
 <c:out value="${item.value}"></c:out>
</br>
</c:when>
<c:otherwise>
 <form:checkbox id="chkCourse" path="courseName"
 value="${item.key}" style="font-weight: 700" />
 <c:out value="${item.value}"></c:out>
 </br>
</c:otherwise>
</c:choose>
</c:forEach>

Page is getting refreshed on every On Change event. Can somebody please help me to write "function checkboxlist()" in jQuery (jQuery.ajax()) , so that page doesn't get refreshed on every onchange event.

• Bojangles: No. What we can do, and will do very well, is answer any problems you encounter when writing checkboxlist() yourself.

Answer 1

function checkboxlist() {
 document.userTrainingForm.action = "/UserRegistration/training/main/student/getCourses";
 document.userTrainingForm.submit();
}

you are submitting the form on change, if you want to submit the form with jQuery you should use something like this:

function checkboxlist() {
 $.ajax({
 type: 'POST',
 url: "/UserRegistration/training/main/student/getCourses",
 data: $('#userTrainingForm').serialize(),
 success: function(msg){
 alert('form submitted');
 }
 });
}

• S Jagdeesh: Hello Trey, Thanks for replying, I did make the change as you suggested, I forgot to mention that "/UserRegistration/training/main/student/getCourses" is actually method present in my controller class I am getting a null pointer expection ( on my controller class) @RequestMapping(value = "/getCourses", method = RequestMethod.POST) public String getCourses(@ModelAttribute("UserRegistration") UserRegistration userRegistration, BindingResult result,Model model)
• Trey: without knowing what you are working with as a whole this is all I can really offer, you should check out the api reference