submit form to servlet using ajax and get results on same page

Question

I am having a problem with using ajax. If i remove the form tags then it works fine, the results show up on the same page. But with the form tags the results show on a different page i.e. straight to the servlet However i am trying to build this project with the form tags intact and to submit it from ajax instead of the form action, here is my code

account_recovery.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

        <script src="js/jquery-1.11.2.js" type="text/javascript"></script>  
        <script type="text/javascript">  
          $(document).ready(function(){  
              $("#subm").click(function(){  
                  var email = $('#inputEmail').val();  
                  if(email.length >= 3){  
                      $(".statusMessage").html("<img src='images/loading.gif'><font color=gray> Checking availability...</font>");  
                       $.ajax({  
                          type: "POST",  
                          url: "ForgotPasswordServlet",  
                          data: "email="+ email,  
                          success: function(msg){  
                              $(".statusMessage").html(msg);
                          }  
                      });   
                  }  
                  else{  

                      $(".statusMessage").html("<font color=red>Email should be <b>3</b> character long.</font>");  
                  }  

              });  
          });  
        </script>  

    </head>
    <body>
        <jsp:include page="header.jsp"/>


        <br/>

        <div class="container">
            <div class="col-md-6">
            <form class="form-horizontal"  action ="ForgotPasswordServlet" method ="POST">
                <h4 class="form-signin-header" style="margin-top: 75px;">Forgot your password?</h4>
                <br/>Enter the email address that you usually sign in with and we'll help you recover your account.
                <label for="inputUser" class="sr-only"><b>Email:</b></label>
                <br/><input type="text" id="inputEmail" name="email" class="form-control" placeholder="Enter your email address" required autofocus>
                <span class="statusMessage"></span>
                <br/>
                <button class="btn btn-md btn-primary btn-success" type="submit" id="subm"/>Submit</button>

        <br/>For more help to find your email address or password, visit the <a href="#">Help page</a>

            </form>
            </div>

        </div><!---end container--->
         <jsp:include page="footer.jsp"/>
    </body>
</html>

Code to the servlet can be provided if needed

bassxzero · Accepted Answer · 2015-04-11 02:26:46Z

1

You are not preventing the form submit. Instead try this.

    <script type="text/javascript">  
      $(document).ready(function(){  
          $('form').on('submit',function(event){
             event.preventDefault();
              var email = $('#inputEmail').val();  
              if(email.length >= 3){  
                  $(".statusMessage").html("<img src='images/loading.gif'><font color=gray> Checking availability...</font>");  
                   $.ajax({  
                      type: "POST",  
                      url: "ForgotPasswordServlet",  
                      data: "email="+ email,  
                      success: function(msg){  
                          $(".statusMessage").html(msg);
                      }  
                  });   
              }  
              else{  

                  $(".statusMessage").html("<font color=red>Email should be <b>3</b> character long.</font>");  
              }  

          });  
      });  
    </script>

answered Apr 11, 2015 at 2:26

bassxzero

5,01924 silver badges36 bronze badges

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

5 Comments

NimazSheik Over a year ago

I tried it and it didn't work, actually before posting here i even tried $('form').submit(function(e){ e.preventDefault(); but it didn't work it submits from the below form to the servlet, i also tried removing the action from the form. The only thing that stops the form from submitting is if I remove the form tags, but i have a feeling that it's wrong that way.

bassxzero Over a year ago

<button class="btn btn-md btn-primary btn-success" type="submit" id="subm"/>Submit</button> this line looks incorrect. Try <button class="btn btn-md btn-primary btn-success" type="submit" id="subm">Submit</button> instead

bassxzero Over a year ago

@NimazSheik are you getting any javascript errors when you submit?

NimazSheik Over a year ago

Actually your code did work, i accidentally put another bracket, my bad. Anyway thanks a lot dude, was a great help

bassxzero Over a year ago

@NimazSheik Not a problem.

Collectives™ on Stack Overflow

submit form to servlet using ajax and get results on same page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related