I have a registration page on my website for which I want to implement PHP and AJAX validation. I will show template of my code (my code is much bigger) to try to explain the problem.
registration.php
<!DOCUMENT html>
<html>
<head>
<script>
$(document).ready(function(){
$("#signupForm").submit(function(event){
event.preventDefault();
var firstNameInput = $("#firstName").val();
var lastNameInput = $("#firstName").val();
$(".messageForm").load("inculdes/signup.script.php", {
firstName: firstNameInput,
lastName: lastNameInput
});
});
});
</script>
</head>
<body>
<form id="signupForm" action="includes/signup.script.php" method="POST">
<input id="firstName" type="text" name="firstName">
<input id="firstName" type="text" name="firstName">
<button id="submit" name="submit" type="submit">Submit</button>
<div class="messageForm"></div>
</form>
</body>
</html>
signup.script.php
<?php
if (isset($_POST['submit'])) {
include "dbconn.script.php";
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
//Validators for inputs in PHP with various error messages (1-15) and database INSERT and SELECT functions.
...
} else {
echo "<span>Error 16</span>";
exit();
}
}
?>
<script>
// JQuery validator for inputs and CSS style changers based on errors
...
</script>
My problem is when I click Submit button, I get error message "Error 16", so my function skip whole PHP script and does not insert data into database. I concluded that the problem is because the variable $_POST['submit'] is not set, because when I change first line of code to if (!isset($_POST[submit''])), it works like charm, but I don't wanna loose ability to prevent users from type signup.script.php in URL field of the browser and run it. How to correct this to work? The tutorial I watched has this code and in that case it works without problem.
P.S. I will expand my code if needed for solution of this problem, because I wanted to spare space so I gave the shorthand version of it.
You simply don't send "submit" with the request. You could add it here:
$(".messageForm").load("inculdes/signup.script.php", {
firstName: firstNameInput,
lastName: lastNameInput,
submit: 1
});
or check for isset($_POST['firstName'])
Sidenote: If there wasn't an object passed in with load() it would be a GET request. Worth remembering...
Request Method
The POST method is used if data is provided as an object; otherwise, GET is assumed.
according to the jQuery documentation of jQuery.load() (which is a shorthanded jQuery.ajax method), this sound much alike if this would be a $_GET and not a $_POST... better use something alike jQuery.ajax() in combination with method: 'POST' - or check for the $_GET in PHP.
Dear check your JavaScript code carefully
event.preventDefault(); // Preventing default form submission
$(".messageForm").load("inculdes/signup.script.php", {
firstName: firstNameInput,
lastName: lastNameInput
});
Only posts firstName and lastName to signup.script.php
And you are trying to check for isset($_POST['submit']) It will surely be false until you pass 'submit' in post like firstName and lastName you have passed already like below
$(".messageForm").load("inculdes/signup.script.php", {
firstName: firstNameInput,
lastName: lastNameInput,
submit: 'yes'
});
Hope it helps