2

I am trying to display the result of addition of 2 numbers on the same web page without reloading. I tried using jquery ajax but when the result is displayed I am losing the existing content of the page. How to modify the code so that I get the result along with all the existing content of the page?

Addition.jsp

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript">

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

 $.ajax({
 type: form.attr('method'),
 url: form.attr('action'),
 data: form.serialize(),
 success: function (data) {
 var result=data;
 $('#content').html(result);

 }
 });

 return false;
 }); </script>

<form id='ajaxform' name='ajaxform' action='Addition' method='post'>
 Enter First Number: <input type='text' id='firstnum' name='firstnum' size='30' required/><br/>
 Enter Second Number<input type='text' id='secondnum' name='secondnum' size='30'required/><br/>

 <input type='Submit' value="Add"/> <br><br>
 <div id='content'>
</div><br><br>
</form>

Addition.java


import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
/**
 * Servlet implementation class Addition
 */
@WebServlet("/Addition")
public class Addition extends HttpServlet {


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");

          PrintWriter out=response.getWriter();
          String fnum= request.getParameter("firstnum");
          int intfnum = Integer.parseInt(fnum); 
          String snum= request.getParameter("secondnum");
          int intsnum = Integer.parseInt(snum); 
          int intres = intfnum + intsnum;
          String res = Integer.toString(intres);
          out.println("<br/><br/>"+fnum+" + "+snum+" = "+res);
    }

}

Original Page:

Original Page

Page After getting result:

Page after getting result:

coder123
  • 461
  • 2
  • 9
  • 14
  • Your code seems perfectly fine and I can't reproduce this: https://jsfiddle.net/khrismuc/de7ypLa5/ (I'm using `fail()` here instead but that shouldn't matter) For some reason the browser is submitting the form the regular way despite your returning `false`. Are you getting any errors in the browser console? –  Jul 28 '19 at 11:26
  • you are using the form element. It is not possible to submit a form without reloading a page. you need to use an alternative way – Wali Waqar Jul 28 '19 at 11:27
  • Wait, I can indeed reproduce this if I keep the `http://` in the jQuery url. I used `https` so the browser wouldn't refuse to load the script. Guess what happens when the browser doesn't load jQuery and all your JS code is for naught? –  Jul 28 '19 at 11:31
  • @ChrisG I am not getting any errors in the browser console. – coder123 Jul 28 '19 at 11:32
  • Can you make sure your jQuery code is called? Like add `alert("called")` right before `$.ajax(...)`? –  Jul 28 '19 at 11:33
  • @WaliWaqar But I'm returning false so that submit doesn't happen. Can you suggest an alternate way for this? – coder123 Jul 28 '19 at 11:35
  • @ChrisG You are right. I'm not getting the alert message. How can I fix this? – coder123 Jul 28 '19 at 11:37
  • 1
    Oh my, I didn't even see this until now: you need to move your script below the other HTML, because when you do `var form = $('#ajaxform');`, the form doesn't exist yet. Alternatively you can wrap all your code in `$(function () {` and `});`. –  Jul 28 '19 at 11:47
  • Yes, it is working now! – coder123 Jul 28 '19 at 11:50

0 Answers0