输入框值在按钮单击时显示为空白[重复]答案

【问题标题】：Input box value is showing blank on button click [duplicate]输入框值在按钮单击时显示为空白[重复]
【发布时间】：2017-08-21 09:06:59
【问题描述】：

我正在尝试弹出 input 框值，但它显示的是空白值。为什么？这是jsfiddle。

$(document).ready(function() {

  var name = $("#name").val();
  $('#showName').click(function() {
    alert(name);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="First Name">
   
<button type="button" id="showName">Show name</button>

【问题讨论】：

var name = $("#name").val();将其移入点击功能。
在点击函数中移动你的变量。
当您的源启动时，在您的页面初始化时，var name 被设置为输入字段的值。在初始化时这是null 或undefined。单击按钮时，var 未设置为实际值。所以在你的点击处理程序中设置var name。或者对输入字段使用onChange 处理程序来设置名称变量。
这能回答你的问题吗？ console.log doesn't console out input value

标签： javascript jquery html forms

【解决方案1】：

当您在document.ready() 中初始化var name 时，name 变量会在页面加载时给出输入值，因此名称的值等于空字符串（空字符串）。所以你必须改变你的代码，当你点击按钮时你的输入值读取。

$(document).ready(function() {
    $('#showName').click(function() {
        var name = $("#name").val();
        alert(name);
    });
});

【讨论】：

【解决方案2】：

将var name = $("#name").val(); 移动到您的click 函数中。

$('#showName').click(function() {
  var name = $("#name").val();
  alert(name);
});

以下示例

$(document).ready(function() {

  $('#showName').click(function() {
    var name = $("#name").val();
    alert(name);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="First Name">
<br>
<button type="button" id="showName">Show name</button>

【讨论】：

【解决方案3】：

$(document).ready(function() {

 
  $('#showName').click(function() {
    alert($("input").val());
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="First Name">
   
<button type="button" id="showName">Show name</button>

【讨论】：