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

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

http://www.google.com/search?q=

---

我该怎么做呢？

我强烈建议您使用带有提交按钮的普通表单。在这种情况下，您甚至不必使用JavaScript。例如：

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

---

使用JQuery使您的生活变得轻松

您的JQuery如下所示：

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

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

您的HTML将如下所示：

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

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

---

更新的解决方案：

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

使用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);
  });

   });

$（文档）.ready（函数（）{
$（“#文本框”）.keyup（函数（）{
var searchstring=$（this.val（）；
searchstring=encodeURIComponent（searchstring）；
$（'#searchlink'）.attr（'href'，'http://www.google.com/search?q=“+搜索字符串）；
});
});

HTML标记：

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

因此，如果有人在框中键入“foo”，链接的值将是

foo

，而不是

http://www.google.com/search?q=foo

Bryan，怎么会这样？但我的回答很草率，因为它需要和一个动作联系起来。。。基本上，您需要将我的jquery代码绑定到一个在文本框更改时运行的函数中<代码>$（“#文本框”）.change（函数（）{//OLD code HERE}）当问题未标记为jQuery时，请不要使用jQuery解决方案。如果用户正在提交表单，则可以使用jQuery解决方案，但他没有。用户实际上单击了一个锚定标记。@Bryan：你说得对，尽管这是一种糟糕的设计模式。OP应该为此使用一个按钮。我会改变我的答案。@Marcel-我同意这是一个糟糕的设计，因为任何在网站上爬行的机器人都会遵循链接（通常不遵循表单），它不是503c，如果关闭CSS，它的可用性就会失败，并且不是锚的作用所在。；）@马塞尔：奇怪的事情-我一向锚添加id，CSS设置

a.button

就不再适用了。这是预期的吗？有任何已知的解决方法吗？@Marcel:Nevermind，我在尝试某些东西时意外删除了href部分，我认为这是因为我添加了id部分。使用

encodeURIComponent

正确编码查询参数。此外，在标记中放入（大量）代码是一种糟糕的设计模式。@Marcel Korpel感谢您的建议。另外，感谢@BryanH添加代码。我已经更新了它，使它也有了encodeURIComponent。至于没有太多的内联JavaScript，我同意，但最初Lazer说他正在做一个扩展，所以我想他可能会喜欢它在HTML中自包含。再次添加google chrome标记，任何针对Chrome的建议都是受欢迎的。您的问题或建议的解决方案的实质内容如何依赖Chrome？当问题未标记为jQuery时，请不要使用jQuery解决方案。