Как найти значение элемента sibling с помощью jQuery при щелчке

Question

Я пытаюсь найти значение идентификатора пользователя и пароля в нижнем HTML, используя следующий код jQuery, но он не возвращает никакого значения. Что я делаю не так?

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

Вот код JQuery:

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

     }); 

Оповещение возвращается с пустыми данными. Цените любые указатели на то, что я делаю неправильно.

Спасибо, Калян.

Answer 1

использовать .val() для получения значения ввода.

var userid = $("#userid").val(); 
var pass = $("#password").val(); 

Answer 2

Вобщ:

$.post('/login', $('#login').serialize(), function() {}); 

в месте вашего $.ajax вызова :), то .serialize() принимает все значения формы INPUTs' и передать их на сервер, закодированный для вас, как хорошо :)

Answer 3

у вас есть немало проблем, так вот исправленный код с примечаниями:

JQuery

$(function() { 
// same as document.ready 
    $('#login').submit(function(event){    
    // runs whenever the form is submitted - either enter or submit button is clicked 
     event.PreventDefault(); 
     // since the form is submitted via ajax you wil want to keep the page from changing 
     alert('user id is: '+$('#userid').val()); 
     // no need to reach back through the DOM with .parent() use the ID its the fastest, also you get input values with .val() 
     $.ajax({ 
      type:"POST", 
      url:"/login", 
      data: $('#login').serialize() 
      // serialize() creates an object of all the form data based on the name attribute and values - very clean 
     }); 
    }); 
}); 

HTML

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

Входы Самозакрывающиеся.

Answer 4

вы попробуете этот код

$(document).ready(function() { 
     $('#login').delegate('input#submit','click',function(){ 

      alert('user id is: '+$(this).parent().parent().find('#userid').val()); 
      var request = $.ajax({ 
       type:"POST", 
       url:"/login", 
       data: {userid:$('#userid').val(), password:$('#password').val()} 
       }); 

      }); 
     });