Javascript 如何找到同级元素'；在单击时使用jQuery返回s值

我试图使用以下jQuery代码在下面的HTML中查找userid和password的值，但它不返回任何值。我做错了什么

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

警报返回时包含空数据。感谢任何关于我做错了什么的指点

谢谢，Kalyan。

使用

.val（）

检索输入值

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

只要做：

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

---

$.ajax

调用：），而

.serialize（）

将所有表单输入的值传递给服务器，并为您编码：）

您有很多问题，下面是更正的代码和注意事项：

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

用户Id:

密码：


不是会员

输入是自动关闭的。

请尝试此代码

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

            });
        });

---

这很好！删除我的答案！（发问者注意。）-1这很好，但没有回答问题。我也不明白投票结果。@iambriansreed当然，你有权发表你的意见：）谢谢你的这个@nitfydude。非常有用的提示，这就是我真正想做的——发布表单数据。@KumarM很高兴我能帮上忙：）制作了这把小提琴，所以只是随便扔掉：它们不是兄弟元素（它们有不同的父母）。但是您不需要任何DOM遍历

.parent（）

、

.find（）

或任何方法，因为您尝试检索的元素具有ID，可以直接使用

$（“#idhere”）

进行选择。我没有投反对票，但如果您解释一下您所做的更改以及更改的原因，可能会更好（而不是让读者将代码与原始版本进行比较）。

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

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

            });
        });