javascript - 创建一个搜索表单，根据搜索输入打开一个新的 url

Question

我使用 bootstrap 创建了一个表单，您可以在下面看到它。

我想弄清楚如何让用户输入一个值(5 位数)，当他们单击“搜索”按钮时，会打开一个新窗口显示搜索结果。 url 将取决于输入搜索栏的 5 位数字。对于所有搜索，网址中唯一会发生变化的部分是添加到搜索框中的数字。

http://monkey=13857&red

因此，例如，他们在搜索栏中输入 13857，当他们单击“搜索”时，一个新窗口将打开，将他们重定向到 http://monkey=13857&red .我是 javascript 的新手，但我想我会用它来完成这项任务 - 任何帮助将不胜感激。谢谢。

--更新--嗨，mwilson(以及所有帮助如此之快的人)，我实现了代码(感谢您的帮助)，我的代码似乎没有将搜索号码添加到 url。这是我的表单代码

HTML

<form>
<div class="form-group">
<label for="exampleInputEmail1">WorkFlow by Request ID</label>
<input type="text" class="form-control" id="search" placeholder="Request #">
</div>
<button type="submit" class="btn btn-default" id="WFF">Submit</button>
</form>  

JavaScript

    $('#WFF').on('click', function () {
    var searchInput = $('#search').text();
    var url = "http://monkey=" + searchInput + "&red";
    window.open(url);
});

如果我在搜索框中输入 12345 并单击提交按钮，它会打开网站，但没有输入搜索 - http://monkey=&red不是http://monkey=12345&red

Answer 1

您可以使用 window.open(<url>)启动窗口。然后只需构建正确的 url 字符串即可，这可以通过创建一个包含搜索值和 url 的变量来完成。按照您的需要构建它，然后将其传递给 window.open(<url>)功能和你设置。

JQuery

$('#btnSearch').on('click', function () {
    var searchInput = $('#textBoxEl').val();
    var url = "http://monkey=" + searchInput + "&red";
    window.open(url);
});

只是 JavaScript

var button = document.getElementById("btnSearch");

button.onclick = function () {
    var text = document.getElementById("textBoxEl").value;
    window.open("http://monkey=" + text + "&red");
}