Javascript 引导导航栏：让搜索按钮工作

我在Bootstrap4.1的导航栏上遇到了很多麻烦，特别是搜索表单。我一直在用它来帮忙。我有一个搜索表单，看起来像是引导的标准：

我希望允许用户输入一些文本，当他们单击搜索按钮时，我希望他们根据输入的文本重定向到新链接。以下是此表单的HTML代码：

<form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Enter text" aria-label="Search" id="text-form">
    <button class="btn btn-outline-light my-2 my-sm-0" type="submit" id="text-search" onclick="searchClick()">Search</button>
</form>

搜寻

下面是javascript文件中的searchClick（）函数：

var searchClick = function() {
    var text = document.getElementById("text-form").value;
    // alert(text);
    window.location.href = "www.<some-url>" + text;
}

var searchClick=function（）{
var text=document.getElementById（“文本形式”）.value；
//警报（文本）；
window.location.href=“www.”+文本；
}

---

我已经确认我可以从输入框中获取文本（使用注释掉的警报），但是无论我尝试什么，它都不会将我重定向到任何地方，或者将我重定向回当前页面。基于其他在线搜索，我尝试了许多不同的代码欺骗：我将按钮更改为带有href字段的

，该字段在单击时会更改（因为没有文本字段值我无法预先填充），我尝试向searchClick（）函数添加一个返回，我尝试过搞乱类，把类型字段改成“reset”或“input”之类，或者干脆把它删除。我还没有找到一个解决方案，所以我想在这里询问一下，看看是否有人比我更了解bootstrap，能够提供一些见解。感谢您的时间。

尝试使用此方法而不是

location.href

属性，您尝试附加到url的文本可能还需要作为有效的查询字符串传递。例如：

http://example.com/over/there?name=ferret

Hi只需添加表单操作和方法..您不再需要JavaScript。 例如：

<form action="" method="post" >
    <!-- input field and button -->
</form>

---

快乐编码：）

将

type=“submit”

更改为

type=“button”

，和/或删除

表单

元素。看起来表单是在javascript有机会运行之前提交的。或者，将事件处理程序切换为on submit并将其附加到

元素。为什么不直接提交表单？（先给输入一个名字，然后给表单一个动作到所需的位置/脚本）这个函数没有添加任何东西，所以根本不需要javascript。这些尝试组合都不起作用-它们都在单击时将我重定向到同一页面（删除

表单

将输入框一直拉伸到左侧）。在将其设置为“www”后立即运行

alert（window.location.href）

，+text也会显示当前url，而不是我想要重定向到的url，因此这可能暗示我将url设置错误（我也尝试使用

window.location（）

进行设置，但尝试时出错）。编辑：这是第一条注释，而不是下面的注释。将

action=“myscriptName.php”

添加到表单中，并将

name=“search”

添加到输入中。单击

，移除
。然后您的表单将被提交，输入的值将作为名称“search”的GET参数一起发送。