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

【问题标题】：Creating a search form that opens a new url based on search input创建基于搜索输入打开新 url 的搜索表单
【发布时间】：2015-11-14 17:00:21
【问题描述】：

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

我试图弄清楚如何让用户输入一个值（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

【问题讨论】：

添加构成表单的代码

标签： javascript html twitter-bootstrap url search

【解决方案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");
}

【讨论】：

我认为您应该为 OP 添加 javascript 代码。由于 OP 是 Javascript 的新手，可能很难进入 jquery
您好 mwilson，我实现了您的代码（感谢您的帮助），看起来我的代码没有将搜索数字添加到 url。这是我的表单代码
您的 HTML 中是否引用了 jQuery？如果没有，您的代码将无法正常工作。您将需要使用“Just JavaScript”示例。
我已经添加了 jQuery。我刚刚添加并测试了它，它可以工作，但这是我尝试的第一个真正的非测试命令。

【解决方案2】：

像这样写一个javascript函数，

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

并调用函数

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

【讨论】：

【解决方案3】：

也许您实际上需要以这种方式构建 URL……但通常“提交”表单。接收表单可以访问发布给它的数据，您可以使用这些数据运行搜索。您可以通过设置表单 target = _blank 在新窗口中打开。

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

【讨论】：

【解决方案4】：

首先导入 JQuery & 试试这段代码

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

使用val() 而不是text()

【讨论】：