Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    May 2009
    Posts
    4
    Member #
    19034
    Well, you know how on some websites there's a little check mark or so that shows up after you type saying that the username isn't take or that your e-mail is wrong etc. Can someone enlighten me on how this is done. Below is the final thing I tried before coming here.

    PHP Code:
    <input name="email" type="text" id="email" tabindex="4" onkeyup="checkemail()" />
                  <
    input type="image" name="emailverification" id="emailverification" src="images/blank.png" /> 
    PHP Code:
    <script type="text/javascript">
                function 
    checkemail() 
                {
                    
    document.register.emailverification.src "/images/logo.png";
                }
    </script> 
    But nothing I try seems to work.

  2.  

  3. #2
    Senior Member kevind_2007's Avatar
    Join Date
    Sep 2003
    Location
    South Carolina
    Posts
    586
    Member #
    3059
    Correct me if I'm wrong, but don't those types of services use more of the AJAX side of backend communication rather than Javascript? I'm not sure, havent worked much with Ajax..
    --Kevin
    15" MacBook Pro With: Mac OSX 10.4.11(Tiger) 1440x900 Windows XP SP2 3GB RAM 1TB HDD
    kevind_2007--"Never let the fear of striking out get in your way."--Babe Ruth

    Links:Firefox Download||Google|| HTML Help||DHTML|| Web Design Terminology||Good-Tutorials

  4. #3
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    AJAX = Asynchronous Javascript And XML
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  5. #4
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    This is not how its done. Typically youd do this

    HTML
    <input type="text" id="email" class="left validationText" onblur="checkEmail()" onchange="checkEmail()"/><img src="checkbox.jpg" id="emailCheck" class="checkMark"/>

    CSS
    .left{float: left;}
    .validationText{width: 50px;}
    .checkMark{display: block; visibility: hidden; margin-left: 50px;}

    Javascript
    function checkEmail(){
    var val=document.getElementById("email").value;
    //run validation here

    //done validation
    if(valid)
    document.getElementById("emailCheck").style.visibi lity="visible";
    }

    This may not be EXACTLY it, but this is the basic concept.
    You position an image next to the box you're validating, then based on your javascript validation succes you turn its visbility on

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    added note

    "username is taken" this involves AJAX and querying some sort of database to check if username availability.
    i dont think your at that stage quite yet

    "email is wrong" this is the example above

  7. #6
    Junior Member
    Join Date
    May 2009
    Posts
    4
    Member #
    19034
    Username is taken does not require ajax it can be done with php. And I already have a database set up I just didn't know how to get this to work. I ended up figuring it out but thanks for the input guys I ended up using a span tag and editing the innerhtml with javascript.

  8. #7
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    username is taken can be done with php, but thats requires a post. and a page refresh.

    i thought u meant while theyre typing it checks for the username (this would be ajax).

    Also, by editing the inner html, youre probably forcing it to load the image as the verifications done, this can give it a slow load feel.

    use the format above, have it there already but set the image to hidden, then use javascript to toggle the visibility

    cheers

  9. #8
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    ah sry, if your using innerHTML to just show a message than thats fine (i thought u were using innerHTML to throw an image tag in there =) )

    glad u figured it out

  10. #9
    Junior Member
    Join Date
    May 2009
    Posts
    4
    Member #
    19034
    Quote Originally Posted by aburningflame
    ah sry, if your using innerHTML to just show a message than thats fine (i thought u were using innerHTML to throw an image tag in there =) )

    glad u figured it out
    I actually do have it putting an image in there. Is that bad or something? lol

  11. #10
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    no its not "bad", but its not good.

    forgive me if i guess incorrectly but my guess is that:

    span tag>javascript validation>dumps image tag(IMAGE LOADS NOW)>image is shown

    isnt the best way. look at the markup for a site that does something like u want, they probably already have the image tag there, just use javascript to turn the visibility on

    im guessing you have

    <span id="checkMarkForEmail"></span>

    function validate(){
    if(valid)
    doc.getEleById('checkMarkForEmail').innerHTML('<im g src="check.jpg" alt="Verified"/>');
    }

    Change that to
    IMAGE IS LOADED RIGHT AWAY
    <span><img class="check" id="checkMarkForEmail" src="check.jpg" alt="Verified"/></span>

    CSS
    .check{visibility: hidden;}

    function validate(){
    if(valid)
    doc.getEleByID('checkMarkForEmail').style.visbilit y='visible';
    else
    doc.getEleByID('checkMarkForEmail').style.visibili ty='hidden';
    }

    This way, when the user loads ur page, the i mage is ALREADY loaded (but hidden with css), then when they validate you turn the image to visible

    I mean, its the same effect, but if you have a lot of validation going on and your loading images on the fly, users might perceive it as being "slow"

    cheers


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:14 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com