获取HTML中输入字段的值并在链接URL中使用它

Question

我在html中有一个搜索按钮，我希望它链接到

/home/search/search_term 

其中搜索词是输入相应输入元素的值。

像

这样的东西

<input id="input_field"> </input>
<button onclick="location.href='home/search/$(input_field).value'">Search</button>

会很理想。

我怎样才能达到这样的目标？

Answer 1

没有</input>。将您的代码更改为：

<input id="input_field" />
<button onclick="location.href='/home/search/' + $('#input_field').val();">Search</button>

如果您不使用jQuery，请将代码更改为：

<input id="input_field" />
<button onclick="location.href='/home/search/' + document.getElementById('input_field').value;">Search</button>

Answer 2

首先，input元素是自我关闭的。这意味着您使用<input ... />而不是<input>...</input>。

一旦你改变了，假设你有jQuery library，你需要改变：

'home/search/$(input_field).value'

要：

'home/search/' + $('#input_field').val()

如果您没有包含jQuery库，那么这将不起作用，因为上面的代码片段包含jQuery代码。相反，你可以使用它：

'home/search/' + document.getElementById('input_field').value