Skip to content

AJAX in sign in form: functions_sign_in.js (part 6)

September 27, 2013

AJAX will be used to communicate to a php file using POST and in return the php will then communicate to the Database and check if there are any duplicates like for example, emails or username. The code below is the function to be called that is attached to an event listener, onchange, of the input field…

parameter of the function:: name, name_value, name_POST

name:: used to pass the name attribute of the input field

name_value :: contains the value of that input field

name_POST :: what we want to name for the POST to be identified in php.  :: set the border of the input field to red before continuing further

  1. function passXMLPHP_signin(name, name_value, name_POST) {
  2. //++++++++++++++++++++++++++++++++++++++++++++++++++++
  3. = “2px groove red”;

XMLHttpRequest() creates the object and open and setRequestHeader are the methods

  1. var hr = new XMLHttpRequest();
  2.“POST”, "http://localhost/JalandoniSite/PHP/sign_in_page/signin  _check_inputs.php", true);
  3. hr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

onreadystatechange  is a listener.

if (hr.readyState === 4 && hr.status === 200) determines if the status of the communication with the php file is finished. meaning the data has finished retrieving.

responseText  :: is a XMLHttpRequest() method; contains the value returned form the php file.

if (response !== “OK”) :: if the response contains the string “OK”, then there are no error. else, we paint the border of that input field red and slideup ( a JQuiry method ) the div containing the response text or the error message returned from a php file.

  1. hr.onreadystatechange = function() {
  2. if (hr.readyState === 4 && hr.status === 200) {
  3. var response = hr.responseText;
  4. if (response !== “OK”) {
  5. $(“#” + name_POST).hide();
  6. showpopup(name_POST, response);
  7. } else {
  8. = “2px groove blue”;
  9. $(“#” + name_POST).slideUp(‘200’);
  10. }
  11. }
  12. };

send :: is another XMLHttpRequest() method. this contains the name of the POST ( name_POST ) and the value of that POST ( name_value ).

  1. var sendToPHP = name_POST + “=” + name_value;
  2. hr.send(sendToPHP);
  3. //++++++++++++++++++++++++++++++++++++++++++++++++++++
  4. }


Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.


Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.


A simple guide to programming...


Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans


Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

The Neighborhood

is under renovation in preparation for our 6th Season


News About Tech, Money and Innovation


The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: