SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hello friends pls help me ...

    hello friends i have a made a code for registration through php but i need the onload and onblur command to apply in tht and i am not getting it hw to do can u give me a small example which suits for my username tag pls reply fast if u can & i know people u can if u can pls give an other example for onkey up event which can use for the username tags so what i can use for my programe

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Here is some javascript code that you can get started with.

    Code javascript:
    var form = document.getElementById('formId');
    form.elements.fieldName.onload = fieldNameOnLoad;
    form.elements.fieldName.onblur = fieldNameBlur;
    function fieldNameOnLoad(evt) {
        ...
    }
    function fieldNameBlur(evt) {
        ...
    }

    Similar techniques can be used for key events as well. They can be tricky to get right across multiple browsers though, so http://www.quirksmode.org/js/keys.html is a good resource.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello friend seei have the code like
    <?
    if(trim($_POST[username])=='' || strlen(trim($_POST[username])) < 6 ||strlen(trim($_POST[username])) >12){
    $error.="<font size=2><em>username between 6 & 12 characters</em></font>";
    ?>
    usernameinput type="text" name="uname">

    for this how can i make in the javascript like while entering the text timeonly it should show "thanku for entering" and while going to the next tag if it is not their 6 characteres it should display enter the 6 characternear the username tag how?pls give me an example so what i can understand do it for my other functions

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    If you use jQuery then you can use the validation plugin which makes the coding a lot easier to perform.

    Code javascript:
    $(function() {
        $('#formId').validate({
            rules: {
                username: {
                    required: true,
                    minlength: 6,
                    maxlength: 12
                }
            },
            messages: {
                username: {
                    required: 'Please enter a username',
                    minlength: 'Minimum length is 6 characters',
                    maxlength: 'Maximum length is 12 characters'
                }
            }
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    excuess me pls so what code i need to give in the html section to link with this and where we r using onkeyup or blur or onload function here kindly can u give a runing code like the feild contain 2 tag username and firstname where while entering the name into the username it should show thank u for entering near the tag and aftergoing to the tag if the 6 characters r not their it should show enter the 6 characters near the tag can u help me too pls can u give the entire code includes the html so what i can verifi dont be angry with me ok friend

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Things like blur and onkeyup are all taken care of by jQuery. You don't need anything more with you HTML form code than an identifier for the whole form. With jQuery, it really is this simple.

    Also, there is validation documentation should you wish to take things further as well.

    Here is the whole sample code. You'll just need to obtain jQuery and the validation plugin from my previous post.

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Test</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>
    <script type="text/javascript" src="js/jquery.validate.js"> </script>
    <script type="text/javascript">
    $(function() {
        $('#register').validate({
            rules: {
                username: {
                    required: true,
                    minlength: 6,
                    maxlength: 12
                }
            },
            messages: {
                username: {
                    required: 'You need to enter a username',
                    minlength: 'Minimum required length is 6 characters',
                    maxlength: 'Maximum acceptable length is 12 characters'
                }
            }
        });
    });
    </script>
    </head>
     
    <body>
    <form id="register" method="POST" action="login.php">
        <p><label>Username:</label> <input type="text" name="username"></p>
        <p><label>First name:</label> <input type="text" name="firstname"></p>
        <p><input type="submit"></p>
    </form>
    </body>
    </html>

    Of course, if you don't want to use jQuery then I or someone else may be able to code up a pure javascript solution instead, but that's going to be a project that could be worth many hours work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    helloo friend but i am not finding out the min.js and validate.js files

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The jquery.min.js is from http://jquery.com/
    I find that an effective technique is to link to the one at http://code.google.com/p/jqueryjs/ so that it it already cached on peoples systems and doesn't need to be loaded.

    Code javascript:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>

    The validate plugin, which requires jQuery to run off of, is obtained from http://bassistance.de/jquery-plugins...in-validation/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello friend thanks for the reply so much thanks for showing a bit light to move towards yesterday i also was searching then i got one code like this but it is always telling username is available and yes is echo above while executing i dont know why its not taking the no command pls go through this i have used same .js file u have given to me in this

    see and correct it for me ....

    <?php

    $existing_users=array('roshan','mike','jason');
    //value got from the get metho
    $user_name=$_POST['username'];
    //checking weather user exists or not in $existing_users array
    if (in_array($user_name, $existing_users))
    {
    //user name is not availble
    echo "no";
    }
    else
    {
    //user name is available
    echo "yes";
    }
    ?>

    <html>
    <head>
    <title>username validation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="jquery-1.3.2.js" type="text/javascript" language="javascript"></script>
    <script language="javascript">

    $(document).ready(function()
    {
    $("#username").blur(function()
    {
    //remove all the class add the messagebox classes and start fading
    $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
    //check the username exists or not from ajax
    $.post("sas2.php",{ username:$(this).val() } ,function(data)
    {
    if(data=='no') //if username not avaiable
    {
    $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
    {
    //add message and change the class of the box and start fading
    $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
    });
    }
    else
    {
    $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
    {
    //add message and change the class of the box and start fading
    $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
    });
    }

    });

    });
    });
    </script>
    <style type="text/css">
    body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    }
    .top {
    margin-bottom: 15px;
    }
    .messagebox{
    position:absolute;
    width:100px;
    margin-left:30px;
    border:1px solid #c93;
    background:#ffc;
    padding:3px;
    }
    .messageboxok{
    position:absolute;
    width:auto;
    margin-left:30px;
    border:1px solid #349534;
    background:#C9FFCA;
    padding:3px;
    font-weight:bold;
    color:#008000;

    }
    .messageboxerror{
    position:absolute;
    width:auto;
    margin-left:30px;
    border:1px solid #CC0000;
    background:#F7CBCA;
    padding:3px;
    font-weight:bold;
    color:#CC0000;
    }

    </style>
    </head>
    <body>


    <br>
    <br>
    <form method="post">
    <div align="center">
    <div class="top" > A fancy username availability checker using jQuery - <strong>Username &quot;roshan&quot;, &quot;mike&quot; ,&quot;jason&quot; already exists</strong><br>
    Please move the focus out of the box to check the availability of username
    </div>
    <div >
    User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
    <span id="msgbox" style="display:none"></span>
    </div>

    </div>
    </form>
    </body>
    </html>

    and my file name is sas2.php

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello pls solve this problem my friend

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    It's happening because the data isn't just yes or no. Currently data is also followed by the full html code for the page.

    This is a php issue, not a javascript one. Still, let's be kind.

    The page needs to show the yes/no response if the posted value is there, and otherwise show just the html code itself.

    Code php:
    <?php
    ...
    $user_name=$_POST['username'];
    if (!empty($user_name)) {
        //checking weather user exists or not in $existing_users array
    } else {
    ?>
    <html>
    ...
    </html>
    <?php
    }
    ?>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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