Question

对于我的示例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>

我该怎么做？

Answer 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元素添加ID，例如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
}

Answer 2

更新的解决方案：

Here是一个内联javascript的示例，它适当地设置链接的href，然后让正常处理处理重定向（添加了基于Marcel注释的encodeURIComponent）。

<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>

Answer 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>

Answer 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>

如何将输入字段用作目标的查询参数？

4 个答案: