Question

所以我是一个Javascript新手，无法弄清楚如何将我的HTML模板中的变量传递给Javascript。

我想将用户输入的搜索查询传递给javascript。

这是我获取搜索查询的模板。

<form class="well-whatsnext form-search" style="text-align:center; border-radius:10px 10px 10px 10px; width:900px; height:0px;background-repeat:no-repeat;margin-bottom:100px;"  action="/search/?q="> 
<center>
 <input type="text" id = "form-search" value="Search for Stuff" class="input-xxlarge search-query" style="margin: 30px 0px 0px 70px; height:50px;width:600px;font-size:20px;vertical-align:middle;text-align:center;border-radius:10px 0px 0px 10px;float:left;border-right:0px;color:grey;border-right:0px;" name="q">
</center>
<br>
</form>

这是我的Javascript代码段：

$("#form-search").click(function() {
    // This sends us an event every time a user clicks the button
    mixpanel.track('MainSearch', {'query' : search-query, 'url' : window.location.pathname});
});

很明显，search-query不是引用查询的正确方法，因为我没有得到我想要的正确输出。

如何捕获用户搜索的查询变量？

Answer 1

使用$('.search-query').val()获取具有该类名的input元素的值：

{ 'query' : $('.search-query').val() ... }

Answer 2

尽可能使用纯JavaScript。

{'query': document.getElementById('form-search').value}

将变量传递给Javascript

2 个答案: