How to find a sibling element's value using jQuery upon click
<p>I'm trying to find the value of the userid and password in the below HTML using the following jQuery code, but it doesn't return any value. What am I doing wrong?</p>

<pre><code>&lt;div id='mainpane'&gt;
    &lt;form id='login' method='post' action='#'&gt;
        &lt;p&gt;User Id:&lt;input id='userid' type='text' name='userid'&gt;&lt;/input&gt;&lt;/p&gt;
        &lt;p&gt;Password:&lt;input id='password' type='text' name='password'&gt;&lt;/input&gt;&lt;/p&gt;
        &lt;p&gt;&lt;input id='submit' type='submit' name='Submit' value='Submit'&gt;&lt;/input&gt;&lt;/p&gt;           
    &lt;/form&gt;
    &lt;div id="message"&gt;&lt;/div&gt;
    &lt;p&gt;Not a member? &lt;a href="user-signup.html"&gt;Signup&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>Here's the jQuery code:</p>

<pre><code>$(document).ready(function() {
    $('#login').delegate('input#submit','click',function(){
        alert('user id is: '+$(this).parent().parent().find('#userid').html());
        var request = $.ajax({
            type:"POST",
            url:"/login",
            data: {userid:$('#userid').text(), password:$('#password').text}
            });

        });
</code></pre>

<p>The alert comes back with an empty data. Appreciate any pointers on what am I doing wrong.</p>

<p>Thanks, Kalyan.</p>
