Блог

Главная - Вопросы по программированию - Как использовать поле ввода в качестве параметра запроса к месту назначения?

Как использовать поле ввода в качестве параметра запроса к месту назначения?

#javascript #html #google-chrome #google-chrome-extension

#javascript #HTML #google-chrome #google-chrome-расширение

Вопрос:

Для моего примера расширения Google Chrome у меня есть текстовое поле и ссылка:

 <input id="textbox" type="text" value="" size="25" />
<a class="button" href="http://www.google.com"><span>Search</span></a>

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

 http://www.google.com/search?q=<whatever was in textbox>

Как я могу это сделать?

Комментарии:

1. Добавлены теги google-chrome опять же, любые предложения, относящиеся к Chrome, также приветствуются..

2. Как суть вашего вопроса или предлагаемых решений зависит от Chrome?

Ответ №1:

Я настоятельно рекомендую вам использовать для этого обычную форму с кнопкой отправки. В этом случае вам даже не обязательно использовать JavaScript вообще. Например:

 <form action="http://www.google.com/search">
    <input id="textbox" name="q" type="text" value="" size="25" />
    <input type="submit" value="Search" />
</form>

Если вы действительно хотите использовать предоставленную разметку, лучшее, что вы можете сделать, это добавить идентификатор к a элементу, например searchButton , а затем выполнить:

 document.getElementById("searchButton").onclick = doSearch;

function doSearch() {
    var v = document.getElementById("textbox").value;
    window.location = "http://www.google.com/search?q="   encodeURIComponent(v);
    return false; // not entirely necessary, but just in case
}

Комментарии:

1. Это сработало бы, если бы пользователь отправлял форму, но он этого не делает. Пользователь фактически нажимает на тег привязки.

2. @Bryan: Вы правы, хотя это плохой шаблон проектирования. Для этого OP должен использовать кнопку. Я изменю свой ответ.

3. @Marcel — Я согласен, что это плохой дизайн, потому что любой робот, сканирующий сайт, перейдет по ссылке (обычно они не переходят по формам), это не 503c, не сможет использовать юзабилити, если CSS отключен, и это не то, для чего нужны якоря. 😉

4. @Marcel: Странная вещь — как только я добавляю идентификатор к привязке, настройки CSS a.button больше не применяются. Ожидается ли это? Какие-либо известные обходные пути?

5. @Marcel: Неважно, я случайно удалил часть href, пытаясь что-то сделать, и я подумал, что это потому, что я добавил часть id.

Ответ №2:

ОБНОВЛЕННОЕ РЕШЕНИЕ:

Вот пример со встроенным javascript, который соответствующим образом задает href ссылки, а затем позволяет обычной обработке обрабатывать перенаправление (добавлен кодировщик на основе комментария Марселя).

 <input id="textbox" type="text" value="" size="25" />
<a class="button" id="googleLink" href="willBeChanged" 
 onclick="this.href='http://www.google.com/search?q='   encodeURIComponent(document.getElementById('textbox').value);">
  <span>Search</span>
</a>

Комментарии:

1. Используйте encodeURIComponent для правильного кодирования параметров запроса. Более того, это плохой шаблон проектирования — помещать (много) кода в вашу разметку.

2. @Marcel Korpel Спасибо за предложения. Кроме того, спасибо @BryanH за добавление кода. Я обновил его, чтобы в нем также был encodeURIComponent. Что касается отсутствия слишком большого количества встроенного JavaScript, я согласен, но изначально Lazer сказал, что он создает расширение, поэтому я подумал, что ему может понравиться его автономность в HTML.

Ответ №3:

Используйте jQuery, чтобы упростить себе жизнь.

Ваш jQuery будет выглядеть следующим образом:

 $("#linky").attr('href',"http://www.google.com/search?q=" $("#textbox").val());

Ваш HTML будет выглядеть следующим образом:

 <input id="textbox" type="text" value="" size="25"></input>
<a class="button" href="www.google.com" id="linky"><span>Search</span></a>

Комментарии:

1. Итак, если кто-то введет «foo» в поле, значение ссылки будет foo , а не http://www.google.com/search?q=foo

2. Брайан, как же так? Но мой ответ был неаккуратным, потому что его нужно привязать к действию… По сути, вам нужно привязать мой код jquery к функции, которая запускается при изменении текстового поля. $("#textbox").change( function() { // OLD CODE HERE });

3. Пожалуйста, не используйте решения jQuery, если вопрос не помечен как jQuery.

Ответ №4:

Использование jquery:

    <script type="text/javascript">
    $(document).ready(function(){   
   $("#textbox").keyup(function () {
  var searchstring = $(this).val();
  searchstring = encodeURIComponent(searchstring);

  $('#searchlink').attr('href', 'http://www.google.com/search?q='   searchstring);
  });

   });

HTML-разметка:

    <input id="textbox" type="text"  size="25">
   <a class="button" href="http://www.google.com" id='searchlink'>Search</a>

Комментарии:

1. Пожалуйста, не используйте решения jQuery, если вопрос не помечен как jQuery.