I am trying to print result on same page using ajax query in java servlet form

Question

Here is my JSP code. I did ajax query though but it's not working that means i am not getting result on same page after successfully registered.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"%></script>
<script type="text/javascript"/>
    function post()
     {
    var FirstName = document.getElementByName("FirstName").value;
    var Lastname = document.getElementByName("Lastname").value;
    var Email_Id = document.getElementByName("Email_Id").value;
    var Gender = document.getElementByName("Gender").value;
    var Comments = document.getElementByName("Comments").value;
    if(FirstName && Lastname && Email_Id && Gender && Comments)
    {
        $.ajax
        ({
            type: 'post',
            url: 'RegisterServlet.java',
            data:
        {
            user_FirstName:FirstName,
            user_Lastname:Lastname,
            user_Email:Email_Id,
            user_Gender:Gender,
            user_Comments:Comments
        },
        success: function (response)
        {
            document.getElementByName("insert").innerHTML="Form Successfully Registerd";
        }


        })  
        }
    return false;
    }
</script>

<body>
<form action="register" method="post">

        FirstName:*<input type="text" name="FirstName" required="required" /><br/>
        Lastname:*<input type="text" name="Lastname" required="required" /><br/>
        Email_Id:*<input type="text" name="Email_Id" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required="required"  /><br/>

        Gender:<select name="Gender">
            <option>Male</option>
            <option>Female</option>
        </select> <br/>
        Comment:*<input type="text" name="Comments" required="required"/><br/>
        <input type="submit" value="Submit" name="insert"/>

    </form>
</body>
</html>

I want to print the success message on same page without reloading a new one. And do i need to change something in my servlet file as well?

score 2 · Accepted Answer · answered Jan 27 '18 at 20:09

You never actually call the post function with your ajax code or stop the form from loading the register page.

If you called the post function then checked your console you might see something like Uncaught TypeError: document.getElementByName is not a function, because the function is getElementsByName(notice the s) and it returns a list of elements which needs to be taken into account.
Since you're using jQuery you could just use .serialize() on the form to get its field data.

$(document).ready(function(){

    $('form').submit(function()
    {
        $.ajax
        ({
            type: 'post',
            url: 'RegisterServlet.java',
            data: $(this).serialize(),
            success: function (response)
            {
                document.getElementsByName("insert")[0].innerHTML="Form Successfully Registerd";
            }
        }); 
        return false;
    });
});

Would it work if i copy your answer code in my JSP code? – Hanut Jan 27 '18 at 20:34 — Hanut, Jan 27 '18 at 20:34

I am trying to print result on same page using ajax query in java servlet form

1 Answers1