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>

Binding change eventlistener on textfield you need to lose focus from input text element to send ajax request? — Rahil Wazir, Mar 26 '14 at 10:35
Are you clicking outside the textfield? Because if not your ajax will not fire. — Rahil Wazir, Mar 26 '14 at 10:39

score 2 · Answer 1 · edited May 23 '17 at 12:32

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

edited May 23 '17 at 12:32

Community

1
1

answered Mar 26 '14 at 10:14

Neel

11,625
3
43
61

Still no.. Updated my question with HTML. Please check – Joel James Mar 26 '14 at 10:33
@SpamBox Whats not working? See your web console and let us know what errors are being logging. – Rahil Wazir Mar 26 '14 at 10:36
1

I have attached demo plz go through its going till ajax call so I guess some problem in ur ajax call or in server side coz till now its working as u wanted @SpamBox – Neel Mar 26 '14 at 10:44

ponciste · Answer 2 · 2014-03-26T10:44:38.453

2

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>

edited Mar 26 '14 at 10:44

answered Mar 26 '14 at 10:14

ponciste

2,231
14
16

It was mistake in question. Updated qeustion with actual code. It is not working – Joel James Mar 26 '14 at 10:17
@SpamBox yeah I just saw it. Btw, try now, with the `$(document).ready` as well – ponciste Mar 26 '14 at 10:18
Still no.. Updated my question with HTML. Please check – Joel James Mar 26 '14 at 10:32
No problem with html. It is inside the php echo. – Joel James Mar 26 '14 at 11:32

uma · Accepted Answer · 2014-03-26T12:32:59.203

2

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 */

enter image description here

edited Mar 26 '14 at 12:32

answered Mar 26 '14 at 10:18

uma

2,932
26
20

please have a look on attached image, i think it will produce error. you have to replace "username2" with your element id, on which you have to bind your event. – uma Mar 26 '14 at 11:35
That I know. It doesn't show a simple error. It is syntax error – Joel James Mar 26 '14 at 11:45
Thak you dude. It was not that problem. I didn't make any changes in text field. That's why $(document).ready(function() did not work. – Joel James Mar 26 '14 at 11:55
$(document).ready(function() should be $(document).ready(function() {}); and please check your jquery version because some new jquery does not support to `live`. If your jquery version is greater than or equal 1.7, then you can use `on`. `On` method is replacement of `live`. for info about `on` visit [click here](https://api.jquery.com/on/) – uma Mar 26 '14 at 12:43

Ajax onchange is not working

3 Answers3