Ajax is not sending POST data - php

Question

I'm making a registration form where the script is executed in a seperate file that is used thru AJAX.
I have tried using the script directly by doing <form action="assets/php/action.php?action=register method="post" id="registration-form"> And it works that way however I would like to use AJAX to do this.
The problem with that is that if I use AJAX the POST data is not sent to the action.php file.
I have tried debugging my code but I cannot find what is causing the issue.
My registration form:
<form action="#" method="POST" class="user" id="register-form">
<div id="regAlert"></div>
<div class="form-group row">
<div class="col-sm-12 mb-3 mb-sm-0">
<input type="text" name="name" id="name" class="form-control form-control-user"
placeholder="Name" required>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="remail" name="email"
placeholder="Email Address" required>
</div>
<div class="form-group row">
<div class="col-sm-6">
<div id="passError" class="text-danger font-weight-bold"></div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" class="form-control form-control-user"
id="rpassword" name="password" placeholder="Password" required minlength="8">
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user"
id="cpassword" name="cpassword" placeholder="Repeat Password" required minlength="8">
</div>
</div>
<input type="submit" value="Register Account" id="register-btn" name="register" class="btn btn-primary btn-user btn-block">
<hr>
</form>
My AJAX script: (Sorry about the comments that are not in English)
<script type="text/javascript">
$(document).ready(function() {
//Register Form Ajax Request
$("#register-btn").click(function(e) { //Kui registreerimis nuppu vajutatakse, siis
if($("#register-form")[0].checkValidity()) { //Kontrolli formi õigsust
e.preventDefault();
$("#register-btn").val('Creating Account...'); //Muudab registreerimis nupu teksti
if($("#rpassword").val() != $("#cpassword").val()) { //Kui paroolid ei ole samad siis näitab errori
$("#passError").text('* Passwords did not match!'); //Paroolide mitte sama olemise error
$("#register-btn").val('Register Account'); //Muudab registreerimis nupu teksti
} else { //Kui paroolid kattusid, siis
$("#passError").text(''); //Eemaldab paroolide mitte sama olemis errori kirja
$.ajax({
url: "assets/php/action.php",
method: 'POST',
data: $("register-form").serialize()+'&action=register',
success:function(data) {
$("#register-btn").val('Register Account'); //Muudab registreerimis nupu teksti
if(data === 'register') {
window.location = 'home.php';
} else {
$("#regAlert").html(data);
}
}
});
}
}
});
});
</script>
My action.php file:
<?php
session_start();
require_once 'auth.php';
$user = new Auth();
if(isset($_POST['action'])) {
if($_POST['action'] == 'register') {
$name = $user->test_input($_POST['name']);
$email = $user->test_input($_POST['email']);
$pass = $user->test_input($_POST['password']);
$hpass = password_hash($pass, PASSWORD_DEFAULT);
echo $name;
echo $email;
echo $pass;
if($user->user_exist($email)) { //Kontrollib kas selle meiliaadressiga on konto juba registreeritud, kui on siis
echo $user->showMessage('warning', 'This email is already registered'); //Saadab inimesele kirja, et selle emailiga on konto juba registeeritud, 'warning' tähendab teate tüüpi, teine tekst on kiri, mida saadab
} else { //Kui selle meiliaadressiga pole kasutajat veel registeeritud, siis
if($user->register($name, $email, $hpass)) {
echo 'register';
$_SESSION['user'] = $email;
} else {
echo $user->showMessage('danger', 'Something went wrong! Please try again later or contact support.');
}
}
print_r($_POST); //This only outputs that the action is register, no POST values are outputted
die();
}
}
?>
Thanks,
Nimetu.

Answer 1

Don't use AJAX. Use fetch instead, you don't need external libraries like jQuery and more efficient. This is an example:
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
More information here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch