Автоматическое добавление текста из формы в ссылку на PHP или JavaScript?

Question

[железный орел]

Есть простейшая html страница, на ней расположена простейшая input form

Text:<input type="text" name="name" style="width:200px; height: 30px;"><br>
<a href="https://google.com/"></a>

Как реализовать чтобы при вводе текста в поле input формы - этот текст добавлялся в ссылку на лету, вот так:

Text:<input type="text" name="name" style="width:200px; height: 30px;"><br>
<a href="https://google.com/+INPUTTEXT"></a>

где INPUTTEXT - это и есть текст который берется из

Text:<input type="text" name="name" style="width:200px; height: 30px;"><br>

Я так понял что на лету ето можно сделать на JS, на PHP можно сделать вывод результата после нажатия на копку input формы. JS предпочтительнее.

Answer 1

[Антон Спирин]

HTML:

<input class="js-search" />
<a class="js-search-link" target="_blank" href="#">Search in Google</a>

JS:

var defaultHref = 'https://google.com/search?q=';
var search = document.querySelector('.js-search');
var link = document.querySelector('.js-search-link');

link.setAttribute('href', defaultHref);

search.addEventListener('input', function() {
  link.setAttribute('href', defaultHref + search.value.trim().replace(/ +/, '+'));
});

Демо.

Вызов .trim() - удаляет пробелы в начале и конце строки.
Вызов .replace(/ +/, '+') - заменяет пробелы, в том числе множественные, плюсами.