Question

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

回调的第一件事是尝试提取两个INPUT的值，但返回的值是空字符串（我在这里有一个breakpont，甚至已经逐步执行了对象的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中的事实，所以我引用了它，而不是对话框副本。当我在路径中包含对话框包装器时，我终于“找到”了第二个副本。

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/

Answer 2

试一试：

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

Jquery不返回表单INPUT中的值

2 个答案: