www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Despair

  1. #1
    Join Date
    Feb 2010
    Posts
    10

    Despair

    First, I'm a total newbie at JS. I'm using this pratically self-made script to check if email and display name exist on database, using AJAX and jQuery. Each of the text inputs have a button to manually check, else it checks onBlur with the accordingly function.

    The username one works fine but the email only works if I manually click to check. I've been trying to fix it but no luck at all.

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    
        //the min chars for username
        var display_min_chars = 3;
        var display_max_chars = 20;
        
        var email_min_chars = 5;
        var email_max_chars = 120;
    
        //result texts
        var characters_display_error = 'Length of display name: 3-20 chars.';
        var checking_display_html = 'Checking...';
        
        var characters_email_error = 'Length of email: 5-120 chars.';
        var checking_email_html = 'Checking...';
        
        $('#check_email_availability').click(function(){
    
            if($('#email').val().length < email_min_chars || $('#email').val().length > email_max_chars){
                
                $('#email_availability_result').html(characters_email_error);
                document.registerForm.submit_reg.disabled = true;
            }else{
    
                $('#email_availability_result').html(checking_email_html);
                check_email_availability();
            }
        });
                    
    
        $('#check_username_availability').click(function(){
    
            if($('#username').val().length < display_min_chars || $('#username').val().length > display_max_chars){
                
                $('#username_availability_result').html(characters_display_error);
                document.registerForm.submit_reg.disabled = true;
            }else{
    
                $('#username_availability_result').html(checking_display_html);
                check_display_availability();
            }
        });
            
    });
    
    //function to check username availability
    function check_display_availability(){
            var min_chars = 3;
            var max_chars = 20;
    
            //result texts
            var characters_error = 'Length of display name: 3-20 chars.';
            var checking_html = 'Checking...';
            
    if($('#username').val().length < min_chars || $('#username').val().length > max_chars){
    
        $('#username_availability_result').html(characters_error);
        document.registerForm.submit_reg.disabled = true; 
        return;
    }else{
        //else show the cheking_text and run the function to check
        $('#username_availability_result').html(checking_html);
                
        //get the username
        var username = $('#username').val();
    
        //use ajax to run the check
        $.post("http://www.tf2warehouse.com/user/check_username", { username: username },
        function(result){
            if(result == "available"){
                $('#username_availability_result').html('Display name available!');
                document.registerForm.submit_reg.disabled = false;
            }else{
                if(result == "invalid"){
                    $('#username_availability_result').html('Display name is invalid.');
                    document.registerForm.submit_reg.disabled = true;      
                }
                if(result == "notavailable"){
                    $('#username_availability_result').html('Display name is not available.');
                    document.registerForm.submit_reg.disabled = true; 
                }
                if(result == "empty"){
                    $('#username_availability_result').html('Display name is empty.');
                    document.registerForm.submit_reg.disabled = true; 
                }
            }
        });
        }
    }
    
    function check_email_availability(){
        $('#email_availability_result').html(checking_email_html);
        var email_min_chars = 5;
        var email_max_chars = 120;
    
        //result texts
        var email_characters_error = 'Length of email: 5-120 chars.';
        var email_checking_html = 'Checking...';
            
    if($('#email').val().length < email_min_chars || $('#email').val().length > email_max_chars){
    
        $('#email_availability_result').html(email_characters_error);
        document.registerForm.submit_reg.disabled = true; 
        return;
        }else{
            //else show the cheking_text and run the function to check
            $('#email_availability_result').html(email_checking_html);
                    
            //get the username
            var email = $('#email').val();
    
            //use ajax to run the check
            $.post("http://www.tf2warehouse.com/user/check_email", { email: email },
            function(result2){
                if(result2 == 0){
                    $('#email_availability_result').html('Email available!');
                    document.registerForm.submit_reg.disabled = false;
                }else{
                    if(result2 == "invalid"){
                        $('#email_availability_result').html('Email is invalid.');
                        document.registerForm.submit_reg.disabled = true;      
                    }
                    if(result2 == 1){
                        $('#email_availability_result').html('Email is already in use!');
                        document.registerForm.submit_reg.disabled = true; 
                    }
                    if(result2 == "empty"){
                        $('#email_availability_result').html('Email is empty.');
                        document.registerForm.submit_reg.disabled = true; 
                    }
                }
            });
        }
    }
    
    </script>

  2. #2
    Join Date
    Feb 2010
    Posts
    10
    On
    Code:
    function check_email_availability(){
        $('#email_availability_result').html(checking_email_html);
    Please ignore the second line, I was trying to debug

  3. #3
    Join Date
    Feb 2010
    Posts
    10
    Okay I got firebug installed and it says when onBlur:
    check_email_availability is not a function

    Why is this?

  4. #4
    Join Date
    Feb 2010
    Posts
    10
    I can't repeat functions or what? :S

    Guys I still haven't solved this.

  5. #5
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    Two things:

    1. Don't shout
    2. "I can't repeat functions or what?" - what on earth do you mean by that?

  6. #6
    Join Date
    Feb 2010
    Posts
    10
    Quote Originally Posted by iandevlin View Post
    Two things:

    1. Don't shout
    2. "I can't repeat functions or what?" - what on earth do you mean by that?
    Did you post just to say that? Where do you see me shouting at all?
    I emphasized, not shouted, so everyone can notice this wasn't solved yet because of the replies I made (mainly because I can't edit main post, at least I don't see the link to).

    As for the function, it seems onBlur event is only recognizing one, since it only works on one. What you think I mean by that?

    Thanks for being rude to a newbie.
    Last edited by Queops; 02-17-2010 at 08:57 AM.

  7. #7
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    Well you've posted here expecting someone to come along and help, which is fine. But because they haven't emphasising something the way you have is the same as shouting online, and therefore comes across as rude.

    As for the function, it seems onBlur event is only recognizing one, since it only works on one. What you think I mean by that?
    This still doesn't make any sense.

    Have you got a version online that we can look at and test? Or at least post your HTML code.

  8. #8
    Join Date
    Feb 2010
    Posts
    10
    Well, the code is none other than what you would expect:
    HTML Code:
    <input type="text" name="userEmail" value="" id="email" onBlur="check_email_availability()"  />
     <input type="text" name="userDisplayName" value="" id="username" onBlur="check_display_availability()"  />
    For the text fields and...
    HTML Code:
            <input type='button' id='check_username_availability' value='Check Display Availability' />  
            <div id='username_availability_result'></div>
            <input type='button' id='check_email_availability' value='Check Email Availability' />  
            <div id='email_availability_result'></div>    
            </div>
    For the respective checking buttons and DIV's that contain the checking messages.
    There's absolutely nothing else related to this javascript code other than the checking webpage, that outputs the expected values on javascript (and it works also! just not onBlur event)

    Thanks for helping.

  9. #9
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    Try changing it to:

    HTML Code:
    <input type="text" name="userEmail" value="" id="email" onBlur="check_email_availability();return false;"  />

  10. #10
    Join Date
    Feb 2010
    Posts
    10
    Still doesn't work and Firebug reports this (username check is still working fine):
    Code:
    check_email_availability is not a function
    function onblur(event) { check_email_availability(); return false; }(Object { name="event"})
    [Break on this error] check_email_availability();

  11. #11
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    It all works fine for me after changing:

    HTML Code:
    document.registerForm.submit_reg.disabled = ....
    to

    HTML Code:
    document.getElementById("registerForm").submit_reg.disabled = ...

  12. #12
    Join Date
    Feb 2010
    Posts
    10
    Quote Originally Posted by iandevlin View Post
    It all works fine for me after changing:

    HTML Code:
    document.registerForm.submit_reg.disabled = ....
    to

    HTML Code:
    document.getElementById("registerForm").submit_reg.disabled = ...
    I changed all those that had registerForm to getElementById("registerForm") and username checker still works, and email one still doesn't work, giving the same error on Firebug. I'm using jQuery from google, before my script tags:
    Code:
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1");
    </script>
    Is this a problem?

  13. #13
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    Odd, it all works fine for me, although I used:

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    to include jQuery.

  14. #14
    Join Date
    Feb 2010
    Posts
    10
    Quote Originally Posted by iandevlin View Post
    Odd, it all works fine for me, although I used:

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    to include jQuery.
    Yeh, switching to that didn't make a difference :S

    Upon further inspecting firebug I find that if I click on:
    function onblur(event) { check_email_availability(); return false; }(Object { name="event"})
    The object part, it opens me a window that says window -> object and then a table list with name -> "event" and value -> "undefined"
    Does this mean anything?

  15. #15
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    Not to me.

    Here's the code that I created from yours that "works":

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    
        //the min chars for username
        var display_min_chars = 3;
        var display_max_chars = 20;
        
        var email_min_chars = 5;
        var email_max_chars = 120;
    
        //result texts
        var characters_display_error = 'Length of display name: 3-20 chars.';
        var checking_display_html = 'Checking...';
        
        var characters_email_error = 'Length of email: 5-120 chars.';
        var checking_email_html = 'Checking...';
        
        $('#check_email_availability').click(function(){
    
            if($('#email').val().length < email_min_chars || $('#email').val().length > email_max_chars){
                
                $('#email_availability_result').html(characters_email_error);
                document.getElementById("registerForm").submit_reg.disabled = true;
            }else{
    
                $('#email_availability_result').html(checking_email_html);
                check_email_availability();
            }
        });                
    
        $('#check_username_availability').click(function(){
    
            if($('#username').val().length < display_min_chars || $('#username').val().length > display_max_chars){
                
                $('#username_availability_result').html(characters_display_error);
                document.getElementById("registerForm").submit_reg.disabled = true;
            }else{
    
                $('#username_availability_result').html(checking_display_html);
                check_display_availability();
            }
        });        
    });
    
    //function to check username availability
    function check_display_availability(){
            var min_chars = 3;
            var max_chars = 20;
    
            //result texts
            var characters_error = 'Length of display name: 3-20 chars.';
            var checking_html = 'Checking...';
            
    	if($('#username').val().length < min_chars || $('#username').val().length > max_chars){
    		$('#username_availability_result').html(characters_error);
    		document.getElementById("registerForm").submit_reg.disabled = true; 
    		alert("check_display_availability");
    		return;
    	} else{
    		//else show the cheking_text and run the function to check
    		$('#username_availability_result').html(checking_html);
                
    		//get the username
    		var username = $('#username').val();
    
    		//use ajax to run the check
    		$.post("http://www.tf2warehouse.com/user/check_username", { username: username },
    		function(result){
            if(result == "available"){
                $('#username_availability_result').html('Display name available!');
                document.getElementById("registerForm").submit_reg.disabled = false;
            }else{
                if(result == "invalid"){
                    $('#username_availability_result').html('Display name is invalid.');
                    document.getElementById("registerForm").submit_reg.disabled = true;      
                }
                if(result == "notavailable"){
                    $('#username_availability_result').html('Display name is not available.');
                    document.getElementById("registerForm").submit_reg.disabled = true; 
                }
                if(result == "empty"){
                    $('#username_availability_result').html('Display name is empty.');
                    document.getElementById("registerForm").submit_reg.disabled = true; 
                }
            }
        });
        }
    }
    
    function check_email_availability() {
        //$('#email_availability_result').html(checking_email_html);
        var email_min_chars = 5;
        var email_max_chars = 120;
    
        //result texts
        var email_characters_error = 'Length of email: 5-120 chars.';
        var email_checking_html = 'Checking...';
    
    	if($('#email').val().length < email_min_chars || $('#email').val().length > email_max_chars) {
    		$('#email_availability_result').html(email_characters_error);
    		document.getElementById("registerForm").submit_reg.disabled = true; 
    		alert("check_email_availability");
    		return;
    	}
    	else{
            //else show the cheking_text and run the function to check
            $('#email_availability_result').html(email_checking_html);
                    
            //get the username
            var email = $('#email').val();
    
            //use ajax to run the check
    		$.post("http://www.tf2warehouse.com/user/check_email", { email: email },
    			function(result2){
    				if(result2 == 0){
    					$('#email_availability_result').html('Email available!');
    					document.getElementById("registerForm").submit_reg.disabled = false;
    				}else{
    					if(result2 == "invalid"){
    						$('#email_availability_result').html('Email is invalid.');
    						document.getElementById("registerForm").submit_reg.disabled = true;      
    					}
    					if(result2 == 1){
    						$('#email_availability_result').html('Email is already in use!');
    						document.getElementById("registerForm").submit_reg.disabled = true; 
    					}
    					if(result2 == "empty"){
    						$('#email_availability_result').html('Email is empty.');
    						document.getElementById("registerForm").submit_reg.disabled = true; 
    					}
    				}
    			});
        }
    }
    
    </script>
    
    </head>
    <body>
    
    <form id="registerForm">
    	<input type="text" name="userEmail" value="" id="email" onBlur="check_email_availability();return false;"  />
     <input type="text" name="userDisplayName" value="" id="username" onBlur="check_display_availability();return false;"  />
    <input id = "submit_reg" type="submit" value="click me" />
    </form>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles