it create a record but it is empty - php

Question

well I am trying to insert user data and I made these codes , the record is being created but there is no data in it , just to clarify I have include the files and I am connected to the database and I think I declared all the necessary objects , if you know what is wrong I would appreciate a bit more explaining I am a beginner
addUser.php
<div id="message" class="flex-row align-center flex-nowrap">
<h4 class="heading flex-1"></h4>
</div>
<div class="flex-row form-row">
<div class="flex-column create-session-sidebar__column">
<form class="form" method="post">
<div class="Faseeh-form-input outlined"><label class="label">الاسم الاول</label>
<input id="fname" placeholder="" type="text" value=""></div>
<div class="Faseeh-form-input outlined"><label class="label">الاسم الثاني</label>
<input id="lname" placeholder="" type="text" value=""></div>
<div class="Faseeh-form-input outlined"><label class="label">اسم المستخدم</label>
<input id="username" placeholder="" type="text" value=""></div>
<div class="Faseeh-form-input outlined"><label class="label">البريد الالكتروني</label>
<input id="email" placeholder="" type="email" value=""></div>
<div class="Faseeh-form-input outlined"><label class="label"> الالكتروني</label>
<input id="password" placeholder="" type="password" value=""></div>
<div class="flex-row form-row">
<button id="addUser" class="Faseeh-btn Faseeh-btn Faseeh-btn-primary" type="submit">تسجيل</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
NewUser();
});
function NewUser() {
$(document).on('click', '#addUser', function() {
var fname = $('#fname').val();
var lname = $('#lname').val();
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
var data = "fname=" + fname + "&lname=" + lname + "&username=" + username + "&email=" + email + "&password=" + password;
if(fname == "" || lname == "" || username == "" || email == "" || password == ""){
$('#message').html('Please fill in the blanks');
}else{
$.ajax ({
url: 'core/register.php?',
type:'post',
data: data,
success: function(data) {
$("#message").html(data);
}
});
}
});
}
</script>
and this is register.php
<?php
include_once "util.php";
session_start();
$util = new util();
$post = $_POST['data'];
$data = json_decode($post);
$result = $util->newUser($data);
if($result) {
echo 1;
}else {
echo 0;
}
and finally util.php
public function newUser($data){
// Our database object
$db = new dbhandler();
// Quote and escape form submitted values
$fname = $db -> quote($fname->fname);
$lname = $db -> quote($lname->lname);
$username = $db -> quote($username->username);
$email = $db -> quote($email->email);
$password = $db -> quote($password->password);
// Insert the values into the database
$result = $db -> query("INSERT INTO `users` (`fname`,`lname`,`username`,`email`,`password`) VALUES (" . $fname . "," . $lname . "," . $username . "," . $email . "," . $password . ");");
}

Answer 1

Almost! 2 problems though.
You are sending in the data as a url format, but you are reading it as a JSON format. Instead of
var data = "fname=" + fname + "&lname=" + lname + "&username=" + username + "&email=" + email + "&password=" + password;
You need to create an object with:
var data = array(
"fname": fname,
"lname": lname,
"username": username,
"email": email,
"password": password
}
You need to get the variables from inside the $data object you passed in.
public function newUser($data){
// Our database object
$db = new dbhandler();
// Quote and escape form submitted values
$fname = $db -> quote($data->fname);
$lname = $db -> quote($data->lname);
$username = $db -> quote($data->username);
$email = $db -> quote($data->email);
$password = $db -> quote($data->password);
// Insert the values into the database
$result = $db -> query("INSERT INTO `users` (`fname`,`lname`,`username`,`email`,`password`) VALUES (" . $fname . "," . $lname . "," . $username . "," . $email . "," . $password . ");");
}