jquery function not working onClick?

Question

i have a jquery script:

    $.get('php/username.php', { username: userName },
    function(data){
        var get_back = data;
        alert(get_back);
    });

what happes is that if i run it in firebug console it works, but if i add it inside a click function, it doesnt:

$(document).ready(function(){
$("#btnLogout").click(function () {
    $.get('php/username.php', { username: userName },
    function(data){
        var get_back = data;
        alert(get_back);
    });
});
});

html

<p><input type="submit" name="btnLogout" id="btnLogout"  value="Logout" class="page"/></p>

i don't understand.

thanks

Answer 1

Update

You're using an input of type submit - change it to type="button" instead - a submit button already has default functionality (when inside of a <form>) that you will need to stop by using event.preventDefault() and event.stopPropogation() - see below:

---

$(document).ready(function(){
    $("#btnLogout").click(function (e) {
        e.preventDefault(); //stop the submit event for the submit button
        $.get('php/get_username.php', { username: userName },
        function(data){
            var get_back = data;
            alert(get_back);
        });
    });
});

Answer 2

Try $("#btnLogout").submit(function(){...}) instead