Oct

Ajax Domain Checker Application with JQuery and PHP

ZeeShaN

AJAX, JQuery, PHP, Tutorials, Web Design Tags

My facebook style tutorials are very popular among you people and Almost 5000 downloads have been counted for facebook wall script application. Thank you all who like and appreciate my work.
Last few days I was searching about checking domain names availablity using Ajax and PHP. I found some solution and I thought to create a post on my blog so that any one can get this simple script easily. I used jQuery and CSS3 to put some attractive look in this. Share it if you like this tutorial. Thanks a lot !

No Spams or Newsletters for Subscribers.

Popular Tutorials on 99Points

JQuery Code

$(document).ready(function() {
$('#Submit').click( function() {
 
		if($('#Search').val() == "")
		{alert('please enter your domain');return false;}
 
		results.style.display = 'none';
		$('#results').html('');
		loading.style.display = 'inline';
 
		$.post('process.php?domain=' + escape($('#Search').val()),{
		}, function(response){
 
			results.style.display = 'block';
			$('#results').html(unescape(response));
			loading.style.display = 'none';
		});
 
		return false;
	});

HTML

<div id="Heading">Domain Checker</div>
 
<form id="form" action="./" method="post"><input id="Search" name="domain" type="text" />
<input id="Submit" type="submit" value="Submit" />
</form>
 
<div id="loading">Please wait...<img src="load.gif" alt="" /></div>

CSS

body {
font-family: Tahoma, sans-serif;
font-size: 12px;
font-weight: bold;
}
 
#loading {
display: none;
}
 
#Heading {
-moz-border-radius:10px 10px 0 0;
-moz-box-shadow:0 0 1px #FD0000 inset;
background:-moz-linear-gradient(center top , #DB0000, #9B0000) repeat scroll 0 0 transparent;
border:1px solid #8D0000;
color:white;
margin-left:-5px;
font-size:22px;
padding:16px;
text-shadow:0 1px 1px black;
z-index:2;
background: -webkit-gradient(linear, left top, left bottom, from(#db0000), to(#9b0000));
background: -moz-linear-gradient(top center, #db0000, #9b0000);

-webkit-border-radius: 10px 10px 0 0;
-webkit-background-clip: padding-box;
-webkit-box-shadow: inset 0 0 1px #fd0000;
-moz-border-radius: 10px 10px 0 0;
-moz-background-clip: padding-box;
-moz-box-shadow: inset 0 0 1px #fd0000;
-webkit-border-radius: 15px;
margin: 50px 0;
top:65px;
width:220px;
color:#ccc;
position: relative;
text-transform:uppercase;text-shadow: 1px 1px 1px #000;
}
 
#form {
width:520px;
background-color: #463d00;
padding: 40px 50px 30px;
margin: 10px 0;
position: relative;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius:15px 15px 15px 15px;
}
 
#Search {
background:url("Text.png") no-repeat scroll 0 0 transparent;
border:medium none;
color:#888888;
float:left;
font-family:Arial,Helvetica,Sans-serif;
font-size:15px;
height:36px;
margin-right:12px;
outline:medium none;
padding:0 0 0 35px;
text-shadow:1px 1px 0 white;
width:425px;
}
 
#Submit {
background:url("Search.png") no-repeat scroll 0 0 transparent;
border:medium none;
cursor:pointer;
height:36px;
overflow:hidden;
text-indent:-999px;
text-transform:uppercase;
width:83px;
}
[ad#co-7]

h4 {
border:2px solid #EEEEEE;
font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
margin:0px;
padding:5px;
min-width:120px;
text-align:left
}

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

Most recent

Most liked

Show all comments (55)

Fahad Khan

Very Nice script

April 21 2012

Comments Like

0 people liked this

Andrew Tate

Hi I would like to use this on a wordpress site. I have the plugin that allows me to run PHP on a page, but I wondered if you could give me any advice.

April 19 2012

Comments Like

0 people liked this

Imran Haider

thanks man. it’s very informative for me

April 07 2012

Comments Like

0 people liked this

usman

nice work bro, script returns an error as “Error Connecting To Server”

plz solve it

March 02 2012

Comments Like

0 people liked this

Ali

Hi Zeeshan, Thank you so much uploading this tutorial. I am searching for this for many days. I downloaded and uploaded your files to my server but I got the follorwing error

Warning: set_time_limit() has been disabled for security reasons in /srv/disk1/952555/www/alihassaan.scienceontheweb.net/process.php on line 2

Warning: fsockopen() has been disabled for security reasons in /srv/disk1/952555/www/alihassaan.scienceontheweb.net/process.php on line 32
Error Connecting To Server:

Can you please help me in this?

Also, how can we search withouth clicking on “Search”?

Thank you,

February 25 2012

Comments Like

0 people liked this

milan

Hi,
Thank you very much for sharing this script. Here is a workaround for IE8. Should be each variable signed with”var”.
var form = document.getElementById(‘form’);
var loading = document.getElementById(‘loading’);
var results = document.getElementById(‘results’);

Regards,
Milan

February 13 2012

Comments Like

0 people liked this