Ajax onchange不起作用

时间:2014-03-26 10:11:59

标签: jquery ajax onchange

我有一个Ajax函数,用于检查username是否可用。但是,如果我使用按钮并单击功能它可以工作。我不想使用按钮。所以我正在检查更改username2字段的可用性。但是不行。没有Ajax通话。

$('#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;
    }
});

HTML部分在这里

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

3 个答案:

答案 0 :(得分:2)

使用.on而不是.live

$(document).ready(function() {

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

    });
});

jQuery 1.9 .live() is not a function

演示:http://jsfiddle.net/avmCX/19/

注意:我测试过你的siteurl未定义,所以看看你在问题中发布的部分的代码

答案 1 :(得分:2)

我建议:

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

使用$('#user_check')$('#user_name2'),具体取决于您在编辑问题后在id中设置的HTML

同时

我认为您的HTML无效。

你应该修复

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

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

中的

答案 2 :(得分:2)

根据我的理解,您可以在click上绑定您的活动。我认为你应该在change上绑定你的活动。

可能会有所帮助。

请使用

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

enter image description here