Skip to main content

JSP and Servlet Form Submission without page refresh show results on the same page using Jquery AJAX

By























Code Snippet

HTML Form 
<form id='ajaxform' name='ajaxform' action='ajaxformexample' method='post'>
 First Name: <input type='text' id='firstname' name='firstname' size='30' required/><br/>
 Last Name: <input type='text' id='lastname' name='lastname' size='30'required/><br/>
 Email:  <input type='email' id='emailid' name='emailid' size='30'required/><br/>
 Password:  <input type='password' id='pwd' name='pwd' size='30'required/><br/>
 <input type='Submit'/> 
 <div id='content'>
</div>

</form>
the above HTML Form uses post method and url servlet redirect to "ajaxformexample"
Javascript Code

  var form = $('#ajaxform'); // id of form tag
 form.submit(function () {

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

  }
 });

  return false; // not refreshing page

 });

the above javascript code uses Ajax jquery concept and parameters type, url,data, and finally success function to show result from specified action SERVLET performed results back to same page and in the below code snippet Servlet uses doPost method to get values in the input fields;

public void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws IOException {
  resp.setContentType("text/html");
  
  PrintWriter out=resp.getWriter();
  String fname= req.getParameter("firstname");
  String lname= req.getParameter("lastname");
  String email= req.getParameter("emailid");
  String password= req.getParameter("pwd");
  out.println("<br/><br/>First Name = "+fname+"<br/><br/>Last Name = "+lname+"<br/><br/>Email = "+email+"<br/><br/>Password = "+password);
 }

index.jsp Page

servlet Java





 Output


Labels:

Comments

  1. UnknownTuesday, 9 September 2014 at 00:40:00 GMT+5:30

    Thank You Very Much ....

    ReplyDelete
  2. rachnaMonday, 3 November 2014 at 13:31:00 GMT+5:30

    actually i used this code and when i enter the submit button the page get refreshed...pls suggest the solution

    ReplyDelete
    Replies
    1. Kumaran KanniappanTuesday, 11 November 2014 at 23:56:00 GMT+5:30

      have u used jquery code which will return false as below code ?

      var form = $('#ajaxform'); // id of form tag
      form.submit(function () {

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

      }
      });

      return false; // not refreshing page

      });

      Delete
  3. VictorThursday, 20 November 2014 at 02:42:00 GMT+5:30

    And If I want to show in the same form, How I can do that?

    ReplyDelete
  4. UnknownThursday, 12 February 2015 at 10:11:00 GMT+5:30

    Thanks a ton :)

    ReplyDelete
  5. UnknownThursday, 30 July 2015 at 06:57:00 GMT+5:30

    Hi, why it opening the page: http://localhost:8080/SisGestWeb/AjaxformexampleServlet instead of displaying the result in the same page?

    ReplyDelete
  6. UnknownMonday, 23 November 2015 at 18:46:00 GMT+5:30

    thnx so much...nicly explaned for beginners very usefulll

    ReplyDelete
  7. UnknownWednesday, 3 August 2016 at 15:33:00 GMT+5:30

    It doesn't work. The code reloads the page and open another page. Someone can help me ?

    ReplyDelete
  8. karthirevaSaturday, 5 November 2016 at 15:14:00 GMT+5:30

    i need a deep explanation which is most helpful for me to develop a technical skills quickly.

    Java Training in Chennai

    ReplyDelete
  9. Anuj PalMonday, 26 December 2016 at 15:26:00 GMT+5:30

    Suppose we used bootstrap and we want show any error then how i show ...in simple words vaidation/.

    ReplyDelete
  10. UnknownWednesday, 29 March 2017 at 11:02:00 GMT+5:30

    can you provide me jquery code that make crud operation in SPA.

    ReplyDelete
  11. UnknownWednesday, 29 March 2017 at 11:03:00 GMT+5:30

    for Servlet compulsary

    ReplyDelete
  12. gowsalyaSaturday, 1 September 2018 at 14:30:00 GMT+5:30

    Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.
    Digital Marketing Training in Bangalore

    digital marketing training in tambaram

    digital marketing training in annanagar

    digital marketing training in marathahalli

    digital marketing training in rajajinagar

    Digital Marketing online training

    ReplyDelete
  13. MounikaSaturday, 8 September 2018 at 12:31:00 GMT+5:30

    Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    python training in OMR
    python training in Bangalore
    python training in Bangalore

    ReplyDelete
  14. UnknownMonday, 17 September 2018 at 13:30:00 GMT+5:30

    Excellent post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.

    Data Science training in kalyan nagar
    Data Science training in OMR
    selenium training in chennai
    Data Science with Python training in chenni
    Data Science training in chennai
    Data science training in velachery

    ReplyDelete
  15. afiah bWednesday, 3 October 2018 at 16:39:00 GMT+5:30

    Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
    java training in chennai | java training in bangalore


    java training in tambaram | java training in velachery

    ReplyDelete
  16. saiSaturday, 13 October 2018 at 19:13:00 GMT+5:30

    Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which I need, thanks to offer such a helpful information here.
    online Python certification course | python training in OMR | Python training course in Chennai

    ReplyDelete
  17. jananiThursday, 18 October 2018 at 12:37:00 GMT+5:30

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.

    Java training in Rajaji nagar | Java training in Kalyan nagar

    Java training in Kalyan nagar | Java training in Jaya nagar

    ReplyDelete
  18. UnknownThursday, 18 October 2018 at 12:55:00 GMT+5:30

    All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.
    Data Science Training in Indira nagar
    Data Science training in marathahalli
    Data Science Interview questions and answers



    ReplyDelete
  19. Anoushka SakthiThursday, 25 October 2018 at 14:52:00 GMT+5:30

    This is the best article on recent technology. Thanks for taking your own time to share your knowledge,

    selenium Training in Chennai
    Selenium Training Chennai
    iOS Training in Chennai
    iOS Training Institutes in Chennai
    JAVA J2EE Training Institutes in Chennai
    Java course

    ReplyDelete
  20. UnknownThursday, 25 October 2018 at 17:03:00 GMT+5:30


    Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.


    AWS Training in BTM Layout |Best AWS Training in BTM Layout

    AWS Training in Marathahalli | Best AWS Training in Marathahalli


    Selenium Interview Questions and Answers

    AWS Tutorial |Learn Amazon Web Services Tutorials |AWS Tutorial For Beginners

    ReplyDelete
  21. simbuFriday, 23 November 2018 at 11:17:00 GMT+5:30

    I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
    Java training in Chennai | Java training institute in Chennai | Java course in Chennai

    Java training in Bangalore | Java training in Electronic city

    Java training in Bangalore | Java training in Marathahalli

    Java training in Bangalore | Java training in Btm layout

    ReplyDelete
  22. pragyachitraTuesday, 4 December 2018 at 20:20:00 GMT+5:30

    Very well written blog and I always love to read blogs like these because they offer very good information to readers with very less amount of words....thanks for sharing your info with us and keep sharing.
    angularjs Training in chennai

    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    angularjs-Training in velachery

    angularjs-Training in pune

    ReplyDelete
  23. pragyachitraWednesday, 5 December 2018 at 10:52:00 GMT+5:30

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.
    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    angularjs-Training in velachery

    angularjs-Training in pune

    ReplyDelete
  24. poojaTuesday, 11 December 2018 at 10:16:00 GMT+5:30

    Wonderful article, very useful and well explanation. Your post is extremely incredible. I will refer this to my candidates...

    Java training in Chennai | Java training in Omr

    Oracle training in Chennai

    Java training in Chennai | Java training in Annanagar

    Java training in Chennai | Java training institute in Chennai | Java course in Chennai

    ReplyDelete
  25. sheelaFriday, 14 December 2018 at 10:58:00 GMT+5:30

    Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.
    Devops online Training
    Online DevOps Certification Course - Gangboard

    ReplyDelete
  26. AnonymousFriday, 14 December 2018 at 11:27:00 GMT+5:30

    I would assume that we use more than the eyes to gauge a person's feelings. Mouth. Body language. Even voice. You could at least have given us a face in this test.
    python training in chennai
    python course institute in chennai

    ReplyDelete
  27. nivathaMonday, 17 December 2018 at 10:49:00 GMT+5:30

    This blog is the general information for the feature. You got a good work for these blog.We have a developing our creative content of this mind.Thank you for this blog. This for very interesting and useful.
    Data Science Training in Chennai | Best Data science Training in Chennai
    Data Science training in kalyan nagar
    Data science training in Bangalore | Data Science training institute in Bangalore
    Data Science training in marathahalli | Data Science training in Bangalore
    Data Science interview questions and answers
    Data science training in jaya nagar | Data science Training in Bangalore

    ReplyDelete
  28. UnknownTuesday, 18 December 2018 at 13:38:00 GMT+5:30

    Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.

    angularjs-Training in pune

    angularjs Training in bangalore

    angularjs Training in bangalore

    angularjs Training in chennai

    automation anywhere online Training

    angularjs interview questions and answers

    ReplyDelete
  29. Anbarasan14Tuesday, 18 December 2018 at 14:44:00 GMT+5:30

    Nice post. Thanks for sharing.

    IELTS Tambaram
    IELTS Coaching in Chrompet
    IELTS Classes near Chennai Tambaram
    IELTS Coaching Center in Chennai Adampakkam
    Best IELTS Coaching Institute in Velachery
    IELTS Coaching in Velachery
    IELTS Classes in Velachery

    ReplyDelete
  30. jeevaMonday, 24 December 2018 at 17:06:00 GMT+5:30

    Really very nice blog information for this one and more technical skills are improve,i like that kind of post.

    rpa training in bangalore | best rpa training in bangalore
    rpa online training

    ReplyDelete
  31. jeevaMonday, 24 December 2018 at 17:12:00 GMT+5:30

    Really very nice blog information for this one and more technical skills are improve,i like that kind of post.

    rpa training in bangalore | best rpa training in bangalore
    rpa online training

    ReplyDelete
  32. sivaSaturday, 12 January 2019 at 16:23:00 GMT+5:30

    Very nice post here and thanks for it .I always like and such a super contents of these post.
    Excellent and very cool idea and great content of different kinds of the valuable information's.

    Java training in Bangalore



    ReplyDelete
  33. haripriyaSaturday, 12 January 2019 at 16:36:00 GMT+5:30

    Really great post, I simply unearthed your site and needed to say that I have truly appreciated perusing your blog entries.
    Data science course in bangalore

    ReplyDelete
  34. priya rajeshWednesday, 30 January 2019 at 17:49:00 GMT+5:30

    Very nice post with lots of information. Thanks for sharing this updates.
    Microsoft Azure Training in Chennai
    Azure Training
    Data Science Course in Chennai
    Data Science Training in Chennai
    DevOps certification in Chennai
    DevOps Training in Chennai
    Azure Training in OMR
    Azure Training in Porur

    ReplyDelete
  35. sasitamilMonday, 11 March 2019 at 14:41:00 GMT+5:30

    Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.

    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete
  36. rudraveniWednesday, 10 April 2019 at 10:55:00 GMT+5:30

    Really very happy to say that your post is very interesting. I never stop myself to say something about it. You did a great job. Keep it up.
    We have an excellent IT courses training institute in Hyderabad. We are offering a number of courses that are very trendy in the IT industry. For further information, please once go through our site.
    AWS Training In Hyderabad

    ReplyDelete
  37. EXCELRFriday, 14 August 2020 at 13:07:00 GMT+5:30

    The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.data science course in Hyderabad

    ReplyDelete
  38. ramTuesday, 12 January 2021 at 16:03:00 GMT+5:30

    Thank you for posting informative insights, I think we have got some more information to share with! Do check out
    oracle training in chennai and let us know your thoughts. Let’s have great learning!

    ReplyDelete
  39. MafuzSaturday, 13 February 2021 at 22:04:00 GMT+5:30

    thank you so much

    ReplyDelete
  40. MafuzSaturday, 13 February 2021 at 22:07:00 GMT+5:30

    how do I clear the form fields after submission?

    ReplyDelete
  41. ManeeshaFriday, 11 June 2021 at 11:29:00 GMT+5:30

    I enjoy it for creating the details, keep up the truly amazing perform continuing
    data scientist training in hyderabad

    ReplyDelete
  42. INFYCLE TECHNOLOGIESWednesday, 15 September 2021 at 22:33:00 GMT+5:30

    Finish the Selenium Training in Chennai from Infycle Technologies, the best software training institute in Chennai which is providing professional software courses such as Data Science, Artificial Intelligence, Java, Hadoop, Big Data, Android, and iOS Development, Oracle, etc with 100% hands-on practical training. Dial 7502633633 to get more info and a free demo and to grab the certification for having a peak rise in your career.

    ReplyDelete

Post a Comment

Share this to your friends

Popular posts from this blog

"How to maintain or retain tabs in same tab after button click events or postback?" using JQuery in ASP.NET C#

By
In this post I'll share an details about " How to maintain or retain tabs in same tab after button click events or postback? " Step 1: you need to download Jquery and JQueryUI Javascript libraries from this site http://jqueryui.com/ Step 2: As usually you can create ASP.NET website from Visual Studio IDE and add Jquery and JqueryUI plugins in the header section of aspx page. Step 3: Add HiddenField control inside aspx page which is very useful to retain tab in same page Step 4: Use the HiddenField ID in Jquery code to indicate that CurrentTab Index Step 5: In code Behind, using Enumerations concept give the tab index values as user defined variable  Step 6: Use the Enum values in every Button click events on different tabs to check that tab could be retained in the same tab Further, Here I'll give the code details and snap shot pictures, 1. Default.aspx: Design Page First Second Third ...
1 comment
Read more

Guidewire Related Interview Question and answers part 1

By
common Guidewire questions and answers 20 Guidewire BC Q&A Top 100 Guidewire Interview FAQ Guidewire Claimcenter 20 Interview Questions Guidewire Rating concepts
Post a Comment
Read more

Login and Registration forms in C# windows application with Back end Microsoft SQL Server for data access

By
In this article, I'm gonna share about how to make login and register form with MS SQL database; 1. Flow Chart Logic 2. Normal Features 3. Form Designs Login Form Design Sign in Form Design Password Retrieve Form 4. Database Design and SQL queries and Stored Procedure Create new Database as "schooldata" create table registerdata (  ID int identity,  Username nvarchar(100),  Password nvarchar(100),  Fullname  nvarchar(100),  MobileNO nvarchar(100),  EmailID nvarchar(100)  ) select * from registerdata create procedure regis (  @Username as nvarchar(100),  @Password as nvarchar(100),  @Fullname as nvarchar(100),  @MobileNO as nvarchar(100),  @EmailID as nvarchar(100)  ) as begin insert into registerdata (Username, Password, Fullname, MobileNO,EmailID) values (@Username, @Password, @Fullname, @MobileNO, @EmailID) ...
37 comments
Read more