DEMO

Step 1
So lets start by adding the jQuery into the head of the page where the form is.

$(document).ready(function() {
	//Make sure the loading image is hidden.
	$('#loader').hide();
	//Blur is triggered when you leave the textbox.
	$('#username').blur(function(){
	  //Show the loader once blur is triggered.
	  $('#loader').show();

	  //Post will send the username value to the check page
      $.post("check.php", {
	    //sends the username value check.php?username=value
		username: $('#username').val()

		//grabs the responce from the check.php page
      }, function(response){

		 //This part is more style than function.
		 //The 400 gives the loader time to make it look like its doing something.
		 //The lower the number the faster the the result shows.
        $('#results').fadeOut();
        setTimeout("finishAjax('results', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

//id is results span and responce is the data
function finishAjax(id, response) {
  //hide the loader
  $('#loader').hide();
  //prints the results
  $('#'+id).html(unescape(response));
  //fade the results in
  $('#'+id).fadeIn();
} //finishAjax

Step 2
Now for the form. The only thing needed is a username textbox, the loader image and the spans.

Username:







Password:

Step 3
Now for the server side.

if ($_POST['username']) {
        $username = stripslashes($_POST['username']);

		// Make a MySQL Connection
		mysql_connect("localhost", "username", "password") or die(mysql_error());
		mysql_select_db("database") or die(mysql_error());

		// Retrieve all the data from the usercheck table
		$result = mysql_query("SELECT username FROM usercheck")
		or die(mysql_error());  

		$row = mysql_fetch_array( $result );

		// Print out the contents of the entry
		if($row['username'] == $username){
			echo 'This username is taken.
Please choose another.';
		 }else{
			echo 'Available!';
		}
}

And that is pretty much it. Enjoy.

You may or may not need this, but it could come in handy at one point in time. So lets start..

I will show you the basics here, you may download the source at the bottom of the page.

View the DEMO

index.html

include these into the head section of the page. ajax.js is the Sack js functions. I will get into Sack later.

this goes into the head as well.

var ajax = new Array();

function getTextList(sel)

{

var color = document.getElementById('color').value; //gets value from text input

document.getElementById('colorReturn').options.length = 0;

if(color.length>0){

var index = ajax.length;

ajax[index] = new sack();

ajax[index].requestFile = 'getColor.php?color='+color; //sends the GET to the php page

ajax[index].onCompletion = function(){ createText(index) };

ajax[index].runAJAX();

}

}

function createText(index)

{

var obj = document.getElementById('colorReturn'); //retruns the options from the php page

eval(ajax[index].response);

}

The form

Filter the colors - Start typing black.

Thats it for the index page. pretty straight forward. So now for the fun part.

getColor.php – This page contains the sql and php that returns the

mysql_connect("localhost", "username", "password") or die(mysql_error());

mysql_select_db("database") or die(mysql_error());

$color = $_GET['color'];

if(isset($_GET['color'])){

$result = mysql_query("SELECT color FROM colors WHERE color LIKE '%$color%' LIMIT 0,10")

or die(mysql_error());

while($color = mysql_fetch_array( $result ))

{

echo 'obj.options[obj.options.length] = new Option("'.$color['color'].'","'.$color['color'].'");';

}

}

Its not the most detailed tutorial, but im not a tutorial guy.

View the DEMO

Download the SOURCE

MySQL Table, used for example.

CREATE TABLE IF NOT EXISTS `percent` (
`per_id` int(11) NOT NULL auto_increment,
`per_num` varchar(255) NOT NULL,
PRIMARY KEY (`per_id`)
) ENGINE=InnoDB;

1. Lets start with the MySQL Connection, I named this file dbcommon.php. Besure to change the username, password and database to your own.

mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("databasename") or die(mysql_error());

2. function.php will contains the script for the query and bar. I setup the 4 function examples as in the demo.

function percent_full(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($full = mysql_fetch_array( $result )) {
		echo '





'.($full['per_num']).'%
id:'.($full['per_id']).'


		';
	 } 

}

function percent_button(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($button = mysql_fetch_array( $result )) {
		echo '







		';
	 }

}

function percent_donation_full(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_full = mysql_fetch_array( $result )) {
		echo '



 $'.($donation_full['per_num']).'





		';
	 } 

}

function percent_donation_button(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_button = mysql_fetch_array( $result )) {
		echo '



 $'.($donation_button['per_num']).'





		';
	 } 

}

3. style.css page will control the way the bars are shown.

@charset "utf-8";
#no-margin {
margin:0px;
}
/* Begin Percentage Bar Full */
#bar_wrap_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_full div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_full div.num {
text-align:center;
}

#bar_wrap_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar Button */
#bar_wrap_button {
width:24px;
height:106px;
background: url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_button div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_button div.num {
text-align:center;
}

#bar_wrap_button div.overlay {
background: url(img/stripes.png) bottom;
width:24px;
height:auto;
}

/* End Percentage Bar Button */

/* Begin Percentage Bar Full */
#bar_wrap_donation_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_full div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_full div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar button */
#bar_wrap_donation_button {
width:24px;
height:106px;
background:url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_button div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_button div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_button div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

4. index.php
Lets add the database connection and functions.

include('dbcommon.php');
include('function.php');

in the body we will call the functions.

percent_full();

percent_button();

percent_donation_full();

percent_donation_button();

Version 2 is now available. I’ve had a lot of people ask for this and now its ready. 2 and 3 tier chained dropdowns. 3 tier files included in the download.

Im currently working on a chained dropdown generator that will give you the ability to create them on the fly with unlimited dropdowns. As soon as that is done I will post it.

DEMO

2 and 3 Dropdowns available in the download.

It is fairly simple and consists of only 3 files. An index, database connection and a function file. So lets start.

Make your database table and fields. you can use mine for now.

CREATE TABLE IF NOT EXISTS `two_drops` (
  `id` int(11) NOT NULL auto_increment,
  `tier_one` varchar(255) NOT NULL,
  `tier_two` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM ;

INSERT INTO `two_drops` (`id`, `tier_one`, `tier_two`) VALUES
(1, 'Colors', 'Red'),
(2, 'Colors', 'Blue'),
(3, 'Colors', 'Green'),
(4, 'Colors', 'Yellow'),
(5, 'Colors', 'Black'),
(6, 'Shapes', 'Square'),
(7, 'Shapes', 'Circle'),
(8, 'Shapes', 'Triangle'),
(9, 'Shapes', 'Rectangle'),
(10, 'Shapes', 'Oval');

Make your connection to your database. db.php

mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());

Next we will add the jQuery, loading, results and main form in index.php

add your includes at the top of the page.

  //include your database connection and function files.
  include('db.php');
  include('func.php');

and the rest of the page.

//jquery framework

$(document).ready(function() {
	$('#wait_1').hide();
	$('#drop_1').change(function(){
	  $('#wait_1').show();
	  $('#result_1').hide();
      $.get("func.php", {
		func: "drop_1",
		drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}

      Select a Category


    
    
    
    

Ok, that was easy enough. Now for the functions func.php

//**************************************
//     Page load dropdown results     //
//**************************************
function getTierOne()
{
	$result = mysql_query("SELECT DISTINCT tier_one FROM two_drops")
	or die(mysql_error());

	  while($tier = mysql_fetch_array( $result )) 

		{
		   echo ''.$tier['tier_one'].'';
		}

}

//**************************************
//     First selection results     //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
   drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{
    include_once('db.php');
	$result = mysql_query("SELECT * FROM two_drops WHERE tier_one='$drop_var'")
	or die(mysql_error());

	echo '

	      Choose one'.$drop_2['tier_two'].'

 ';
    echo '
';
}

And thats it. Download the files below.

DEMO

DOWNLOAD

Want more helpful and free scripts? Buy me a cup of coffee to keep me goin!