为什么我无法在模态中获取输入值（使用 Jquery 和 Javascript）答案

【问题标题】：Why I can't get the value of input in modal (Using Jquery & Javascript)为什么我无法在模态中获取输入值（使用 Jquery 和 Javascript）
【发布时间】：2019-12-30 05:31:34
【问题描述】：

我在获取输入文本框中的值时遇到问题，这个文本框是模态形式的。当我将静态值放入输入文本框中时，我感到困惑，该值不为空，但是当我使用元素 id 值时，我无法获得任何值并且警报显示为空。

模态：

<form action=""  method="post" enctype="multipart/form-data">
  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">New Menu Section</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
          <div class="col-md-6">
            <label>Menu Name</label>
            <input placeholder="For sharing..." name="menu_name_category" value="" class="form-control" id="menu_value" type="text" class="validate">
          </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="save_menu_button">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</form>

Javascript 和 Jquery：

var textFieldVal = document.getElementById("menu_value").value;

$('#save_menu_button').click(function() {
   alert(textFieldVal);
});

【问题讨论】：

您可以通过调试“试运行”来查看问题所在。 1）打开页面 2）获取值 3）打开对话框 4）在输入中输入值 5）单击按钮并显示来自 2 的值。显然，您在输入甚至显示之前获取值并且单击按钮时不更新它.
变量超出范围

标签： javascript jquery bootstrap-modal

【解决方案1】：

你可以得到如下的值

$('#save_menu_button').click(function(){
   alert($('#menu_value').val());
});

不需要 document.getElementById

【讨论】：

【解决方案2】：

对于任何可能仍然需要这个的人，我在https://www.youtube.com/watch?v=8zTL1LMxBqc找到了一个正确答案

使用 JQuery，您只需将 Modal ID 添加到选择器，如下所示：

var textFieldVal = $("#exampleModalLongTitle #menu_value").val();

【讨论】：

【解决方案3】：

这里发生的情况是，当您在点击函数中加载和使用该值时，您正在获取文本字段的值。

如下更新您的代码。仅在对象中获取element 并使用textFieldVal.value。它会解决你的问题。

var textFieldVal = document.getElementById("menu_value");
$('#save_menu_button').click(function(){
   alert(textFieldVal.value);
   // With jQuery try like below.
   // alert($('#menu_value').val());
});

【讨论】：

可能你的答案是正确的，但是 var textFieldVal = $('#menu_value').val();不工作为什么会这样？
@DevGe，您应该在 click 事件处理程序中获取值。
在click 中尝试使用alert($('#menu_value').val())。它应该可以工作。

【解决方案4】：

问题是当文档准备好时，您将获得 input DOM 值。

当点击事件处理函数被触发时，你应该得到文本输入值。

$('#save_menu_button').click(function(){
   var textFieldVal = $("#menu_value").val();
   alert(textFieldVal);
});

【讨论】：

【解决方案5】：

改变你的脚本

$('#save_menu_button').click(function(){
var textFieldVal = document.getElementById("menu_value").value;
   alert(textFieldVal);
});

数据是在设置 html 时设置的 .. 这就是为什么它会提示为空...如果您将其放入 click 函数中...当您单击时它会获取数据...

【讨论】：