How to find a sibling element's value using jQuery upon click
javascript, jquery
Solution
use `.val()` to retrieve an input's value.
var userid = $("#userid").val();
var pass = $("#password").val();
Problem
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? ``` <div id='mainpane'> <form id='login' method='post' action='#'> <p>User Id:<input id='userid' type='text' name='userid'></input></p> <p>Password:<input id='password' type='text' name='password'></input></p> <p><input id='submit' type='submit' name='Submit' value='Submit'></input></p> </form> <div id="message"></div> <p>Not a member? <a href="user-signup.html">Signup</a></p> </div> ``` Here's the jQuery 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} }); }); ``` The alert comes back with an empty data. Appreciate any pointers on what am I doing wrong. Thanks, Kalyan.