Question

    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="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="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="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>

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 says
ReferenceError: 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.

Answer 1

The code seems okay.Only problem I think your reference to jquery library is not right.See the source code and click on the jquery library including line to test whether the path is fine or not. Keep the jquery-1.8.1.min.js on the same folder where these php files are or use any CDN libray like

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Hope it helps !!