html - 小枝テンプレートで入力要素の値を直接取得する方法

Question

小枝テンプレートに次のフォームがあります。

<form id="search-box" action="/search" method="get">
    <input id="search-query" type="text" placeholder="Search..." name="search" role="textbox">
    <a id="search-btn" href="....."></a>
</form>

私の目標は、入力id="search-query"の値を使用してa id="search-btn"の href を作成することです

このために、入力id="search-query"の値にアクセスする必要があります。

私は試しました：

{{ form.search-query.value }}

と

{{ search-box.search-query.value }}

しかし、それらのどれも機能しません。フォームまたは検索が存在しないというエラーが表示されます。

何か案が？

Answer 1

一般に、これは jQuery で行うことができます。

var given_val = '';
var wanted_href = '';
given_val = $('input#search-query').val();
wanted_href = 'http://www.example.com/' + given_val;
$('a#search-btn').attr('href',wanted_href);

Answer 2

あなたが使用する必要があります{{ form.search-query.all.value }}