hi guys ,here’s a new trick using jQuery ajax,

while working on a login system actually i was using jQuery in building some cool GUI components

so i faced a problem how will i send the user data to the server to check them ?!!

the only solution is to use ajax and the steps to do that

  1. Get the user data from textboxes using JavaScript.
  2. Deal with some jQuery ajax codes to send the user data to the server using post.
  3. The php file will check the user data.
  4. Receive the response from the php file using jQuery ajax.

So now let’s get some geeky behavior with some code snippets

first the html file that contains the form

<title>jQuery Ajax Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="ajax_test.js"></script>
<p>User Name</p><input type="text" id="userName" />
<p>Password</p><input type="password" id="password" />
<br />
<div id="loginButton"><pre>Sign In</pre></div>
<div id="check"></div>


here a put an empty div with an id called check when the user data is true then i’ll user it to inform him,also when invalid data i’ll use it to tell the user

here’s the ajax_test.js

$("#loginButton").button() ;

var user = document.getElementById(“userName”).value;
var pass = document.getElementById(“password”).value;
$.post(“login.php”,{userName : user , password : pass } ,function(data) {//assign the php variables userName=user and password=pass
document.getElementById(“check”).innerHTML=”Login Successfully”;//if the serever respond with yes
if (data==’no’) {
document.getElementById(“check”).innerHTML=”Error in user Data”;//if the server respond with no


the most important method used here is $.post() it has three parameters

first the requested file on the server,then the passed parameters to the server (we use the : operator as an assignment operator),and last the code that handles the received data

in this tutorial the server is supposed to respond with either yes or no

and finally here’s the full source code



8 responses »

  1. Medhat Dawoud says:

    nice article, but try to write the codes in the HTML mode inside


    to appear more clear 🙂

    go on

  2. biga says:

    زيز ارتيكل ايز فييييييييرى جود
    زانكس علاء

  3. shakle hst3’allek kteer :D…bas good job MSA (Y)

  4. I am sure this article has touched all the internet users, its really
    really pleasant piece of writing on building up new webpage.

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s