Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onblur Validation on Popup.

    Hi, I'm making a validation form onblur, but I wanna do it on a popup box.

    When I try the js code in a normal form it works perfectly, but when I try to implement it into a popup box form it doesn't work then.

    I'd like to know if in a popup I must write any other codelines.

    This is my HTML for a normal form:
    PHP Code:
    <form action="asda.php" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
            <
    div class="both">
                <
    br clear="all" />
                <
    div>
                    <
    label>Country</label>
                    <
    input id="User_Nick" name="User_Nick" type="text" value="" onblur="return check_username();" />
                    <
    div id="Info"></div>
                    <
    span id="Loading"><img src="loader.gif" alt="" /></span>
                </
    div>
            </
    div>  
            <
    br clear="all" />  
        </
    form
    And this is my code from the popup box form:
    PHP Code:
    <div id="popupContact">
            <
    a id="popupContactClose">x</a>
            <
    h1>User Registration</h1>
            <
    p id="contactArea">
                <
    form action="asda.php" name="customForm" id="customForm" method="post" enctype="multipart/form-data">
                    <
    div class="both">
                        <
    br clear="all" />
                        <
    div>
                            <
    input id="User_Nick" name="User_Nick" type="text"  value="" placeholder="Nickname" maxlength="20" onblur="return check_username();">
                            <
    div id="Info"></div>
                            <
    span id="Loading"><img src="loader.gif" alt="" /></span>
                        </
    div>
                    </
    div>
                    <
    br clear="all" />
                </
    form>
            </
    p>
        </
    div
    onblur only works in the first form. Any idea about why this happens?

    Thank you in advance.

    EDIT: I don't know if you need, cause it works but I will post here the code.js

    Code:
    //The document has the focus
    $(document).ready(function() {
    	$('#Loading').hide();    
    });
    
    
    // Check Username
    function check_username(){
    
    	var username = $("#User_Nick").val();
    	$('#Loading').show();
    	$.post("check_username_availablity.php", {
    		username: $('#User_Nick').val(),
    	}, function(response){
    		$('#Info').fadeOut();
    		 $('#Loading').hide();
    		setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
    	});
    	return false;
    }
    
    //Finish Ajax Function
    function finishAjax(id, response){
     
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn(1000);
    }
    And my PHP CODE

    PHP Code:
    <?php
        $link
    =mysql_connect('localhost','root',''); //Conexión a la base de datos.
        
    mysql_select_db("supahsonic"$link); //Selección de la base de datos.
        
    if($_REQUEST){
        
    $username     $_REQUEST['username'];
        
        if(
    strlen($username)>2){
            
    $query "select * from users where user_nick = '".strtolower($username)."'";
            
    $results mysql_query$query) or die('ok');
            
            if(
    mysql_num_rows(@$results) > 0// not available
            
    {
                echo 
    '<div id="Error">Already Taken</div>';
            }
            else
            {
                echo 
    '<div id="Success">Available</div>';
            }
        }else{
            if(
    strlen($username)==0){
                echo 
    '<div id="Error">The field cannot be blank</div>';
            }else{
                echo 
    '<div id="Error">Nick name too short</div>';
            }
        }
    }
    ?>
    Last edited by Samujedrez; 08-27-2012 at 12:28 PM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,482
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Do you have the JavaScript attached to the popup as well as to the main page?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    How about a different approach?


    Code:
    $(document).ready(function() {
    	//$('#Loading').hide(); you can use plain ole css to hide this by default, but re add it if you prefer.
    
    $("#User_Nick").blur(function(e){
    $('#Loading').show();
    $.post("check_username_availablity.php", {
    		username: $(this').val(),
    	}, function(response){
    		$('#Info').fadeOut();
    		 $('#Loading').hide();
    		setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
    	});
    })
    
    
    
    });
    
    //Finish Ajax Function
    function finishAjax(id, response){
     
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn(1000);
    }
    also you can remove onblur="return check_username();"

    - also how are you showing the actual pop up?
    Last edited by DanInMa; 08-27-2012 at 11:16 PM.

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the js I am using for the popup.

    Code:
    //SETTING UP OUR POPUP
    //0 means disabled; 1 means enabled;
    var popupStatus = 0;
    
    //loading popup with jQuery magic!
    function loadPopup(){
    	//loads popup only if it is disabled
    	if(popupStatus==0){
    		$("#backgroundPopup").css({
    			"opacity": "0.7"
    		});
    		$("#backgroundPopup").fadeIn("slow");
    		$("#popupContact").fadeIn("slow");
    		popupStatus = 1;
    	}
    }
    
    //disabling popup with jQuery magic!
    function disablePopup(){
    	//disables popup only if it is enabled
    	if(popupStatus==1){
    		$("#backgroundPopup").fadeOut("slow");
    		$("#popupContact").fadeOut("slow");
    		popupStatus = 0;
    	}
    }
    
    //centering popup
    function centerPopup(){
    	//request data for centering
    	var windowWidth = document.documentElement.clientWidth;
    	var windowHeight = document.documentElement.clientHeight;
    	var popupHeight = $("#popupContact").height();
    	var popupWidth = $("#popupContact").width();
    	//centering
    	$("#popupContact").css({
    		"position": "absolute",
    		"top": windowHeight/2-popupHeight/2,
    		"left": windowWidth/2-popupWidth/2
    	});
    	//only need force for IE6
    	
    	$("#backgroundPopup").css({
    		"height": windowHeight
    	});
    	
    }
    
    
    //CONTROLLING EVENTS IN jQuery
    $(document).ready(function(){
    	
    	//LOADING POPUP
    	//Click the button event!
    	$("#button").click(function(){
    		//centering with css
    		centerPopup();
    		//load popup
    		loadPopup();
    	});
    				
    	//CLOSING POPUP
    	//Click the x event!
    	$("#popupContactClose").click(function(){
    		disablePopup();
    	});
    	//Click out event!
    	$("#backgroundPopup").click(function(){
    		disablePopup();
    	});
    	//Press Escape event!
    	$(document).keypress(function(e){
    		if(e.keyCode==27 && popupStatus==1){
    			disablePopup();
    		}
    	});
    
    });
    I tried your code but it doesn't work on a normal form. I don't know what's wrong, someone told me that maybe, I am focussing the onblur over the main website and not over the popup, but I'm not sure if he was right.

    Mmmm, this is a headhache


  •  

    Posting Permissions

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