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.

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');
        }
    });
}