javascript - Jquery 不返回表单 INPUT 中的值

Question

我在模态 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 值。

我发现我的选择必须从对话框元素开始，并包含我的输入的后代路径。就好像对话框在内部元素周围放置了一个包装器，因此它们不再由文档拥有可见。

如果我使用 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 中，所以我引用的是它，而不是对话框副本。当我将对话框包装器包含在路径中时，我终于“找到”了第二个副本。

Answer 1

您的按钮是提交类型(它们的自然行为是发送表单)。删除按钮 html 中的 onclick。

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

您必须添加preventDefault防止提交表单并执行您想要的操作。添加按钮onclick事件的代码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/