Trying to implement jquery/ajax into html page

[AvagogeffervE]

\[code\] echo "<form method='post' action='regprocess.php' id='registerform'>"; echo '<fieldset class="register">'; echo"<h2>Register</h2>"; echo "<ul>"; echo '<li><label for="FirstName">First Name: </label> <input type="text" name="FirstName" id="FirstName"></li>'; echo '<li><label for="LastName">Last Name: </label> <input type="text" name="LastName" id="LastName"></li>'; echo '<li><label for="Email">Email: </label><input type="email" name="Email" id="Email"></li>'; echo '<li><label for="Username">Username: </label><input type="text" name="Username" id="Username"></li>'; echo '<li><input type="button" id="check_username_availability" value="http://stackoverflow.com/questions/12763973/Check Availability"></li>'; echo '<div id="username_availability_result"></div>'; echo '<li><label for="Password">Password: </label><input type="password" name="Password" id="Password"></li>'; echo '<li><input type="submit" value="http://stackoverflow.com/questions/12763973/Register"></li>'; echo "</ul>"; echo "</fieldset>"; echo "</form>"; } $username = mysql_real_escape_string($_POST['Username']); //mysql query to select field username if it's equal to the username that we check ' $usernameresult = 'Select Username from User where Username = "'. $username .'"'; $uresult = $conn->query($usernameresult); //if number of rows fields is bigger them 0 that means it's NOT available ' if($uresult->num_rows==1) { //and we send 0 to the ajax request echo 0; }else{ //else if it's not bigger then 0, then it's available ' //and we send 1 to the ajax request echo 1; } ?><script src="http://stackoverflow.com/questions/12763973/jquery-1.8.1.min.js" type="text/javascript"></script><SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">$(document).ready(function() { var checking_html = 'Checking...'; //when button is clicked $('#check_username_availability').click(function(){ //run the character number check if($('#username').val().length < min_chars){ $('#username_availability_result').html(checking_html); check_availability(); } }); }); //function to check username availability function check_availability(){ //get the username var username = $('#username').val(); //use ajax to run the check $.post("check_username.php", { username: username }, function(result){ //if the result is 1 if(result == 1){ //show that the username is available $('#username_availability_result').html(username + ' is Available'); }else{ //show that the username is NOT available $('#username_availability_result').html(username + ' is not Available'); } }); }</script>\[/code\]Hi everyone, So i'm trying to make a form that will validate if there is a username avaliable in my database. I've kinda of used javascript before, but I haven't done a lot with Ajax and JQuery. I keep getting this error message in the console that saysReferenceError: Can't find variable: $which responds to this line of script$(document).ready(function() {
I'm not really sure why, and I was just wondering if anyone can give me some insight on how to fix it? thank you.