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

Question

I have this text input in my Laravel PHP blade template:

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

When I view this in the web browser, I see the text input populated with the value of $trunk->friendly_name, and I can use the browser console to check the value with jQuery:

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

And see the value of $trunk->friendly_name. All is well - so far.

Here's my problem: In the web browser, I click into the text input and change the text in the text input. But when I do console.log again, I still get the old value and not the new value I just typed.

Why? And how do I get the new value with jQuery?

In an attempt to create an MCVE, I created a simple HTML file containing just the text input (and with jQuery loaded), and console.log returns the new typed value as I expect. So I was thinking it must be the fact that I'm initially setting the input value with a PHP variable, but can't figure out why.

Thanks for help!

UPDATE As I was admiring my question, I realized I left something out: the text input is in a Bootstrap modal. So I moved the input out of the modal, and now it works as expected. So now I have something new to Google. I'll leave this question up in case anyone already knows the answer. Thanks!

Answer 1

First make sure jQuery is loaded.

Second, in order to detect that the value has been changed you need an event listener. So we are going to use the jQuery change() to handle this. We will wrap the listener inside of the document.ready() function.

Third, I added an id to the input tag so we can use the id to reference the input.

See if any of this helps you.

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