Обращение к тексту, введённому в поле формы

322

16 июля 2017, 10:14

Подскажите, будьте добры. Изучаю jQuery с недавних пор, так что, если это возможно, без специфических выражений и терминов.
Суть в следующем: сделать так, что-бы ссылка с кнопкой (к прим. "Найти") получала (приобретала) ссылку в зависимости от введённого в поле формы текста.

<form class="search-field__search-form">
<input class="search-field__input" type="search" placeholder="">
<button class="search-field__button" name="button-search">Найти</button>
</form>

Answer 1

$('.search-field__button').on('click',function(e) { 
  e.preventDefault(); 
  var text = $('.search-field__input').val(); 
  console.log(text); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="search-field__search-form"> 
  <input class="search-field__input" type="search" placeholder=""> 
  <button class="search-field__button" name="button-search">Найти</button> 
</form>

Answer 2

Вот только на js

function qsa(e) 
{return document.querySelectorAll(e) 
} 
qsa('.search-field__button')[0].onclick = function(e) { 
  e.preventDefault(); 
  var text = qsa('.search-field__input')[0].value; 
  console.log(text); 
}

<form class="search-field__search-form"> 
  <input class="search-field__input" type="search" placeholder=""> 
  <button class="search-field__button" name="button-search">Найти</button> 
</form>