check availability of the username using ajax and jquery in codeigniter

Question

Here I am trying to check that username input is available for the user or not. I am doing it in codeigniter. Here is my view page:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <style type="text/css">
        .no{color:red;}
        .yes{color:green;}
    </style>
    <script>
        $(document).ready(function(){
                // unique user name checking ------------- starts here----------------
                $("#username").blur(function(){
                        var form_data= {
                            action : 'check_username',
                            username : $(this).val
                        };

                        $.ajax({
                                type: "POST",
                                url : "check_unique_username",
                                data : form_data,
                                success : function(result) {
                                    $("#message").html(result.message);
                                    alert(result);
                                }
                        });
                });
                // unique username checking -------------- ends here-----------------
        });  

    </script>
</head>
<body>
    <form class="RegistrationForm" id="RegistrationForm" method="POST" action="">
        <label for="username">User Name</label>
        <div>
            <input id="username" name="username" size="25" class="required" />
        </div>
        <input type="button" id="button1" name="button1" value="check availability" />
        <div id="message"></div>
    </form>
</body>

here is my controller code :

<?php
class Registration extends MX_controller {
    function index(){
        $this->load->view('registrationPage');  // this will load the registration page.
    }
    function unique_username() {
        $action = $_POST['action'];
        if($action=='check_username'){
            $u = $this->input->post('username');
            $users=array("jhon","neo","margo","hacker","user123");
            if(in_array($u,$user)) {
                echo json_encode(array('message' => "It is not available!"));

            }
            else {
                echo json_encode(array('message' => "It is available!"));

            }
        }
    }
}
?>

But my code is not working, where I am getting wrong,please help me out..showing only it is available for every username

Edited : I have changed my controller code...

@forsvarir code not working means its not showing whether username is available or not. — avinashse
– avinashse, Commented Jul 5, 2012 at 9:54
Your code is not working :) which part of your code not working ? what server returns ? Where is your firebug ? — Red
– Red, Commented Jul 5, 2012 at 18:11
I can see that you're using hmvc, posting your folder structure will help. I think the url: "check_unique_username" should be a php file. — Wern Ancheta
– Wern Ancheta, Commented Jul 11, 2012 at 10:31
did you check if the url : "check_unique_username" is actually giving a response? If you're using chrome press ctrl + shift + i then select console and comment in here what you see — Wern Ancheta
– Wern Ancheta, Commented Jul 11, 2012 at 10:39

Matt · Accepted Answer · 2012-07-05 09:47:38Z

1

You have not used # while using the id of the div, so use:

$("#message").html(result);

instead of $("message").html(result);

edited Jul 5, 2012 at 9:47

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered Jul 5, 2012 at 9:44

user1437178

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Over a year ago

Welcome to Stack Overflow! In future, please spend more time writing or formatting your post. Formatting help can be found here

user1437178 Over a year ago

@Matt: Thanks for help me in formatting.I will spend more time to format the answer.

user1437178 Over a year ago

@avinashse :- Please add alert(result) in success function and check what it returns.

Sergey Telshevsky · Accepted Answer · 2012-07-06 07:36:03Z

0

EDIT: An updated answer to an updated question.

It's actually pretty stupid none of us could see it, but the problem is this string: username : $(this).val. The reason is that .val is not jQuery's method that get's the value of a text field, it should be username : $(this).val() (with brackets).

This covers the first JS part, the next problem is a typo, you have url : "check_unique_username",, but it should be url : "registration/unique_username", (didn't have controller name, and had unnecessary check_ prefix while in controller the method was without it).

Next typo is in PHP - if(in_array($u,$user)) {, but we have an array $users, so change this to if(in_array($u,$users)) {, so PHP would not throw a notice.

Next problem is the missing line dataType: 'json', in AJAX request. We must put it so that JS could know what data type we are receiving and parse it in a correct way.

After that it should work. But I have some suggestion for you. Change the PHP, so that it would return not strings, but a boolean value. For example - true, if it's available, false if it's not.

if(in_array($u,$users)) {
    echo json_encode(array('message' => false));
} else {
    echo json_encode(array('message' => true));
}

That way it would be easier to manipulate this data in your JS code. For example you could add this code to the success part of your AJAX request:

success : function(result) {
    if(result.message) { 
        $("#message").html("It's available!");
        $("#button1").removeAttr('disabled');
    } else {
        $("#message").html("It's not available!");
        $("#button1").attr('disabled','disabled');
    }
}

And you will have your submit button enabled/disabled. This will make sure a normal user would not be able to submit the form if he entered a username that is taken.

Also I would change the event blur to keyup, that way you will have faster updates, but it's a bit more heavy on the server. Problem with blur event is that your user could fill the username and click on the button anyway, because blur event fires only after the user leaves the element.

Hope this helps!

edited Jul 6, 2012 at 7:36

answered Jul 5, 2012 at 9:46

Sergey Telshevsky

12.3k7 gold badges59 silver badges80 bronze badges

11 Comments

avinashse Over a year ago

thanks for the reply @Vlakarados but why my code is not working.

avinashse Over a year ago

I did that but that way is also not working, there is no checking of user availability :(

Sergey Telshevsky Over a year ago

Use chrome or Firefox with firebug to see what the AJAX response is - in chrome precc Ctrl+Shift+C, open Network, make your page do the AJAX request, you will see it show up in the list, open it and view the preview tab. What data do you receive?

avinashse Over a year ago

In firebug its showing :- POST module.com/index.php/user_registration/registration/… 200 OK 44ms In console,action I am getting getting this page.{"message":"It is available!"}

Sergey Telshevsky Over a year ago

try in the success part: alert(result.message). Also, I noticed a typo in my answer, it should be $("#message").html(result.message);, try both of these to see if anything shows up

|

Collectives™ on Stack Overflow

check availability of the username using ajax and jquery in codeigniter

2 Answers 2

3 Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related