Question

我有一个简单的HTML表单，并尝试使用jQuery从中获取电子邮件和密码的值。结果我总是得到空字符串。有人可以告诉我我要改变什么

HTML表单：

<form>
        <label for="email">Email</label>
        <input type="email" id="email">

        <label for="password">Password</label>
        <input type="text" id="password">

        <button id="button">Submit</button>
</form>

jQuery代码：

$(function() {

var x = $("#email").val();
var y = $("#password").val();

$('#button').click(function() {
    alert(x);
    alert(y);
})
});

Answer 1

问题是，您获得电子邮件和密码字段值的部分仅运行一次。您希望在每次单击时再次运行它以获取当前值。

#City1
{
    float:left;
}
#headerTitle
{
    float:center;
    background-color:gray;
}
#City2
{
    float:right;
    padding-left: 5px;
    color:orange;
}
#City3
{
    float:right;
    background-color:pink;
}

Answer 2

如果您的值是动态的，我建议您使用on("click")...而不是.("click")更多的疼痛。 .("click")函数可能无法第二次触发。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

	$(document).on("click", "#button", function(e) {
		e.preventDefault();
         
            var x = $("#email").val();
            var y = $("#password").val();
    
            alert(x);
            alert(y);
        });
     


</script>

<form>
        <label for="email">Email</label>
        <input type="email" id="email">

        <label for="password">Password</label>
        <input type="text" id="password">

        <button id="button">Submit</button>
</form>

Answer 3

您可以在点击处理程序中获取值。问题是，一旦文档准备就绪，你试图获取值，那时它们就是空的。

您可以为表单的submit事件添加一个侦听器，并在提交时获取值。

例如：

$('form').on('submit', function() {
  var x = $("#email").val();
  var y = $("#password").val();
  alert(x + ' | ' + y);
})

如何使用jQuery从表单中获取元素值

3 个答案: