如何更改 Bootstrap 模式中的文本输入值？答案

【问题标题】：How to change text input value in Bootstrap modal?如何更改 Bootstrap 模式中的文本输入值？
【发布时间】：2019-03-17 03:42:42
【问题描述】：

我在我的 Laravel PHP 刀片模板中有这个文本输入：

<input type="text" name="friendly_name" value="{{ $trunk->friendly_name }}">

当我在网络浏览器中查看时，我看到文本输入填充了 $trunk->friendly_name 的值，我可以使用浏览器控制台使用 jQuery 检查该值：

console.log($('[name=friendly_name]').val())

并查看$trunk->friendly_name 的值。一切都很好 - 到目前为止。

这是我的问题： 在网络浏览器中，我单击文本输入并更改文本输入中的文本。但是当我再次输入console.log 时，我仍然得到旧值，而不是刚刚输入的新值。

为什么？以及如何使用 jQuery 获取新值？

为了创建MCVE，我创建了一个简单的HTML 文件，其中只包含文本输入（并加载了jQuery），console.log 按我的预期返回了新的类型值。 ~~所以我想这一定是我最初使用 PHP 变量设置输入值，但不知道为什么。~~

感谢您的帮助！

更新当我欣赏我的问题时，我意识到我遗漏了一些东西：文本输入处于 Bootstrap 模式中。所以我将输入移出模态，现在它按预期工作。所以现在我对谷歌有了新的认识。如果有人已经知道答案，我会留下这个问题。谢谢！

【问题讨论】：

在 SO：stackoverflow.com/a/38982152/3882035 上找到了答案。您必须将模态 ID 添加到您的 jQuery 选择器。

标签： php jquery laravel twitter-bootstrap

【解决方案1】：

首先确保 jQuery 已加载。

其次，为了检测值已更改，您需要一个事件侦听器。所以我们将使用 jQuery change() 来处理这个问题。我们将在document.ready() 函数中封装监听器。

第三，我在输入标签中添加了一个 id，这样我们就可以使用该 id 来引用输入。

看看这些对你有没有帮助。

<input type="text" id ="friendly_name" name="friendly_name" value="{{ $trunk->friendly_name }}">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>      

  $(document).ready(function(){

    $('#friendly_name').change(function() {
      Console.log("This is your text input value: " + $('#friendly_name').val());
    });

  });

</script>

【讨论】：

感谢您的关注！不确定在输入中添加 id 是否有帮助。但是在我的 jQuery 选择器中包含模态的 id！诡异的。祝你好运！
嘿，很高兴它对你有用。您的问题写得很好，但是您没有在问题中添加足够的代码。如果您有更多代码供我们查看，我可能会告诉您正在使用模式并以这种方式发现问题。它只是节省了每个人的时间和精力，让我们直奔主题。无论如何，只是一个友好的建议。干杯！

【解决方案2】：

尝试使用.on event

  $(document).ready(function(){

    $('input[name="friendly_name"]').on('change click keyup', function() {
      console.log("This is your text input value: " + $(this).val());
    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="friendly_name" value="{{ $trunk->friendly_name }}">

【讨论】：