0
    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.

4
  • 1
    Are you sure that jquery-1.8.1.min.js is in the same folder as the script you're running? Commented Oct 6, 2012 at 21:21
  • Mhmm it definitely is. But I did just get this other error message Failed to load resource: the server responded with a status of 404 (Not Found) from the jquery file, and i'm not really sure what it's about.. Commented Oct 6, 2012 at 21:22
  • It means that jquery-1.8.1.min.js doesn't exist in the same folder as the script you're running. Double check its location. Commented Oct 6, 2012 at 21:26
  • Or you have a rewrite rule which is interfering. Commented Oct 6, 2012 at 21:31

1 Answer 1

3

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 !!

Sign up to request clarification or add additional context in comments.

3 Comments

I added in that code and it seemed to fix my problem, thank you! but then I got this everytime i clicked the check avaliability button TypeError: 'undefined' is not an object (evaluating '$('#username').val().length')
courtney -- The html id attribute is case-sensitive. Try changing "#username" to "#Username".
You are welcome ! I think joadha has mentioned the solution above. Replace "#username" with "#Username" ..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.