使用jQuery获取输入框值遇问题：点击按钮弹出空提示

先看看你现在的代码：

var searchInput = $("#searchField").val()
$("#searchButton").on("click", function() {
    alert(searchInput)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>

问题出在哪？ #

你现在是页面一加载就把输入框的初始空值存进了searchInput变量，之后不管用户在输入框里写了什么，这个变量里的内容都不会自动更新。等点击按钮时，你弹出的只是一开始存的空值，自然就显示空啦。另外还有个小细节：你的jQuery脚本和自定义JS代码放在了HTML元素前面，页面加载时这些元素还没渲染出来，JS根本找不到它们，事件绑定可能都没生效呢。

解决办法 #

1. 把获取输入值的逻辑放到点击事件里

每次点击按钮时，才去读取输入框当前的内容，这样拿到的就是用户刚输入的内容了：

<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#searchButton").on("click", function() {
    // 点击时才获取输入框的实时值
    var searchInput = $("#searchField").val();
    alert(searchInput);
});
</script>

2. （可选）直接在alert里读取值，省掉变量

如果不需要复用这个输入值，也可以直接在alert里调用val()方法，少写一行代码：

$("#searchButton").on("click", function() {
    alert($("#searchField").val());
});

3. 确保DOM元素加载完成后再执行JS

要是你习惯把script放在页面头部，那一定要用$(document).ready()包裹你的JS代码，确保页面所有元素都加载好了再执行逻辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#searchButton").on("click", function() {
        var searchInput = $("#searchField").val();
        alert(searchInput);
    });
});
</script>

<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>

这样调整后，点击按钮就能正常弹出用户输入的内容啦~

内容的提问来源于stack exchange，提问作者ondrejm