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.

name.style.border  :: set the border of the input field to red before continuing further

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

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

  1. var hr = new XMLHttpRequest();
  2. hr.open(“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. name.style.border = “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. }

DOWNLOAD COMPLETE CODES HERE

Advertisements
Leave a Comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

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.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

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

The Neighborhood

telling the story from every vantage point

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

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: