I'm trying to submit a form using AJAX. If I'm using the submit button it saves it, but if I'm using AJAX the form isn't saved.
This works (the form is saved into the DB)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" />
<meta charset="utf-8" />
<title>HotSpot</title>
</head>
<body>
<form accept-charset="utf-8" name="mail" action="http://10.30.20.30:8080/Site/anti-xss.php" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</body>
</html>
This does not work (the data isn't saved into the DB), but the console.log writes:
Start AJAX!
Success!
You'r email is something@some.one.
XHR2 4
XHR2 200
AJAX sent!
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" />
<meta charset="utf-8" />
<title>HotSpot</title>
</head>
<body>
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
<script>
document.getElementById("submit_ok").addEventListener("click", sendAjax);
async function sendAjax() {
console.log("Start AJAX!");
let ax2 = await Ajax2 ("POST", "http://10.30.20.30:8080/Site/anti-xss.php")
console.log("AJAX sent!");
}
function Ajax2 (method, url){
return new Promise (function (resolve, reject){
let xhr2 = new XMLHttpRequest();
xhr2.open('POST', 'http://10.30.20.30:8080/Site/anti-xss.php', true);
xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr2.onload = function(){
if(this.status >= 200 && this.status < 300){
resolve(xhr2.response);
console.log("Success!");
console.log("You'r email is " + useremail + ".");
console.log("XHR2 " + xhr2.readyState);
console.log("XHR2 " + xhr2.status);
}else{
reject({
status: this.status,
statusText: xhr2.statusText
});
}
};
xhr2.onerror = function (){
reject({
status: this.status,
statusText: this.statusText
});
};
let useremail = document.getElementById("email").value;
xhr2.send("Email="+encodeURIComponent(useremail));
});
}
</script>
</body>
</html>
PHP - connect.php
<?php
header('Access-Control-Allow-Origin: *');
$host = "localhost";
$userName = "root";
$password = "";
$dbName = "baza";
// Create database connection
$DB = new mysqli ($host, $userName, $password, $dbName);
//$conn = new mysqli($host, $userName, $password, $dbName);
// Check connection
if ($DB->connect_error) {
die("Connection failed: " . $DB->connect_error);
}
?>
PHP - anti-xss.php
<?php
require ('connect.php');
$clean_email = "";
$cleaner_email = "";
if(isset($_POST['email']) && !empty($_POST['email'])){
//sanitize with filter
$clean_email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
//sanitize with test_input
$cleaner_email = test_input($clean_email);
//validate with filter
if (filter_var($cleaner_email,FILTER_VALIDATE_EMAIL)){
// email is valid and ready for use
echo "Email is valid";
//Email is a column in the DB
$stmt = $DB->prepare("INSERT INTO naslovi (Email) VALUES (?)");
$stmt->bind_param("s", $cleaner_email);
$stmt->execute();
$stmt->close();
} else {
// email is invalid and should be rejected
echo "Invalid email, try again";
}
} else {
echo "Please enter an email";
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$DB->close();
?>
Thank you for the help.
