Как изменить значение ввода текста в модале Bootstrap?

Question

У меня есть этот текстовый ввод в моем шаблоне блэйка PHP Laravel:

<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.Поэтому я переместил ввод из модального режима, и теперь он работает, как и ожидалось.Так что теперь у меня есть что-то новое для Google.Я оставлю этот вопрос на тот случай, если кто-нибудь уже знает ответ.Спасибо!

Answer 1

Попробуйте использовать .on событие

  $(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 }}">

Answer 2

Сначала убедитесь, что загружен jQuery.

Во-вторых, чтобы определить, что значение было изменено, вам необходим прослушиватель событий.Поэтому мы собираемся использовать jQuery change(), чтобы справиться с этим.Мы обернем слушателя внутри функции document.ready().

В-третьих, я добавил идентификатор к тегу ввода, чтобы мы могли использовать идентификатор для ссылки на ввод.

Посмотрим, поможет ли вам что-нибудь из этого.

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