Sending form with JQuery and AJAX/-Servlet and stay on same page

Question

i want to stay on the same page after i submit my form with Jquery and ajax to a servlet. Here's my code:

script.js

$(document).on('submit', '.myForm', function(e) {
  $.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: $(this).serialize(),
    success: function(data) {
    $('#antwort').html(data).fadeIn("slow");
    //For testing
    //alert(data)
    }
 });
 e.preventDefault();

});

My kontakt.html code looks like this:

  <form role="form" id="contactForm" method="POST" action="MailServlet" name="myForm">
    <div class="form-group">
        <label for="InputName">Ihr Name</label>
        <input type="text" class="form-control" id="name" name="name">
    </div>
    <div class="form-group">
        <label for="InputEmail1">Ihr EMail Adresse</label>
        <input type="email" class="form-control" id="email" name="mail">
    </div>
    <div class="form-group">
        <label for="InputMessage">Ihre Nachricht an uns</label>
        <textarea class="form-control" id="nachricht" rows="8" name="nachricht"></textarea>
    </div>
    <button type="submit" class="btn btn-ar btn-primary" id="sendenBtn">senden</button>
    <div class="clearfix"></div>
</form>
<div id="antwort" style="color:green; font-weight:bold;display:none;"></div>

And this is my servlet:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    response.setContentType("text/html");
    response.setHeader("Cache-control", "no-cache, no-store");
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Expires", "-1");

    String name = request.getParameter("name");
    String email = request.getParameter("email");
    String nachricht = request.getParameter("nachricht");

    out.println("Vielen Dank");

    response.sendRedirect("kontakt.html");

}

So the problem is, that i got after submit the form a blank page with the text from the servlet. But i want that the response text from the servlet is showing in a div (antwort - right below the form) on the same page as my form

score 0 · Answer 1 · answered Feb 15 '17 at 13:50

0

You have problem in selector. You just try to select class that you don't have (.myForm). USe id selector (#contactForm):

$(document).on('submit', '#contactForm' // note this instead of '.myForm'
, function(e) {
//other...
});

answered Feb 15 '17 at 13:50

teo van kot

12,350
10
38
70

score 0 · Answer 2 · answered Feb 15 '17 at 13:50

0

Change this

<form role="form" id="contactForm" method="POST" action="MailServlet" name="myForm">

into this

<form id="contactForm" name="myForm">

since you don't need to specify any attribute for the form in the html to run it with ajax

and then refer to it with the id it has. You are using a class in the js but the form has not such attribute so the js is never invoked:

$(document).on('submit', '#contactForm', function(e) {

answered Feb 15 '17 at 13:50

Lelio Faieta

6,457
7
40
74

Ok i have change it. But as i said, the div below the form isn't fill with the text from the servlet. I redirect after submit to a blank page and at the left top i see the text from the servlet - not what i want – Captai-N Feb 15 '17 at 13:54
is this happening again after applying all the changes i suggested you? – Lelio Faieta Feb 15 '17 at 13:55
move the e.preventDefault before the ajax – Lelio Faieta Feb 15 '17 at 14:01
I do, same problem – Captai-N Feb 15 '17 at 14:10

score 0 · Accepted Answer · edited May 23 '17 at 12:16

0

If you just want place this text "Vielen Dank" in an div

remove these lines:

PrintWriter out = response.getWriter();    

out.println("Vielen Dank");

response.sendRedirect("kontakt.html");

and put this:

response.getWriter().write("Vielen Dank");

Sending form with JQuery and AJAX/-Servlet and stay on same page

3 Answers3

See also: