Member Avatar for jayreis

I have a form with a text input where I am trying to use 2 jquery functions together. However only one of them seems to work. So I am hoping their might be a jquery guru out there that can help

What I have is a text input box called nickname and also has a id of nickname
What I am doing is when the user types in a nickname into the field I am checking my mysql database to ensure
the nickname is available or not. However I also need this text input box to not allow/accept any spaces which I am trying to do by preventing the spacebar

Here is my code

/*prevent spacekey from putting a space in the text input box that has the id of nickname */
$(#nickname").keyup(function(){
    str = $(this).val()
    str = str.replace(/\s/g,'')
    $(this).val(str)
});​

/*below is the code which currently works fine for cheacking the avail of a nickname as its typed*/
pic1 = new Image(16, 16); 
pic1.src = "graphics/loader.gif";

$(document).ready(function(){

$("#nickname").change(function() { 

var usr = $("#nickname").val();

if(usr.length >= 3)
{
$("#status").html('<img src="http://www.*****.**/loader.gif" align="absmiddle"> Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "http://www.******.***/inc/check_nickname.inc.php",  
    data: "nickname="+ usr,  
    success: function(msg){  

   $("#status").ajaxComplete(function(event, request, settings){ 

    if(msg == 'OK')
    { 
        $("#nickname").removeClass('object_error'); // if necessary
        $("#nickname").addClass("object_ok");
        $(this).html(' <img src="http://www.****/graphics/accepted.png" align="absmiddle"> <font color="Green"> Available </font>  ');
    }  
    else  
    {  
        $("#nickname").removeClass('object_ok'); // if necessary
        $("#nickname").addClass("object_error");
        $(this).html(msg);
    }  

   });

 } 

  }); 

}
else
    {
    $("#status").html('<font color="red">nickname has to be <strong>3</strong> characters or more.</font>');
    $("#nickname").removeClass('object_ok'); // if necessary
    $("#nickname").addClass("object_error");
    }

});

});

//-->

Here is my form field code

<div class='field_container'>
    <label>Nickname:</label>
    <input id="nickname"  type="text" name="nickname" onkeyup="twitter.updateUrl(this.value)" class="inn" value='<?php echo"$nickname";?>' />
                          http://****.***/profile/<span id="username_url"  style="color:#006600; font-weight:bold;"><?php echo "$nickname";?></span>
    <div id="status"></div>
</div>
  • 2 Contributors
  • 2 Replies
  • 173 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by jayreis

Recommended Answers

All 2 Replies

Member Avatar for AleMonteiro

Try this to block space:

$("#nickname").keypress(function(evt){
            if ( evt.keyCode == 32 ) // space
            {
                return false;
            }
        });

Here's my whole test:

<head>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
        <script type="text/javascript">

            $(function(){

                $("#nickname").keypress(function(evt){
                    if ( evt.keyCode == 32 ) // space
                    {
                        return false;
                    }
                });

                $("#nickname").change(function(){
                    str = $(this).val();
                    $("#log").append("<br/>change: "+ str);
                });
            });

        </script>
    </head>

    <body>
        <input type="text" name="nickname" id="nickname" />
        <div id="log"></div>
    </body>
Member Avatar for jayreis

thank you for the reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.