Ajax, javascript, php not working perfectly

PHP
1

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>

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`) VALUES
        (?,?)";

        $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

2

You should remove that bit. The response code of this call should never be 304.

3

And on that,

if((this.status == 200 || this.status < 300) && this.status == 304){

what number could ever be either 200, or less than 300, and equal to 304, all at the same time?

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.