javascript/jquery 变量未从表单字段更新答案

【问题标题】：javascript/jquery variable not updating from form fieldjavascript/jquery 变量未从表单字段更新
【发布时间】：2016-04-27 15:35:31
【问题描述】：

我有一个使用 jquery 访问表单字段的基本 Web 表单。在我的 javascript 中，我有一个 userName 变量，我想更新并保留其值，然后让用户在页面上提交其他字段。

var userName = "starval";

然后我有一个处理更新的函数：

function setName() {
    $("#setName").click(function() {
      //console.log("here");
      userName = $("#nameField")[0].value;
    });
  }

还有形式：

<form>
  Name:  <input id="nameField" type="text" name="name" required>
  <input id="setName" type="submit" name="setName" value="Set Name"/>
</form>

我有这样的表单 ID，因为页面上还有其他表单。检查 chrome 的 javascript 控制台显示 $("#nameField")[0].value 实际上确实保存了框中的任何值。 “这里”检查显示该函数在单击提交按钮时被调用，但用户名值保持在“startval”。

【问题讨论】：

userName = $("#nameField").val(); 就够了
我认为这是正确的方法，我已经将代码更新为该语法，但仍然存在变量未更新的相同问题。
你什么时候打电话给setName()？
Barmar，它在 $(document).ready()

标签： javascript jquery html forms variables

【解决方案1】：

为什么不直接调用 val 呢？我知道您的页面中有多个表单，但 ID 无论如何都应该是唯一的。

userName = $("#nameField").val();

【讨论】：

我已经将我的代码更新为这个，但仍然存在值不更新的问题。

【解决方案2】：

试试这个：

$("#nameField").val();

您可以在此处了解有关 jQuery 的 val() 函数的更多信息 - http://api.jquery.com/val/

【讨论】：

【解决方案3】：

我认为问题在于您需要将其移到函数声明之外：

$("#setName").click(function() {
  userName = $("#nameField").val();
});

您的setName() 函数只为提交按钮点击创建事件处理程序。

片段

var userName = "";

$("#setName").click(function() {
  userName = $("#nameField").val();
  showUsername();
});

function showUsername(){
  $("#username").text(userName);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Name:  
  <input id="nameField" type="text" name="name" required />
  <input id="setName" type="submit" name="setName" placeholder="Set Name"/>
</form>
<div id="username" />

【讨论】：

【解决方案4】：

最好在 dom 准备好并加载 HTML 时注册 JQuery 处理程序，因此将函数放在 jquery 文档中准备就绪，如下所示：

$(document).ready(function(){
    $("#setName").click(function() {
      console.log("here");
      userName = $("#nameField").val();
      console.log('Username : '+userName);
    });
 });

【讨论】：

我在 $(document).ready(function() { setName(); }); 中调用了它
使用上面的代码不需要创建单独的函数setName。

【解决方案5】：

所以我想我已经找到了解决办法。看起来提交按钮每次都在刷新页面，将值重置为默认值。将其更改为设置名称连同包括 event.preventDefault(); 在我的功能中似乎可以解决问题。谢谢您的帮助。

【讨论】：