создать запрос GET из текстового поля действие

Question

Когда пользователь вводит текст или клики, мне нужно перенаправить их на страницу со значением, которое они ввели в качестве запроса GET. Я не могу понять это для жизни меня.

Я использую самозагрузки и в настоящее время:

 <div class="input-group"> 
      <input type="text" class="form-control" placeholder="channel name here..."> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Go!</button> 
      </span> 
     </div> 

, который производит: Когда пользователь вводит текст и нажимает кнопку идти, или хиты войти Я хочу, чтобы перенаправить их на

например. com/search /? text = TEXT_ENTERED

Answer 1

• Заменить div на form.
• Введите action формы в URL-адрес (без строки запроса), к которой вы хотите перейти.
• Дайте inputname (text в вашем примере)
• Удалить атрибут type из button сделать это кнопка

представить ... и забыть о JavaScript. Это не нужно для этого.

Answer 2

Для этого требуется простое применение элемента HTML <form>. Просто окружить <input> с чем-то вроде этого:

<!-- Replace "/search" with the location of your search page --> 
<form action="/search" method="GET"> 
    <!-- Your search field --> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="channel name here..."> 
     <span class="input-group-btn"> 
      <!-- Make sure this is a submit button, like @Quentin mentioned --> 
      <button class="btn btn-default">Go!</button> 
     </span> 
    </div> 
</form> 

Теперь, нажав Введите на своем поле поиска или нажав на кнопку «Go!» даст тот же результат, и вы должны указать желаемый URL-адрес: mysite.com/search/?text=TEXT_ENTERED

Счастливое кодирование!

Answer 3

Вы можете использовать формы или, если хотите перенаправить, вы можете просто добавить обработчик события в событие click, которое устанавливает window.location в http://example.com/search/?text=TEXT_ENTERED. Или вы можете просто сделать запрос AJAX, используя некоторую библиотеку JavaScript, такую ​​как jQuery.

<button id="myButton" class="btn btn-default" type="button">Go!</button> 
$("#myButton").on("click", function() { 
$.ajax({ 
      url: 'http://example.com/search/?text=' + $("#myButton").text(), 
      error: function (err) { 
        console.warn("Error", err); 
       } 
      }, 
      success: function (response) { 
       //handle success 
      }, 
      type: 'get' 
     }); 
}