Javascript 创建基于搜索输入打开新url的搜索表单

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

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

例如，他们在搜索栏中输入13857，当他们点击“搜索”时，一个新的窗口打开，将他们重定向到。我是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>  

---

如果我在搜索框中输入12345并单击“提交”按钮，它将打开站点，但没有输入搜索-不

您可以使用

window.open（）

启动窗口。然后，只需构建适当的url字符串，这可以通过创建一个保存搜索值和url的变量来完成。按照您需要的方式构建它，然后将其传递到

窗口。open（）

函数，您就可以进行设置了

JQuery

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

仅使用JavaScript

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

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

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

---

编写一个javascript函数，如下所示

function search()
{
var searchInput = document.getElementById('search').text();
var url = "http://monkey=" + searchInput + "&red";
window.open(url);
}

并调用该函数

<input type="button" onclick="search()"

---

也许你真的需要以这种方式构建URL。。。但是表单通常是“提交”的。接收表单可以访问发布到表单上的数据，您可以使用这些数据来运行搜索。
通过将表单target=\u设置为空，可以在新窗口中打开

<form target="_blank" action="monkey.html">
     <!-- your form here -->
     <input type="submit" value="Submit"/>
</form>


第一次导入JQuery&
试试这个代码

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

使用
val（）
而不是
text（）

我认为您应该为OP添加javascript代码。由于OP是javascript的新手，可能很难进入jqueryHi mwilson，我实现了您的代码（感谢您的帮助），而且我的代码似乎没有在url中添加搜索编号。这是我的表单代码在HTML中是否有对jQuery的引用？否则，您的代码将无法工作。您需要使用“justJavaScript”示例。我添加了jQuery。我刚刚添加并测试了它，它可以工作，但这是我正在尝试的第一个真正的非测试命令