Javascript 单击时显示带有Jquery的搜索输入框，但不提交

我试图在单击搜索图标时显示一个搜索框，当前的问题是，当它出现时，它也会提交搜索。我怎样才能让它使搜索框出现，但不提交在这一点上的搜索，这只有当在搜索框中输入一些东西，并点击提交明显

搜索框

您有几个问题。首先，您应该向

按钮添加
type=“button”
属性，以停止其提交表单。然后，您应该将事件处理程序附加到按钮，而不是按钮内的图标。最后，您需要确保jQuery包含在页面中，因为它不是fiddle的一部分。试试这个：


$（'.search按钮'）。单击（函数（）{
$（'.search input'）.toggle（）；
});
。搜索输入{
背景色：#FDFC；
背景色：rgba（255、255、255、.9）；
长方体阴影：插入1px 1px 0 rgba（0,0,0,14）；
字体大小：400；
字体大小：.9em；
填充物：8em 1em.7em；
颜色：#252424；
}
.搜索输入{
显示：无；
}

搜索框
如果表单中未定义
类型
，则
按钮
被视为
提交
按钮。如果您不想提交表单，请使用

这将告诉浏览器，如果单击按钮，则不要提交表单。或者，如果按下enter键，您可以使用JavaScript阻止提交表单。
give return false，您希望在JavaScript添加事件中的按钮一次点击后限制提交表单。preventDefault（）；这可以防止按钮执行其默认行为，这看起来非常正确，效果非常好。但是，当我的搜索框出现，我键入一些文本时，我无法让搜索提交-我也在浏览器中试用了它，但没有搜索提交工作。在这个JSFIDLE的原始表单中，它正在执行我需要的搜索功能。在这种情况下，您需要使用一个单独的按钮来提交表单-一个
type=“button”
显示表单，另一个
type=“submit”
在表单中执行搜索。只需一个按钮就可以完成，但您需要使用一些JS逻辑来确定预期的功能（即显示或提交）这也意味着搜索输入无法再次隐藏。关于让它也提交的任何建议-是否只是在单击按钮后将类型更改为从按钮提交（jquery已执行操作）？比这要复杂一点-您需要钩住表单的
submit
事件，并根据输入的状态阻止提交：。正如我所提到的那样，这样做意味着你不能再隐藏搜索输入了。答案是：勾选，当场，绝对完美。非常感谢。
<form class="search" method="post" action="/search">
    <input type="text" name="criteria" placeholder="Search Box">
    <button>
        <i class="icons icon-search" aria-hidden="true"></i> <span class="sr">Search Box</span>
    </button>
</form>