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

【问题标题】：bootstrap navbar: getting search buttons to work引导导航栏：让搜索按钮工作
【发布时间】：2018-08-30 01:50:01
【问题描述】：

我在使用 bootstrap 4.1 的导航栏时遇到了很多问题——特别是搜索表单。我一直在使用this documentation link 来提供帮助。我有一个看起来非常标准的引导搜索表单：

我想允许用户输入一些文本，当他们单击搜索按钮时，我希望他们根据输入的文本重定向到一个新链接。这是此表单的 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;
}

我已经确认我可以从输入框中获取文本（使用注释掉的警报），但无论我尝试什么，它要么不会将我重定向到任何地方，要么会将我重定向回当前页面。我已经根据其他在线搜索尝试了很多不同的代码：我已将按钮更改为 <a>，其 href 字段在单击时会更改（因为我无法在没有文本的情况下预先填充它字段值），我尝试向 searchClick() 函数添加返回，并且尝试将类弄乱并将类型字段更改为“重置”或“输入”或完全删除它。我还没有找到解决方案，所以我想在这里问一下，看看是否有人比我更了解引导程序可以提供一些见解。感谢您的宝贵时间。

【问题讨论】：

将type="submit" 更改为type="button"，和/或删除form 元素。看起来表单在您的 javascript 有机会运行之前提交。
或者，将事件处理程序切换为 on submit 并将其附加到 <form> 元素。
您为什么不直接提交表单？（并首先给输入一个名称，然后为所需位置/脚本提供一个动作）这个函数没有添加任何东西，所以根本不需要javascript。
这些尝试的组合都没有奏效——它们都将我重定向到单击时的同一页面（删除form 将输入框一直延伸到左侧）。在将 alert(window.location.href) 设置为 "www." + text 后立即运行 alert(window.location.href) 也会显示当前 url 而不是我想要重定向到的那个，所以这可能是我设置 url 错误的提示（我'也尝试使用window.location(<url>) 设置它，但尝试时出错）。编辑：这是第一个评论，而不是以下评论。
在表单中添加action="myscriptName.php"，在输入中添加name="search"。删除onClick。然后您的表单将被提交，输入的值将作为名称“search”的 GET 参数发送。

标签： javascript html bootstrap-4

【解决方案1】：

尝试使用location.replace() 方法而不是location.href 属性，您尝试附加到url 的文本可能还需要作为有效的查询字符串传递。例如：http://example.com/over/there?name=ferret

【讨论】：

【解决方案2】：

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

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

编码愉快:)

【讨论】：