目前的搜索输入框与jquery点击，但不提交

我想获得一个搜索框，当我点击搜索图标显示，目前的问题是，当它出现它也提交搜索。我怎样才能让搜索框出现，但不提交搜索，这只有当在搜索框中输入内容并点击提交时才会显示。目前的搜索输入框与jquery点击，但不提交

<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>

来源

2017-01-06 me9867

给予返回false，您想在其中限制提交表单 – rahulsm

在您的javascript按钮onclick中添加event.preventDefault（）;这可以防止按钮执行其默认行为 –

你有几个问题。首先，您应该为button添加一个type="button"属性以停止提交表单。然后你应该把事件处理程序附加到按钮上，而不是它里面的图标。最后，你需要确保jQuery包含在你的页面中，因为它不是小提琴的一部分。尝试：

$('.search-button').click(function() { 
 
    $('.search input').toggle(); 
 
});

.search input { 
 
    background-color: #FDFDFC; 
 
    background-color: rgba(255, 255, 255, .9); 
 
    box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, .14); 
 
    font-weight: 400; 
 
    font-size: .9em; 
 
    padding: .8em 1em .7em; 
 
    color: #252424; 
 
} 
 
.search input { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="search" method="post" action="/search"> 
 
    <input type="text" name="criteria" placeholder="Search Box"> 
 
    <button type="button" class="search-button"> 
 
    <i class="icons icon-search" aria-hidden="true"></i> <span class="sr">Search Box</span> 
 
    </button> 
 
</form>

来源

2017-01-06 09:47:36

这是看点，并且效果很好。但是，当我的搜索框出现，我键入一些文本，我无法获得搜索提交 - 尝试它在浏览器中也没有搜索提交工作。在这个jsfiddle https://jsfiddle.net/9twxq1Lq/1/的原始形式中，它执行我需要的搜索功能。 – me9867

您需要使用一个单独的按钮来提交表单，一个'type =“button”'来显示表单，另一个'type =“submit”'在表单中执行搜索。用一个按钮就可以做到这一点，但你需要使用一些JS逻辑来确定预期的功能（即显示或提交），这也意味着搜索输入不能再次隐藏。 –

任何关于让它提交的建议 - 它会只是一个更改从点击按钮提交的类型（jquery动作）后的按钮提交的情况吗？ – me9867

button一个被认为是一个submit按钮，如果没有type的形式被定义。如果您不想提交表格，请使用<button type="button">。

这会告诉浏览器在单击按钮时不要提交表单。或者，您可以使用JavaScript来防止在输入命中时提交表单。

来源

2017-01-06 09:48:08 31piy

目前的搜索输入框与jquery点击，但不提交

回答

相关问题