Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax XMLHttpRequest.responseText working conditionally
    primarykey
    data
    text
    <p>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.</p> <p>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. </p> <p>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.</p> <p>Can someone help me understand why this is happening.</p> <p>// FORM</p> <pre><code>class Teacher { function AddATeacher() { ## Template for form with image ## echo "&lt;img src='../images/addaTeacher.png' alt='add A teacher icon' align='middle' width='90' height='90' /&gt;"; echo " &lt;b&gt;&amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp Add a Teacher &lt;/b&gt; &lt;br&gt; &lt;br&gt;"; ## Template for form with image ## echo "&lt;form name ='login' onsubmit='AddATeachers()' method='post'&gt;"; echo "First Name: &amp;emsp&amp;emsp&amp;emsp&amp;emsp&amp;emsp &lt;input type='text' size='15' maxlength='15' onclick=this.value='' id='teachers_first_name' value='Teachers First Name' /&gt; &lt;br&gt;"; echo "Surname: &amp;emsp&amp;emsp&amp;emsp&amp;emsp&amp;emsp&amp;emsp&lt;input type='text' size='15' maxlength='15' onclick=this.value='' id='teachers_surname' value='Teachers surname' /&gt; &lt;br&gt;"; echo "Number: &amp;emsp&amp;emsp&amp;emsp&amp;emsp&amp;emsp &amp;emsp &lt;input type='text' size='15' maxlength='15' onclick=this.value='' id='teachers_number' value='Teachers number' /&gt; &lt;br&gt;"; echo "Email address: &amp;emsp&amp;emsp&amp;emsp&amp;emsp&lt;input type='text' size='15' maxlength='25' onclick=this.value='' id='teachers_email' value='Email address' /&gt; &lt;br&gt;"; echo "Password: &amp;emsp &amp;emsp &amp;emsp&amp;emsp&amp;emsp &lt;input type='password' size='15'maxlength='25' id='password' value='' /&gt; &lt;br&gt;"; echo "&lt;hr/&gt;"; echo " Sex: &lt;select value= 'Male' id='sex'&gt; &lt;option&gt; &lt;/option&gt; &lt;option&gt;Male&lt;/option&gt; &lt;option&gt;Female&lt;/option&gt; &lt;/select&gt; "; echo " Assigned Class: &lt;select value= 'Choose a class' id='classes'&gt; &lt;option&gt; &lt;/option&gt; &lt;option&gt;P1 East&lt;/option&gt; &lt;option&gt;P1 West&lt;/option&gt; &lt;option&gt;P2 East&lt;/option&gt; &lt;option&gt;P2 West&lt;/option&gt; &lt;option&gt;p3 East&lt;/option&gt; &lt;option&gt;p3 West&lt;/option&gt; &lt;option&gt;p4 East&lt;/option&gt; &lt;option&gt;p4 West&lt;/option&gt; &lt;option&gt;p5 East&lt;/option&gt; &lt;option&gt;p5 West&lt;/option&gt; &lt;option&gt;p6 East&lt;/option&gt; &lt;option&gt;p6 West&lt;/option&gt; &lt;option&gt;p7 East&lt;/option&gt; &lt;option&gt;p7 West&lt;/option&gt; &lt;/select&gt;"; echo" &lt;hr/&gt; &lt;input type='submit' value='Submit' /&gt;&lt;br /&gt;"; echo "&lt;/form&gt;"; } } </code></pre> <p>//AJAX FUNCTION</p> <pre><code>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 + "&amp;tSurname=" + teachers_surname + "&amp;tNumber=" + teachers_number + "&amp;tEmail=" + teachers_email + "&amp;tPwd=" + password + "&amp;tSex=" + gender + "&amp;tClass=" + tClass ; //alert ("After Query String..."); ajaxRequest.open("GET","addATeacherInsert.php" + queryString, true); ajaxRequest.send(null); alert ("Process Complete"); } </code></pre> <p>// addATeacherInsert.php which calls a Class Method/Instance</p> <pre><code>&lt;?php require ("database.php"); require ("teacher.class"); mysql_connect(HOSTNAME, USERNAME, PASSWORD) or die(mysql_error()); //echo "Connected to MySQL&lt;br /&gt; &lt;br /&gt;"; mysql_select_db(DATABASE) or die(mysql_error()); //echo "Connected to Database: " . DATABASE . " &lt;br /&gt;"; $sql = ("SELECT * FROM Teachers_Table WHERE TFirstName='$_GET[tFirstName]' AND TSurName= '$_GET[tSurname]' "); $query = mysql_query($sql); $Sample = new Teacher; $Sample-&gt;AddATeacherInsert(); ?&gt; </code></pre> <p>//METHOD</p> <pre><code>function AddATeacherInsert() { mysql_connect(HOSTNAME, USERNAME, PASSWORD) or die(mysql_error()); //echo "Connected to MySQL&lt;br /&gt; &lt;br /&gt;"; mysql_select_db(DATABASE) or die(mysql_error()); //echo "Connected to Database: " . DATABASE . " &lt;br /&gt;"; ##### 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 "&lt;br&gt;"; echo "&lt;center&gt; &lt;img src='../images/approved.png' alt='Enroll student icon' align='bottom' width='90' height='90' /&gt; &lt;/center&gt;"; echo "&lt;br&gt;&lt;center&gt; &lt;b&gt; &lt;font color='blue'&gt;" . $_GET[tFirstName] . " " . $_GET[tSurname] . "&lt;/b&gt; has been successfully enrolled...&lt;/font&gt;&lt;/center&gt;&lt;br /&gt;"; } </code></pre> <p>thank you in advance</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload