创建一个搜索表单，该表单根据搜索输入打开一个新的URL

Question

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

我试图弄清楚如何让用户输入一个值（5位数字），然后当他们单击“搜索”按钮时，将打开一个新窗口，显示搜索结果。网址取决于在搜索栏中输入的5位数字。对于所有搜索而言，URL唯一更改的部分是在搜索框中添加的数字。

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");
}