Tvoj_faker
@Tvoj_faker
местная фиеста из глубин далекого

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

Есть простейшая 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 предпочтительнее.
  • Вопрос задан
  • 212 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
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(/ +/, '+') - заменяет пробелы, в том числе множественные, плюсами.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы