Ajax XMLHttpRequest.responseText有条件地工作

Question

I created an Ajax function purposely to read in inputs from a FORM, create a query string and send it to PHP file, which inserts the data into a database and sends feedback indicating the successful or a failure of the process.

The Problem is that the Ajax XMLHttpRequest.responseText dose not function. Which means, the end user dose not get to get the feedback from the php file: if the process was successful or a failure.

Strangely I found out that when I put an alert() function at the end of the Ajax function, then the XMLHttpRequest.responseText magically starts working. As you can imagine this is annoying as it creates a popup each time the process is run.

Can someone help me understand why this is happening.

// FORM

class Teacher {

    function AddATeacher()
    {   


        ## Template for form with image ##

        echo "<img src='../images/addaTeacher.png' alt='add A teacher icon' align='middle' width='90' height='90' />";
        echo " <b>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Add a Teacher </b> <br> <br>";



        ## Template for form with image ##


        echo "<form name ='login' onsubmit='AddATeachers()' method='post'>";        

        echo "First Name: &emsp&emsp&emsp&emsp&emsp <input type='text' size='15' maxlength='15'
              onclick=this.value='' id='teachers_first_name'
              value='Teachers First Name' /> <br>";

        echo "Surname: &emsp&emsp&emsp&emsp&emsp&emsp<input type='text' size='15' maxlength='15'
              onclick=this.value='' id='teachers_surname'
              value='Teachers surname' /> <br>";

        echo "Number: &emsp&emsp&emsp&emsp&emsp &emsp <input type='text' size='15' maxlength='15'
              onclick=this.value=''  id='teachers_number'
              value='Teachers number' /> <br>";

        echo "Email address: &emsp&emsp&emsp&emsp<input type='text' size='15'
              maxlength='25' onclick=this.value='' id='teachers_email'
              value='Email address' /> <br>";

        echo "Password: &emsp &emsp &emsp&emsp&emsp <input type='password' size='15'maxlength='25' 
              id='password' value='' /> <br>";

        echo "<hr/>";

        echo "
            Sex: 
            <select value= 'Male' id='sex'>
            <option> </option>
            <option>Male</option>
            <option>Female</option>
            </select> ";

        echo "  
        Assigned Class:
            <select value= 'Choose a class' id='classes'>
            <option> </option>          
            <option>P1 East</option>
            <option>P1 West</option>
            <option>P2 East</option>
            <option>P2 West</option>
            <option>p3 East</option>
            <option>p3 West</option>
            <option>p4 East</option>
            <option>p4 West</option>
            <option>p5 East</option>
            <option>p5 West</option>
            <option>p6 East</option>
            <option>p6 West</option>
            <option>p7 East</option>
            <option>p7 West</option>
            </select>";

        echo"
        <hr/>
        <input type='submit' value='Submit' /><br />";

        echo "</form>";

    }
}

//AJAX FUNCTION

function AddATeachers(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.getElementById("Ajax_response").innerHTML = ajaxRequest.responseText;
        }
    }

    //alert ("Above ur variables ");
    var teachers_first_name = document.getElementById("teachers_first_name").value;
    //alert ("within ur variables 1111111111 ");
    var teachers_surname = document.getElementById('teachers_surname').value;
    var teachers_number = document.getElementById('teachers_number').value;
    //alert ("within ur variables 222222222 ");
    var teachers_email = document.getElementById('teachers_email').value;
    var password = document.getElementById('password').value;
    //alert ("Email retrieved: " + password + "");
    var tClass = document.getElementById('classes').value;
    var gender = document.getElementById('sex').value;      
    //alert ("Class value: " + tClass + "");    
    //alert ("Exited ur variables ");

    //alert ("Just before Query String...");
    var queryString = "?tFirstName=" + teachers_first_name + "&tSurname=" + teachers_surname + "&tNumber=" + teachers_number + "&tEmail=" + teachers_email + "&tPwd=" + password + "&tSex=" + gender + "&tClass=" + tClass  ;   
    //alert ("After Query String...");

    ajaxRequest.open("GET","addATeacherInsert.php" + queryString, true);
    ajaxRequest.send(null); 
    alert ("Process Complete");
}

// addATeacherInsert.php which calls a Class Method/Instance

<?php
require ("database.php");
require ("teacher.class");

mysql_connect(HOSTNAME, USERNAME, PASSWORD) or die(mysql_error());
//echo "Connected to MySQL<br /> <br />";
mysql_select_db(DATABASE) or die(mysql_error());
//echo "Connected to Database: " . DATABASE . " <br />";

$sql = ("SELECT * FROM Teachers_Table WHERE TFirstName='$_GET[tFirstName]' AND TSurName= '$_GET[tSurname]' ");
$query = mysql_query($sql);
$Sample = new Teacher;
$Sample->AddATeacherInsert();

?>

//METHOD

function AddATeacherInsert()
    {   


        mysql_connect(HOSTNAME, USERNAME, PASSWORD) or die(mysql_error());
        //echo "Connected to MySQL<br /> <br />";
        mysql_select_db(DATABASE) or die(mysql_error());
        //echo "Connected to Database: " . DATABASE . " <br />";

        ##### Insert into Teachers_Table ######
        mysql_query("INSERT INTO Teachers_Table 
        (TFirstName, TSurName, TNumber, TAddress, TPwd, TClassAssig, TSex) VALUES
        ('$_GET[tFirstName]', '$_GET[tSurname]', '$_GET[tNumber]', '$_GET[tEmail]', 
        '$_GET[tPwd]', '$_GET[tClass]', '$_GET[tSex]') ") 

        or die(mysql_error()); 

        ##### Insert into login_details ######
        mysql_query("INSERT INTO login_details 
        (email_address, password) VALUES
        ('$_GET[tEmail]', '$_GET[tPwd]') ") 

        or die(mysql_error()); 

        echo "<br>";
        echo "<center> <img src='../images/approved.png' alt='Enroll student icon' align='bottom' width='90' height='90' /> </center>";

        echo "<br><center> <b> <font color='blue'>" . $_GET[tFirstName] . " " . $_GET[tSurname] . "</b>  has been successfully enrolled...</font></center><br />";      
}

thank you in advance

Answer 1

I haven't worked much with MySQL but unless any errors thrown by the MySQL commands are outside the scope of php errors, you could just interpret ajaxRequest.status. A list of the different status codes can be found here .