Question

我正在尝试使用以下jQuery代码在下面的HTML中找到用户标识和密码的值，但它不返回任何值。我做错了什么？

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

        });

警报以空数据返回。感谢关于我做错的任何指示。

谢谢，Kalyan。

Answer 1

使用.val()检索输入值。

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

Answer 2

只是做：

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

取代$.ajax调用:)，.serialize()获取所有表单输入值并将它们传递给服务器，并为您编码：）

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

            });
        });

如何在点击时使用jQuery查找兄弟元素的值

4 个答案: