Question

我在Laravel PHP刀片模板中输入了以下文本：

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

当我在Web浏览器中查看此内容时，看到输入的文本填充了$trunk->friendly_name的值，并且可以使用浏览器控制台通过jQuery检查该值：

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

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

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

为什么？以及如何使用jQuery获得新的价值？

在尝试创建MCVE时，我创建了一个仅包含文本输入（并加载了jQuery）的简单HTML文件，而console.log返回了我期望的新类型值。 ~~所以我一直在想这是我最初使用PHP变量设置输入值的事实，但无法弄清楚原因。~~

感谢帮助！

更新当我欣赏我的问题时，我意识到我遗漏了一些东西：文本输入是在Bootstrap模式下进行的。因此，我将输入移出了模态，现在它可以按预期工作。所以现在我对Google有了一些新的东西。万一有人知道答案，我将保留这个问题。谢谢！

Answer 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>

Answer 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 }}">

如何在Bootstrap模式下更改文本输入值？

2 个答案: