Submit form to servlet using JQuery Ajax

Question

How can we submit Form to servlet when we click on span tag using Jquery Ajax, and get output from servlet? Below is calculator example code. If instead of span if i use input type="submit" i get the right result in index.html, but if i use span instead of input type for submit, i am directed to servlet page.

index.html

<form name="form1" method="POST" action="Ajaxexample" id="form1">
  <table>
   <tr>
     <td>Number 1</td><td><input type="text" name="n1"/></td>
   </tr>
   <tr>
     <td>Number 2</td><td><input type="text" name="n2"/></td>
   </tr>
    <tr>
     <td></td><td><span onclick="form1.submit()">Calculate</span></td>
    </tr>
     <tr>
       <td>Result</td><td><input type="text" value="" id="result"/></td>
     </tr>
    </table>
 </form>
    <script src="script/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

    var form = $('#form1');
    form.submit(function () {

     $.ajax({
     type: form.attr('method'),
     url: form.attr('action'),
     data: value,
     success: function (data) {
     var result=data;
     $('#result').attr("value",result);
     }
     });
     return false;
     });
     </script>

Ajaxexample.java

     protected void doGet(HttpServletRequest request, HttpServletResponse response)throws 
     ServletException, IOException {
         response.setContentType("text/html;charset=UTF-8");
         PrintWriter out = response.getWriter();

         int n1 = Integer.parseInt(request.getParameter("n1"));
         int n2 = Integer.parseInt(request.getParameter("n2"));

        out.println(n1 + n2 + "");

       }
       }

web.xml

      <display-name>Ajax</display-name>
     <welcome-file-list>
      <welcome-file>index.html</welcome-file>
       <welcome-file>index.htm</welcome-file>
       <welcome-file>index.jsp</welcome-file>
      <welcome-file>default.html</welcome-file>
     <welcome-file>default.htm</welcome-file>
      <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
     <servlet>
         <servlet-name>Ajaxexample</servlet-name>
         <servlet-class>Ajaxexample</servlet-class>
         </servlet>
         <servlet-mapping>
         <servlet-name>Ajaxexample</servlet-name>
         <url-pattern>/Ajaxexample</url-pattern>
         </servlet-mapping>

What is "value" and how do you wire up the span.

mplungjan
– mplungjan

2013-12-14 08:46:55 +00:00
Commented Dec 14, 2013 at 8:46 — mplungjan
– mplungjan, Commented Dec 14, 2013 at 8:46

user3068680 · Accepted Answer · 2013-12-14 09:19:44Z

6

<span onclick="formSubmit();">Calculate</span>

function formSubmit(){

 $.ajax({
     url:'localhost:8080/Ajax/Ajaxexample',
     data: $("#form1").serialize(),
     success: function (data) {
            $('#result').html(data);
    }
});
}

answered Dec 14, 2013 at 9:19

user3068680

611 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SpringLearner · Accepted Answer · 2013-12-14 09:12:12Z

2

you form method is post <form name="form1" method="POST" action="Ajaxexample" id="form1"> but you are writing codes in servlet doGet() so you may not proper results.Remeber that if the form method is get then in the servlet doGet() will be called and if the form method is post then in servlet doPost() will be called

answered Dec 14, 2013 at 9:12

SpringLearner

13.9k20 gold badges82 silver badges117 bronze badges

2 Comments

CY5 Over a year ago

Thanks, i have changed POST to GET but still not working and also changed data:value to data:form.serializable inside ajax, i am getting error as GET localhost:8080/Ajax/Ajaxexample [HTTP/1.1 500 Internal Server Error 19ms]

SpringLearner Over a year ago

@CY5 The syntax is data:{parametername:parametervalue}

Kuldeep Choudhary · Accepted Answer · 2013-12-14 09:04:17Z

0

You have clearly written " onclick="form1.submit()">" that's why form is submitting....

Remove onClick() method from submit &

     <span id="calc">Calculate</span

& replace

    form.submit(function () {

line by

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

answered Dec 14, 2013 at 9:04

Kuldeep Choudhary

7758 silver badges24 bronze badges

1 Comment

CY5 Over a year ago

Thanks for help, i did as suggested and i have changed POST to GET and also changed data:value to data:form.serializable inside ajax, i am still getting error as GET localhost:8080/Ajax/Ajaxexample [HTTP/1.1 500 Internal Server Error 19ms]

Collectives™ on Stack Overflow

Submit form to servlet using JQuery Ajax

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related