jquery val() inside custom function

i have a function like this in my external javascript file (jQuery is already included in the main html file):

function userlogin(){
    $('#ologinbox').html('<div class="input"><div class="input-text"></div><div class="input-field"><img src="css/images/loading.gif" /></div></div>');
    var data = 'username=' + $('#loginusername').val() + '&password=' + $('#loginpassword').val();
    alert(data);
}

and my html is like this:

<div class="input">
<div class="input-text">UserName: <div>
<div class="input-field"><input name="loginusername" id="loginusername" /></div>
</div>
<div class="input">
<div class="input-text">Password: </div>
<div class="input-field"><input name="loginp开发者_运维问答assword" id="loginpassword" type="password" /></div>
</div>
<div class="input">
<div class="input-text"></div>
<div class="input-field"><input type="submit" value="Send" onclick="userlogin();return false;"/></div>
</div>

when I click on the button the returned values of $('#loginusername').val() and $('#loginpassword').val() which are displayed in the alert box are undefined.

I wonder why is that???

---

$('#ologinbox').html('<div class="input"><div class="input-text"></div><div class="input-field"><img src="css/images/loading.gif" /></div></div>');
var data = 'username=' + $('#loginusername').val() + '&password=' + $('#loginpassword').val();

Assuming that the login box you posted is part of a div with id ologinbox, you just replaced its contents and therefore lost the elements #loginusername and #loginpassword.

Replace the contents after retrieving the values:

var data = 'username=' + $('#loginusername').val() + '&password=' + $('#loginpassword').val();
$('#ologinbox').html('<div class="input"><div class="input-text"></div><div class="input-field"><img src="css/images/loading.gif" /></div></div>');

_{(Notice how your original code snippet doesn't include the surrounding <div id="ologinbox"> that would have made this clear! Please in future put your testcase into jsfiddle.net to verify that it reproduces the problem, otherwise we're just guessing.)}

---

Just use jQuery to handle the click event. Not sure why you simply aren't getting an empty string. To fix it, assign the attribute and consider using jQuery to handle the event.

<script type='text/javascript'>
    $(document).ready(function(){

        $("#button").click(Foo);

        function Foo(){
           var myVar = $("#someInput").val();
           alert(myVar);
           return false;
        }

    });
</script>


<input id="someInput" value=""/>
<input  type="submit" />

---

Try this: http://jsfiddle.net/pvQGs/

<input id="someInput" />
<input id="submitter" type="submit" />

$("#submitter").click(function() {
    var myVar = $('#someInput').val();
    alert(myVar);
    return false;
});

---

I tried this in jsfiddle and there does this work correctly: http://jsfiddle.net/9gDas/. Have you bound another event on the submit buttton or can you post some more code? In jsfiddle i used jQuery 1.5.2, which version do you use?

EDIT: As you can see here: http://jsfiddle.net/r4QG3/ the code which you provided works correctly. I can not test the ajax post. What is going wrong in this code?