How to submit a form using ajax(jquery)?

Question

I am new to ajax and j query. I goggled out for submitting form with ajax however could not worked out.

I was trying this:

CDN:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

   $("#btnAccept").click(function(){

   $("#btnCancel").show();
    $.ajax({
    type:"post",
    url:"upcomingLeaves.do",
    dataType: "",
    success: function(){
    alert("success");
    }

});});

My Controller class which handles request is:(for Request)

@RequestMapping(value = "/upcomingLeaves", method = RequestMethod.GET)
       public String showForm(@ModelAttribute("loginForm")EmpRegistrationForm profileForm, BindingResult result , HttpServletRequest request, HttpServletResponse response, ModelMap model){

(for Responce):

@RequestMapping(value = "/upcomingLeaves" ,method = RequestMethod.POST)
    public String ApproveLeaves(@RequestParam(required=false , defaultValue="")String aion,@RequestParam(required=false,defaultValue="")String Cancel,HttpServletRequest request, HttpServletResponse response, ModelMap model){

I want this to work like:

If I click On one button that request should be posted along with value to the controller and redirect on same page with new content.

I have the jsp page like:

<form:form id="upComing" action="upcomingLeaves.do" commandName="loginForm" modelAttribute="loginForm">        
    <table>
      <thead>
        <tr style="background-color:#666633;">
              <th>Employee id</th>
              <th>Leave Balance</th>
              <th>Date</th>
              <th>Leave Type</th>
              <th>Leave Period</th>
              <th>Applied Leaves</th>
              <th>Status</th>
              <th colspan="4">Action</th>
        </tr></thead>
      <tbody>
      <c:choose>
        <c:when test="${not empty upcomingLeavesList}">
            <c:forEach items="${upcomingLeavesList}" var="upComLeave">
                <tr>
                    <td><span>${upComLeave.employee_id}</span></td>
                    <td><span>${upComLeave.no_of_leave}</span></td>
                    <td><span>${upComLeave.fromDate} - ${upComLeave.toDate}</span></td>
                    <td><span>${upComLeave.leaveType}</span></td>
                    <td><span>${upComLeave.leavePeriod}</span></td>
                    <td><span>${upComLeave.appliedLeave}</span></td>
                    <td id="status"><span>${upComLeave.leaveStatus}</span></td>


                    <c:if test="${upComLeave.leaveStatus eq 'Pending' }"> <!-- check status if accepted, don't render Accept button -->
                             <td><button id="btnAccept" name="action"  value="Accept${upComLeave.employee_id}">Accept</button></td>
                            <td><button id="btnReject" name="action"  value="Reject${upComLeave.employee_id}">Reject</button></td>
                    </c:if>


                    <c:if test="${upComLeave.leaveStatus eq 'Approved' }"> <!-- check status if accepted, don't render Accept button -->
                             <td><button id="btnCancel" name="action" >Cancel</button></td>
                    </c:if>
                    <c:if test="${upComLeave.leaveStatus eq 'Canceled' }"> <!-- check status if accepted, don't render Accept button -->
                             <td><button id="btnAccept" name="action">Accept</button></td>
                    </c:if>
                    <c:if test="${upComLeave.leaveStatus eq 'Rejected' }"><!-- //check status if accepted, don't render Reject button -->
                        <td><button id="btnReject" name="action" type="submit" value="Reject${upComLeave.employee_id}">Reject</button></td>
                    </c:if>
                   <%--  <c:if test="${upComLeave.leaveStatus eq 'Canceled' }"><!-- //check status if cancel, render cancel button -->
                        <td><button id="btnAccept" name="action"  value="Accept${upComLeave.employee_id}">Cancel</button></td>
                    </c:if> --%>
                </tr>
            </c:forEach>
        </c:when>
        <c:otherwise>
            upcomingLeavesList is empty or null..
        </c:otherwise>
      </c:choose>
      </tbody>      
  </table>
</form:form>

Any help would be appreciated.

possible duplicate of [jQuery AJAX submit form](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — terales, Apr 07 '14 at 14:22

score 1 · Answer 1 · answered Apr 07 '14 at 14:24

1

You can use $("#upComing").submit(); for submitting form.

answered Apr 07 '14 at 14:24

If I write like.......then also Form is getting submit.There are multiple buttons so,using appropriate button,relevant request should be post.I am sure I have done something wrong. – user3448105 Apr 07 '14 at 14:42
you can write code for preventing submition of form when click on any button `$('button').on('click',function(event){ event.preventDefault()});` – Apr 07 '14 at 15:27

score 0 · Answer 2 · answered Apr 07 '14 at 14:33

0

duplication of ajax call .

Try to call your request using ajax and then return your request output to the response part.

answered Apr 07 '14 at 14:33

K S Nidhin

2,414
2
17
39

How to submit a form using ajax(jquery)?

2 Answers2