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

我使用bootstrap创建了一个表单，您可以在下面看到它。创建一个基于搜索输入打开新url的搜索表单

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

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

--Update-- 喜mwilson（大家谁这么快就帮助），我实现的代码（谢谢你的帮助），它看起来像我的代码是不是在搜索量增加到网址。这里是我的表单代码

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

来源

2015-08-20 DashDingo

补充，构成了形式 – user1

您可以使用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"); 
}

来源

2015-08-20 21:26:24 mwilson

我想你应该添加JavaScript代码的代码为OP。由于OP是Javascript新手，可能很难进入jquery – user1

嗨mwilson，我实现了你的代码（谢谢你的帮助），好像我的代码没有在搜索数字中加入url。这里是我的表单代码 – DashDingo

你有没有在HTML中引用jQuery？如果没有，你的代码将无法工作。您将需要使用'Just JavaScript'示例。 – mwilson

写这样的JavaScript函数，

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

并调用该函数

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

来源

2015-08-20 21:33:38 sriharichander

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

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

来源

2015-08-20 21:37:07 Crowcoder

首先导入JQuery的& 试试这个代码

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

使用val()而不是text()

来源

2015-09-29 12:46:48

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

回答

相关问题