2

我正在尝试获取输入字段的值，但更新时不会获取它。我正在尝试创建一个 ajax 登录表单。这是代码

<form method="post" id="contactform">
    <label for="name">Username</label>
    <input type="text"  id="un" placeholder="Username"  />

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

    <br/>
    <button name="submit" type="submit" class="btn" id="submit" onclick="logUserIn(); return false;">Log In</button>

    <script type="text/javascript">
    function logUserIn()
    {
        var un = $("#un").val();
        var pw = $("#pw").val();

        alert(un);
    }
    </script>

如果我在输入字段中输入内容并单击提交按钮，它不会为我更新。

如果我要像这样手动更改输入值字段

<input type="text"  id="un" placeholder="Username" value="test" />

然后我收到警报“测试”。

4

3 回答 3

3

jquery 站点上 val() 的定义指出“获取匹配元素集中第一个元素的当前值”。我不确定“元素”指的是什么，但在调试模式下单步执行我的 Javascript 我可以看到 jquery 对象（由 $('#field_id') 返回在第一个数组元素中但在输入之后保存了原始值文本已更改，更新的值保存在第二个数组元素中。使用 last() 对我有用，例如 $('#field_id').last().val();

于 2016-05-30T06:06:12.540 回答
2

我建议您以不显眼的方式编写 JavaScript，即将 JavaScript 中的所有内容保存在脚本标记中，并将标记分开。参见Unobtrusive JavaScript - 维基百科

HTML：

    <form method="post" id="contactform">
      <label for="name">Username</label>
      <input type="text" id="un" placeholder="Username" />
      <label for="password">Password</label>
      <input type="password" id="pw" placeholder="Password"
      />
      <br/>
      <button id="btnLogin" name="submit" type="submit" class="btn" id="submit">Log In</button>
</form>

JavaScript：

$(function() {
  $('#btnLogin').click(logUserIn);
});

function logUserIn() {
  var un = $("#un").val();
  var pw = $("#pw").val();

  alert(un);

  return false;
}

现场演示

于 2013-01-06T04:07:57.473 回答
2

向输入标签添加空值属性，我希望这对你有用。例如：

<input type="text"  id="un" placeholder="Username" value="" />
<input type="password"  id="pw" placeholder="Password" value="" />
于 2013-01-06T04:10:17.070 回答