Jquery 不返回表单 INPUT 中的值

Jquery not returning the values in form INPUTs

本文关键字：INPUT 表单 返回 Jquery      更新时间：2023-09-26

我在模式jquery对话框中有一个登录表单，其中包含通常的2个文本输入。 当我输入登录名和密码然后单击提交时，将调用回调函数。

回调做的第一件事是尝试提取两个 INPUT 的值，但返回的值是空字符串（我这里有一个中断，甚至已经完成了对象的 jquery 处理 - 它们的对象被正确标识为表单上的字段，但两者都value=""）。

此时我仍然可以看到表单中的值，当回调退出并且焦点返回到表单时，这些值仍在 INPUTS 中。我也尝试了.prop("value")而不是.val()，但结果是一样的。

我

只是不明白为什么我无法阅读这些值 - 任何帮助表示赞赏。 

<form id="cp-loginform" action="/cypo/index.php" method="POST" >
    <input type="hidden" name="Login" value="Login">
    <input type="hidden" name="pp" value="0" />
    <input type="text"  id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
    <input type="password" id="cp-password"  name = "password"  placeholder = "password" class="loginforminput cp-width-50"></p>
    <input type="submit" id="cp-submit"  name = "submit" onclick="ProcessLogin()" ></p>
</form>

function ProcessLogin() {
    var loginval = $("#cp-loginname").val(); 
    var passwordval = $("#cp-password").val(); 
    console.log(loginval.concat(" ",passwordval));
}

已解决的问题：我觉得这是一个范围问题。表单本身显然没问题（如果从对话框提交，它就可以工作） - 这只是尝试使用 jquery 检查 INPUT 值不起作用。

我发现我的选择必须从对话框元素开始，并包含指向我的 INPUT 的后代路径。就好像对话框在里面的元素周围放置了一个包装器，这样它们就不再可见为文档拥有的。

如果我使用 xxx 和 zzz 登录并逐步执行以下代码，我会看到这个： 

var loginval = $("#cploginname").val();                 << = ""
var passwordval = $("#cppassword").val();               << = ""    
var loginval = $("#cp-loginform #cploginname").val();   << = "" 
var passwordval = $("#cp-loginform #cppassword").val(); << = ""
var loginval = $("#cpdialog #cp-loginform #cploginname").val();   << = "xxx"
var passwordval = $("#cpdialog #cp-loginform #cppassword").val(); << = "zzz" 
console.log(loginval.concat(" ",passwordval));
我

不能说我明白发生了什么，但我有一个解决方案，所以我很高兴。感谢所有回答的人。

结语多亏了@CMedina，我现在明白了。该表单在我的 BODY 部分顶部的隐藏 DIV 中定义，我将 $（"#loginform"） 传递给创建对话框的 f（）。该对话框已添加到 DOM 中，紧接在 .我错过了我的原始表单仍在 DOM 中的事实，所以我引用的是它，而不是对话框副本。当我在路径中包含对话框包装器时，我终于"找到"了第二个副本。

你的按钮是提交类型（他们的自然行为是发送表单）。删除按钮 html 中的点击。

<input type="submit" id="cp-submit"  name = "submit">

您必须添加 preventDefault 以防止提交表单并执行所需的操作。为按钮点击事件添加代码 JS

$("#cp-submit").on("click", function(e){
   e.preventDefault();
   var loginval = $("#cp-loginname").val(); 
   var passwordval = $("#cp-password").val(); 
   console.log(loginval.concat(" ",passwordval));
});

结果：https://jsfiddle.net/cmedina/svjqb2a4/

试试吧：

<html>
    <head>
    </head>
    <body>
       <form id="cp-loginform" action="/cypo/index.php" method="POST">
    <input type="hidden" name="Login" value="Login">
    <input type="hidden" name="pp" value="0" />
    <input type="text"  id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
    <input type="password" id="cp-password"  name = "password"  placeholder = "password" class="loginforminput cp-width-50">
    <input type="submit" id="cp-submit" name ="submit" onclick="ProcessLogin(event)">
    </form>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            function ProcessLogin(e) {
            e.preventDefault();
            var loginval = $("#cp-loginname").val(); 
            var passwordval = $("#cp-password").val(); 
            alert(loginval.concat(" ",passwordval));
            }
        </script>
    </body>
</html>

相关文章：