Question

我是javascript的新手，我想了解为什么这不起作用：

var firstName = $("#firstName").val();

$("#account").on('submit', function() {
     console.log(firstName); // Empty value
});

jsfiddle：FIDDLE

Answer 1

编写代码的方式，它在首次加载页面时抓取firstname字段的值，并将其存储在变量firstName中。然后，稍后它将该存储的值输出到控制台。如果你想要那个字段的当前值，你必须在输出时获取当前值，如下所示：

$("#account").on('submit', function() {
     var firstName = $("#firstName").val();   // get current value
     console.log(firstName); 
});

Answer 2

您将获得输入的初始值并将其存储在字符串变量中。而是将jQuery对象引用存储在变量中，并随时获取值。

var firstName = $("#firstName");

$("#account").on('submit', function() {
  console.log(firstName.val());
});

＆＃13;

var firstName = $("#firstName");

$("#account").on('submit', function() {
  console.log(firstName.val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="account" method="post">
  <input type="text" id="firstName">
  <input type="submit">
</form>

＆＃13;

Answer 3

因为它始终保持默认值。您需要在提交表单时获取值

var firstNameDefault = $("#firstName");

$("#account").on('submit', function() {
    var firstNameAfterClick = $("#firstName");
    console.log(firstName.val()); // Empty value
    console.log(firstNameAfterClick.val()); // Should display value of #firstName after form is submitted
});

Answer 4

var firstName = $("#firstName").val(); // move this line from here to inside the function

$("#account").on('submit', function() {
     var firstName = $("#firstName").val();
     console.log(firstName); // Empty value
});

Answer 5

要使其正常工作，请在提交时获取输入值，而不是在输入之前。

$("#account").on('submit', function() {
     var firstName = $("#firstName").val();
     console.log(firstName); // non-empty value
});

Answer 6

实际上是有效的。只是变量username没有从$("#firstName")

获得最新值

以下是正在发生的事情的示例：

var firstName = $("#firstName").val(); // this line says that get the value of #firstName

例如#firstName是一个文本框，由于您没有为其指定任何值，因此可能会有一个空值。除非您为其指定任何值，否则第一行将始终具有空数据。

$("#account").on('submit', function() {
     console.log(firstName); // Empty value
});

此行在提交#account时，在控制台的firstName内打印。但是由于您检索到#firstName的非常第一值，因此您获得了之前的空值。如果要打印#firstName的当前或最新值，请查看其他人的答案。我刚才解释了代码中发生的事情。

Answer 7

我假设您在#firstName中有一个默认值，您希望在浏览器控制台中看到默认值而不做任何更改。对于提交表单，页面会刷新，因此您无法看到控制台值。所以只需添加一行return false;即可在控制台中查看。

<script>
    var firstName = $("#firstName").val();

    $("#account").on('submit', function() {
        console.log(firstName); 
        return false;
    });
</script>

***并且在完成调试后不要忘记删除return false;，否则表单将不会提交给服务器。

Javascript var里面的功能

7 个答案: