Want to run PHP query when submit button submitted using AJAX - php

Question

I want to run insert.php query if button name with "addUser" is submitted i don't know how to pass addUser name parameter using AJAX to insert.php file where it check if button is submitted or not .
if i remove if statement in insert.php file this is inserting users to database but if directly visit insert.php its inserting empty records in table
i want to prevent entry of empty records in table if i visit insert.php directly .
index.html
<form method="post" id="addForm">
Username :<input type="text" name="username" id="userName" />
Passkey :<input type="password" name="passkey" id="passKey"/>
<br/>
<input type="submit" name="addUser" id="submitBtn" value="Inser New User"/>
</form>
<script>
$("#addForm").submit(function(e){
let userNameZ = $("#userName").val();
let passKeyZ = $("#passKey").val();
$.ajax({
url:'insert.php',
type:'POST',
data: {userName:userNameZ,passKey:passKeyZ},
success: function(resp) {
if(resp == "inserted") {
$("#addForm").trigger("reset");
alert("New user inserted");
} else {
alert("Something went wrong");
}
}
});
});
</script>
insert.php
<?php
$conn = new PDO("mysql:host=localhost;dbname=test", "root", "");
if(isset($_POST['addUser'])){
$userName = trim($_POST['userName']);
$passKey = trim($_POST['passKey']);
$query = "INSERT INTO users (username,passkey) VALUES (:userName,:passKey)";
$stmt = $conn->prepare($query);
$stmt->execute(array(':userName'=>$userName, ':passKey'=>$passKey));
if($stmt) {
echo "inserted";
} else {
echo "not inserted";
}
}
?>

Answer 1

Change this if(isset($_POST['addUser'])){
to
if(isset($_POST['userName']) && isset($_POST['passKey'])){
OR in ajax, change
data: {userName:userNameZ,passKey:passKeyZ,addUser:1},
Notice: ,addUser:1
Adding answer to your comment
what if i have more than 10 values to be submit
.
You can use $("#addForm").serialize() and pass directly to data. Like
data: $("#addForm").serialize(),