Not getting any response with ajax - php

Question

I made a simple script to insert data to database using ajax and jquery . It seems that I am not receiving back any response , and I don't think I am doing something wrong . So , can anybody take a look and help me ?
process.php
<?php
$id = $_POST['id'];
$user= $_POST['username'];
$password = $_POST['password'];
$con = mysqli_connect('localhost','root','','car_rental');
$query = 'insert into car_admin (admin_id,admin_username,admin_password) values(?,?,?)';
$query = $con->prepare($query);
$query-> bind_param('iss',$id,$user,$password);
if($query->execute()) { echo "done";}
else { echo "failed"; }
$query->close();
$con->close();
?>
register.php
<script src="jquery-1.12.4.js"></script>
<script src="script.js"></script>
<form id="register" method="POST" >
<fieldset>
<legend>
Register
</legend>
ID: <input id="id" type="text" name="id" value="" />
Username : <input id="username" type="text" name="username" value="" />
Passsword : <input id="password" type="password" name="password" value="" />
<input id="submit" type="submit" name="submit" value="Register" />
</fieldset>
</form>
<div id="result"></div>
jquery
$(document).ready( function() {
$('#submit').click(function() {
var id = $('#id').val();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type:'post',
url:'process.php',
data:'id='+id+'username='+username+'password='+password,
success:function(data){
$('#result').html(data);
}
});
});

Answer 1

Prevent the form from submitting via the browser
You need to change your code to include the correct formatting
data:'id='+id+'&username='+username+'&password='+password,
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<form id="register" >
<fieldset>
<legend>
Register
</legend>
ID: <input id="id" type="text" name="id" value="" />
Username : <input id="username" type="text" name="username" value="" />
Passsword : <input id="password" type="password" name="password" value="" />
<button id="submit" name="submit" />Register</button>
</fieldset>
</form>
<div id="result"></div>
<script>
$(document).ready( function() {
$('#submit').click(function(e) {
e.preventDefault(); // Prevent the form from submitting via the browser
var id = $('#id').val();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type:'post',
url:'login.php',
data:'id='+id+'&username='+username+'&password='+password,
success:function(data){
$('#result').html(data);
}
});
});
});
</script>

Answer 2

The reason your ajax is failing is because you are not posting the parameters correctly. If ID is 1, username is "Username", and password is "password", the following code will return the value shown.
'id='+id+'username='+username+'password='+password,
id=1username=Usernamepassword=Password
You need to change your code to include the correct formatting, as per below.
'id='+id+'&username='+username+'&password='+password,
Then your Ajax request should work. I can see no problems with your PHP. I would also suggest doing an encodeURIComponent as if your strings contain any URI characters, it will cause further problems. Take a look at this tutorial as it is an excellent example of making an Ajax request.