Ajax onchange is not working

Question

I have an Ajax function which checks whether username is available or not. But if I use a button and click function it works. I don't want to use button. So I am checking availability on changing the username2 field. But is is not working. No Ajax call is going.

$('#user_name2').change(function(){

    //$(".help-block1").hide();
    var user_name = $("#user_name2").val();
    var name = $("#u_name").val();
    //var hidd = $("#hidd").val();
    var baseurl = $("#site_url").val();

    if (user_name == '') {
        $("#user_name2").after('<p class="help-block1"><b style="color:red;">Enter a username first</b></p>');
    }
    else if (user_name == name) {
        $("#user_name2").after('<p class="help-block1"><b style="color:red;">This is current username</b></p>');
    }
    else {

        $.ajax({
            url: "" + baseurl + "user/check_user",
            async: false,
            type: "POST",
            dataType: "json",
            cache: false,
            data: {
                    user_name: user_name
            },
            success: function(response) {
                if (response.res_user == 'exist') {

                    $("#user_name2").after('<p class="help-block1"><b style="color:red;">Username alredy exist</b></p>');
                    $("#user_name2").focus();
                    $("#hidd").val('fail');
                }
                else if (response.res_user == 'available') {
                   $("#user_name2").after('<p class="help-block1"><b style="color:' + response.status + ';">Username available</b></p>');
                }
                else {
                    $("#user_name2").after('<p class="help-block1"><b style="color:red;">Error. Try again</b></p>');
                }
            }
        });
        //return false;
    }
});

And HTML part is here

<div class="form-group">
    <label for="exampleInputEmail1">User Name</label>
    <input type="text" maxlength="255" class="form-control" id="user_name2" placeholder="" value="' . $res[0]->u_name . '"required>
    <input type="hidden" id="u_name" value="' . $res[0]->u_name . '">
</div>

Answer 1

As per my understading, you bind your event on click. i think you should bind your event on change.

may be possible, it will help you.

please use

$(document).ready(function(){
  $('#username2').live('change', function() {});
});
/* put select box id at the place of username2 */

Answer 2

use .on instead of .live

$(document).ready(function() {

    $('#user_name2').on('change', function() {

    });
});

jQuery 1.9 .live() is not a function

demo : http://jsfiddle.net/avmCX/19/

NOTE: I tested that ur siteurl comes undefined so have a look at the code the part you havnt posted in ur question

Answer 3

I'd suggest this:

$(document).ready(function() {
    $('#user_check').change(function() {
        // your code here
    });
});

use $('#user_check') or $('#user_name2') depending on the id you set in the HTML since you edited your question.

Also

I think your HTML is invalid.

you should fix

value="' . $res[0]->u_name . '"

with

value="<?php echo $res[0]->u_name; ?>"

in both your <input>