Menu
While trying to create a registration page using PHP, JS and ajax, I run into errors that is due to the JS codes that I wrote and the reason for saying that is because without the ajax and JS codes, the PHP codes works perfectly.
This is the steps that I took, I wrote the HTML codes first and this is the HTML codes. It is called add.html
<!doctype html>
<html lang=’en’>
<head>
<meta charset=’utf-8′>
<title id=”title”>jQuery Insert</title>
<link rel=’stylesheet’ href=’css/styles.css’>
<script src=”js/jquery-3.3.1.min.js”></script>
</head>
<body>
<section id=”ball”>
<form action=”” method=”post” id=”theForm”>
<p><input type=”text” id=”f_name” name=”f_name” placeholder=”firstname” value=”></p>
<p><input type=”text” id=”l_name” name=”l_name” placeholder=”lastname” value=”></p>
</section>
<p><input type=”submit” id=”submit” value=”Submit” name=”submit”>
</p>
<p id=”success”></p>
<p id=”error”></p>
<p id=”statusT”></p>
<p id=”stat”></p>
<!–<script src=”js/insert.js”></script>–>
<script src=”js/ajax.js”></script>
<script src=”js/add.js”></script>
</body>
</html>
Then I create the ajax.js script
function getAjaxRequest(){
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}
if(window.ActiveXObject){// Older IE
ajax = new ActiveXObject(“MSXML.XMLHTTP.3.0”);
}
return ajax;
}
After this, I create the JS script
var f_name = document.getElementById(“f_name”).value;
var l_name = document.getElementById(“l_name”).value;
var submit = document.getElementById(“submit”);
var ajax = getAjaxRequest();
ajax.onreadystatechange = function(){
if(this.readyState == 4){
if((this.status == 200 || this.status < 300) && this.status == 304){
document.getElementById(“success”).innerHTML = this.responseText;
form.submit.disabled = true;
}else{
document.getElementById(“error”).innerHTML = this.responseText;
document.getElementById(“statusT”).innerHTML = this.statusText;
document.getElementById(“stat”).innerHTML = this.status;
}//End of status
}//End of readyState
}//End of ajax.onreadystatechange
ajax.open(“POST”, “/../../jquery/ajax/addStudent.php”);
var data =new FormData();
data.append(‘f_name’, f_name);
data.append(‘l_name’, l_name);
submit.addEventListener(‘click’, function(){
ajax.send(data);
}, false);//end of addEventListener
And finally, this the PHP script
<?php
// Set the database access information as constants:
DEFINE(‘DB_USER’, ‘willpower’);
DEFINE(‘DB_PASSWORD’, ‘arseblog’);
DEFINE(‘DB_HOST’, ‘localhost’);
DEFINE(‘DB_NAME’, ‘school’);
// Make the connection:
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
// Set the character set:
mysqli_set_charset($dbc, ‘utf8’);
if($_SERVER[‘REQUEST_METHOD’] == ‘POST’){
$sqlistu = “INSERT INTO students (`first_name`last_name
(?,?)”;
$queryistu = $dbc->prepare($sqlistu);
//echo $db->error;
$queryistu->bind_param(“ss”, $f_name, $l_name);
$queryistu->execute();
$IDnum = mysqli_insert_id($dbc);
// Free result set
$queryistu->close();
///////////////////////////
if (isset($IDnum)):
echo ‘success’ . ‘<br>’;
echo $IDnum;
endif;
}
While checking the NETWORK of the firefox developer edition browser under XHR and under RESPONSE, it shows the success message which was set to show
document.getElementById(“success”)
which was set to the
responseText
of ajax even before filling the form