CODEWITHSUNDEEP
phpjavascriptjqueryajaxcodeigniter
avinashse
avinashse

Reputation: 1460

check availability of the username using ajax and jquery in codeigniter

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...

Upvotes: 0

Views: 4264

Answers (2)

Sergey Telshevsky
Sergey Telshevsky

Reputation: 12197

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!

Upvotes: 0

user1437178
user1437178

Reputation:

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

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

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

Upvotes: 1

Related Questions