Question

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

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实际上保存了框中的任何值。并且“here”检查显示在单击提交按钮时调用该函数，但userName值保持在“startval”。

Answer 1

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

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

Answer 2

试试这个：

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

您可以在此处详细了解jQuery＆＃39 {s} val()功能 - http://api.jquery.com/val/

Answer 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" />

Answer 4

当dom准备好并加载HTML时，理想情况下应该注册JQuery处理程序，因此将函数放在jquery文档中，如下所示：

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

Answer 5

所以我认为我找到了解决方案。看起来每次提交按钮都刷新了页面，将值重置为默认值。把它改成设置名称以及包括 event.preventDefault（）; 在我的功能似乎做的伎俩。谢谢您的帮助。

javascript / jquery变量不从表单字段更新

5 个答案:

段