AJAX call to servlet not working

Question

I have a servlet that will insert form input fields into my database and it works when I set

<form action="CreateUserServlet">

but I wanted to try some form validation stuff and the ajax servlet call returns success but the data is not added to my database.

servlet:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    String username = request.getParameter("usernameField");
    String password = request.getParameter("passwordField");

    if (MySqlCon.createUser(username, password)) {
        try (PrintWriter out = response.getWriter()) {
            out.println("<script type=\"text/javascript\">");
            out.println("alert('Account Successfully Created!');");
            out.println("</script>");
        }
    } else {
        try (PrintWriter out = response.getWriter()) {
            out.println("<script type=\"text/javascript\">");
            out.println("alert('Error in Creating Account!');");
            out.println("</script>");
        }
    }
}

html form

<div class="collapse" id="createAcc">
                <div class="create-wrapper">
                    <form method="post" id="create-ajax">
                        <h3> Enter your details </h3>
                        <div class="row">
                            <div class="col-md-12"> 
                                <input type="text" name="usernameField" placeholder="choose username" id="createUsername"/>
                                <p class="hideMsg" id="createUserError">bad username, try again</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" name="passwordField" placeholder="choose password" id="createPassword"/>
                                <p class="hideMsg" id="createPasswordError">bad password, try again</p>
                            </div>
                        </div>
                        <div class="row buttonRow">
                            <div class="col-md-12">
                                <input id="submitCreateAcc" type="submit" value="Create"/>
                                <p class="hideMsg" id="successMsg">Account created!</p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

the javascript:

$(document).ready(function () {
var createForm = $('#create-ajax');

$(createForm).submit(function (event) {
    event.preventDefault();

    var username = $('#createUsername').val();
    var password = $('#createPassword').val();

    if (username.length < 6) {
        $('#createUserError').removeClass('hideMsg').addClass('showMsg');
    } else {
        $('#createUserError').removeClass('showMsg').addClass('hideMsg');
    }
    if (password.length < 8) {
        $('#createPasswordError').removeClass('hideMsg').addClass('showMsg');
    } else {
        $('#createPasswordError').removeClass('showMsg').addClass('hideMsg');
    }

    if (username.length >= 6 && password.length >= 8) {
        $.ajax({
            url: 'CreateUserServlet',
            method: 'POST',
            success: function () {
                $('#successMsg').removeClass('hideMsg').addClass('showMsg');
            }
        });
    }
})
});

The sucessMsg is shown but the data did not get inserted. Any help is appreciated, thanks

Answer 1

You need to provide the data to submit with the post request, it does not get bound automatically.

$.ajax({
  url: 'CreateUserServlet',
  method: 'POST',
  data: createForm.serialize(),
  success: function () {
    $('#successMsg').removeClass('hideMsg').addClass('showMsg');
  }
});

And returning an alert from the server makes no sense in this case. You should return back a JSON object with the value you want to display to the user.