目前的搜索輸入框與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點擊，但不提交

回答

相關問題