jQuery AJAX not working when passing data to a PHP page

Question

Validation part of my jQuery works, however, the AJAX part does not seem to be doing anything and I am wondering why? It comes up with no errors and the registration works perfect without the AJAX, however, I have to use it.

HTML form in register.php:

<form method="post" action="register.php" name="registration-form" id="register-form">
    <div class="form-group" id="email-group">
        <label for="email"> Email address </label>
        <input id="email" type="email" name="email" class="form-control" aria-describedby="emailHelp" required>
    </div>
    <div class="form-group" id="password-group">
        <label for="password"> Password </label>
        <input id="password" type="password" name="password" class="form-control" required>
    </div>
    <div class="form-group form-check">
        <input type="checkbox" name="terms" class="form-check-input" required> I accept the <a class="privacy-link"
            href="privacy-policy.php"> Privacy Policy </a>
    </div>
    <button type="submit" name="register_user" class="btn btn-primary" value="register_user">Register</button>
</form>

jQuery with AJAX:

$(document).ready(function () {
    $("#register-form").submit(function (event) {
        event.preventDefault();
    }).validate({
        rules: {
            email: {
                minlength: 6
            },
            password: {
                minlength: 8
            }
        },
        messages: {
            email: "Email should be at least 6 characters",
            password: "Password should be at least 8 characters"
        },
        submitHandler: function (form) {

            var email = $("#email").val();
            var password = $("#password").val();

            $.ajax({
                url: "register.php",
                contentType: "application/json",
                type: "POST",
                data: {
                    email: email,
                    password: password
                }
            }).done(function (response) {
                // some actions
            });
        }
    });
});

register.php PHP to handle it:

if (isset($_POST['register_user'])) {
    /* Others */
}

I tried various "isset", but to no avail.

Answer 1

there are few things wrong i see here.

1. maybe you should not catch the "submit" event of your form, i believe validation plugin take care of it. as per the doc : https://jqueryvalidation.org/validate/#submithandler maybe you should remove this part :

   .submit(function(event) { event.preventDefault(); })

2. in your ajax call, you submit 2 post variables email and password but in your PHP file you try to retrieve $_POST['user_registration'] variable which DOES NOT EXIST because you didn't submit your form to the server's register.php file, you submitted only the 2 variables email and password

I suggest you using FormData (https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) so you only have to update the following piece of code to make it work (in theory)

example

data = new FormData(document.getElementById('#register-form'));
$.ajax({
              url: "register.php",
              type: "POST",
              data: data,
              processData: false,
              contentType: false,
          })

you can refer to this SO question https://stackoverflow.com/a/8244082/5856233