Learn PHP & Ajax & Jquery: October 2009

Creating a Dynamic Poll with jQuery and PHP

When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we'll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

Original Post Url

Demo

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

AutoCompleter like google search using ajax ,php,mysql

Demo & Download

A Pretty Ajax Contact Form With jQuery & PHP

Tutorialzine is sharing a nice tutorial with source on creating a fancy Ajaxed contact form that is built with jQuery & PHP.
The form is unobtrusive & has a server-side validation which makes it degrade gracefully when the JavaScript is turned off.

Requirements: PHP
Compatibility: All Major Browsers
Website: http://tutorialzine.com/2009/09/fancy-contact-form/
Demo: http://demo.tutorialzine.com/2009/09/fancy-contact-f...

A simple AJAX Contact Form with JQuery and PHP Validation

The aim of this tutorial is to help you to create a simple (tableless) contact form using AJAX, JQuery & PHP. We will have a HTML page which will contain the form, a CSS file, a php page where the data will be sent and another file where the validation function(s) will be located. JQuery is a new and powerful library which simplifies the way that you write JavaScript.

Demo
Download
To See Original Post Click Hear

Using Ajax to Validate Forms

Forms are such a common element on the Internet we tend to blunder through them without too much thought. However, if the web site has added a few nice touches that make the process easier, it tends to speed up the process and reduce any frustration in finding our preferred username (i.e. try getting your name under Hotmail!).

See Demo

How to Validate Forms in both sides using PHP and jQuery

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.

click hear to see Example

Using jQuery with Other Libraries

General

The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, "global" objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

Overriding the `$`-function

However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

<html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>

   <script>
     jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.
Read MOre From Direct Jquery site Click Hear

php & ajax Login Script

Html file For Ajax Login

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="ajex_login.js"></script>
<form name="login_form" method="post" action="javascript:login();" id="login_form">
    <table width="70%" border="0" align="center" cellpadding="2" cellspacing="2">
      <tr>
        <td colspan="2" class="star" align="center"><div id="login_response" class="star"></div></td>
    </tr>
      <tr>
        <td width="40%" align="right" class="label">User Name : </td>
        <td width="60%"><input type="text" name="UserName" class="input" id="UserName"/>
      </tr>
      <tr>
        <td align="right" class="label">Password : </td>
        <td><input type="password" name="Password" class="input" id="Password"/>
        
        <span id="password_warning" style="color:red" class="star"></span></td>
      </tr>
      <tr>
        <td align="right"> </td>
        <td>
        <input type="submit" name="Submit" value="Login" class="submit" />
        <input type="reset" name="Reset" value="Reset" class="submit"/></td>
      </tr>
    </table>
    
    </form>

Javascript file for Ajax login ajex_login.js
// JavaScript Document
function createObject()
{
    var request_type;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer")
    {
        request_type = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        request_type = new XMLHttpRequest();
    }
    return request_type;
}

var http = createObject();

var nocache = 0;
function login()
{
    // Optional: Show a waiting message in the layer with ID ajax_response
    //document.getElementById('login_response').innerHTML = "Loading..."
    // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
    var UserName = encodeURI(document.getElementById('UserName').value);
    var Password = encodeURI(document.getElementById('Password').value);
    // Set te random number to add to URL request
    nocache = Math.random();
    // Pass the login variables like URL variable
    http.open('get', 'login.php?UserName='+UserName+'&Password='+Password+'&nocache = '+nocache);
    http.onreadystatechange = loginReply;
    http.send(null);
}
function loginReply()
{
    if(http.readyState == 4)
    {
        var response = http.responseText;
        if(response == 0)
        {
            document.getElementById('login_response').innerHTML = 'Wrong UserName or Password! ';
        }
        else
        {
            window.location="homepage.php";
        }
    }
}

php file for ajax login login.php

<?php
    $UserName = $_GET['UserName'];
    $Password = $_GET['Password'];
    $var_msg = $_GET['var_msg'];
    if($UserName =="admin" && $Password="admin")
       echo '1';
    }
    else
    {
        echo '0';
    }
?>

Simple password strength meter using jquery

Html file code for password meter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#passwordStrength
{
   height:10px;
   display:block;
   float:left;
}
.strength0
{
   width:250px;
   background:#cccccc;
}
.strength1
{
   width:50px;
   background:#FF0000;
}

.strength2
{
   width:100px;
   background:#CCCC33;
}
.strength3
{
   width:250px;
   background:#00FF66;
}
</style>
<script type="text/javascript" src="

http://code.jquery.com/jquery-latest.js

"></script>
<script type="text/javascript">
   $(document).ready(function()
       {
           $("#loader").hide();
           $("#password").keyup(function()
               {
                   $("#loader").show().fadeOut(2000);

                   var password_length = $("#password").val().length;
                       if (password_length == 0)
                       {
                           $("#passwordStrength").removeClass().addClass("strength0");
                           $("#message1").html("");
                       }
                       else if (password_length <= 6)
                       {
                           $("#passwordStrength").removeClass().addClass("strength1");
                           $("#message1").html("Very Short");
                       }
                   else if(password_length > 6 && password_length <= 12)
                       {
                           $("#passwordStrength").removeClass().addClass("strength2");
                           $("#message1").html("good");
                       }
                   else if(password_length > 12)
                       {
                           $("#passwordStrength").removeClass().addClass("strength3");
                           $("#message1").html("vary good");
                       }
               });
       });
</script>
</head>
<body>

<input name="password" type="text" id="password"/><div id="message1"> </div>
<p>   <div id="passwordStrength" class="strength0" > </div></p>
<div id="loader">Loading.........</div>
</div>
</body>
</html>

Learn PHP & Ajax & Jquery

Pages

Creating a Dynamic Poll with jQuery and PHP

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

A Pretty Ajax Contact Form With jQuery & PHP

A simple AJAX Contact Form with JQuery and PHP Validation

Using Ajax to Validate Forms

How to Validate Forms in both sides using PHP and jQuery

Using jQuery with Other Libraries

General

Overriding the `$`-function

php & ajax Login Script

Simple password strength meter using jquery

Blog Archive

Pages

General

Overriding the $-function

Overriding the `$`-function