My Facebook-style tutorials are very popular among you people and Almost 5000 downloads have been counted for the Facebook wall script application. Thank you all who like and appreciate my work.
Last few days I was searching about checking domain names’ availability using Ajax and PHP.

I found some solution and I thought to create a post on my blog so that anyone can get this simple script easily. I used jQuery and CSS3 to put some attractive looks in this. Share it if you like this tutorial. Thanks a lot!

JQuery Code

1. $(document).ready(function() {  
2. $(‘#Submit’).click( function() {  
3.   
4.         if($(‘#Search’).val() == “”)  
5.         {alert(‘please enter your domain’);return false;}  
6.   
7.         results.style.display = ‘none’;  
8.         $(‘#results’).html(”);  
9.         loading.style.display = ‘inline’;  
10.   
11.         $.post(‘process.php?domain=’ + escape($(‘#Search’).val()),{  
12.         }, function(response){  
13.   
14.             results.style.display = ‘block’;  
15.             $(‘#results’).html(unescape(response));  
16.             loading.style.display = ‘none’;  
17.         });  
18.   
19.         return false;  
20.     });  

HTML

view plain copy to clipboard print?

1. <div id=”Heading”>Domain Checker</div>  
2. <form id=”form” action=”./” method=”post”>  
3. <input id=”Search” name=”domain” type=”text”>  
4. <input id=”Submit” type=”submit” value=”Submit”>  
5. </form>  
6. <div id=”loading”>Please wait…<img src=”http://webscriptplus.com/check-domain-availability-with-jquery-and-php/load.gif” alt=””></div>  

CSS

view plain copy to clipboard print?

1. body {  
2. font-family: Tahoma, sans-serif;  
3. font-size: 12px;  
4. font-weight: bold;  
5. }  
6.   
7. #loading {  
8. display: none;  
9. }  
10.   
11. #Heading {  
12. -moz-border-radius:10px 10px 0 0;  
13. -moz-box-shadow:0 0 1px #FD0000 inset;  
14. background:-moz-linear-gradient(center top , #DB0000, #9B0000) repeat scroll 0 0 transparent;  
15. border:1px solid #8D0000;  
16. color:white;  
17. margin-left:-5px;  
18. font-size:22px;  
19. padding:16px;  
20. text-shadow:0 1px 1px black;  
21. z-index:2;  
22. background: -webkit-gradient(linear, left top, left bottombottom, from(#db0000), to(#9b0000));  
23. background: -moz-linear-gradient(top center, #db0000, #9b0000);  
24.   
25. -webkit-border-radius: 10px 10px 0 0;  
26. -webkit-background–clip: padding-box;  
27. -webkit-box-shadow: inset 0 0 1px #fd0000;  
28. -moz-border-radius: 10px 10px 0 0;  
29. -moz-background–clip: padding-box;  
30. -moz-box-shadow: inset 0 0 1px #fd0000;  
31. -webkit-border-radius: 15px;  
32. margin: 50px 0;  
33. top:65px;  
34. width:220px;  
35. color:#ccc;  
36. position: relative;  
37. text-transform:uppercase;text-shadow: 1px 1px 1px #000;  
38. }  
39.   
40. #form {  
41. width:520px;  
42. background-color: #463d00;  
43. padding: 40px 50px 30px;  
44. margin: 10px 0;  
45. position: relative;  
46. border-radius: 15px;  
47. -moz-border-radius: 15px;  
48. -webkit-border-radius: 15px;  
49. -moz-border-radius:15px 15px 15px 15px;  
50. }  
51.   
52. #Search {  
53. background:url(“Text.png”) no-repeat scroll 0 0 transparent;  
54. border:medium none;  
55. color:#888888;  
56. float:left;  
57. font-family:Arial,Helvetica,Sans-serif;  
58. font-size:15px;  
59. height:36px;  
60. margin-right:12px;  
61. outline:medium none;  
62. padding:0 0 0 35px;  
63. text-shadow:1px 1px 0 white;  
64. width:425px;  
65. }  
66.   
67. #Submit {  
68. background:url(“Search.png”) no-repeat scroll 0 0 transparent;  
69. border:medium none;  
70. cursor:pointer;  
71. height:36px;  
72. overflow:hidden;  
73. text-indent:-999px;  
74. text-transform:uppercase;  
75. width:83px;  
76. }  
77. [ad#co-7]  
78.   
79. h4 {  
80. border:2px solid #EEEEEE;  
81. font:14px/1.3 Verdana,”Lucida Grande”,Arial,Helvetica,Sans-Serif;  
82. margin:0px;  
83. padding:5px;  
84. min-width:120px;  
85. text-align:left  
86. }