jquery提交表單發生點擊事件

Question

我正在創建搜索表單，當用戶點擊搜索圖標時，我需要顯示文本框，一旦我輸入了內容，並再次點擊相同的搜索圖標，它需要顯示搜索結果。以下是我使用的代碼。

HTML &的Javascript

<div class="search_right"> 
<div class="search-top-container"> 
<div class="search-top"></div> 
<div class="search-form"> 
<div class="search-form-border"></div> 
<div class="search-top-title"><span class="icon"></span>Search</div> 
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get"> 
<div class="form-search"> 
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off"> 
    <button type="submit" title="Search" id="but" onclick="tog_input();" >  
    </button> 
    </div> 
    <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div> 
    <script type="text/javascript"> 
    function tog_input(){ 
    if(jQuery("#search").is(':visible')) 
    {   
    if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();  
    }else{ 
    jQuery("#search").animate({ width: 'hide' }); 
    } 
    } 
    else 
    { 
    jQuery("#search").animate({ width: 'show' }); 
    } 
    } 
    </script> 
    </form> 
    </div> 
    <div class="clear"></div> 
    </div> 

眼下的問題是，當我點擊搜索圖標，它顯示的搜索頁面，而不是文本，任何援助將不勝感激。

Answer 1

更改內嵌代碼：

<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button> 

要：

<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button> 

避免這一行：

jQuery("#search_mini_form").submit(); 

預防僅在需要時才提交表單。

所以：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="search_right"> 
 
    <div class="search-top-container"> 
 
     <div class="search-top"></div> 
 
     <div class="search-form"> 
 
      <div class="search-form-border"></div> 
 
      <div class="search-top-title"><span class="icon"></span>Search</div> 
 
      <form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get"> 
 
       <div class="form-search"> 
 
        <input id="search" type="text" name="q" value="" class="input-text" style="display:none;" 
 
          autocomplete="off"> 
 
        <button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit 
 
        </button> 
 
       </div> 
 
       <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div> 
 
       <script type="text/javascript"> 
 

 
        function tog_input(obj, e) { 
 

 
         if (jQuery("#search").is(':visible')) { 
 

 
          if (jQuery("#search").val() == '') { 
 

 
           jQuery("#search").animate({width: 'hide'}); 
 
           e.preventDefault(); 
 
          } 
 
         } 
 
         else { 
 

 
          e.preventDefault(); 
 

 
          jQuery("#search").animate({width: 'show'}); 
 
         } 
 
        } 
 
       </script> 
 
      </form> 
 
     </div> 
 
     <div class="clear"></div> 
 
    </div> 
 
</div>

Answer 2

我建議這是因爲您的按鈕類型是提交。如果將其更改爲按鈕類型=「按鈕」，那麼它應該可以工作，但您可能需要另一個按鈕才能提交表單。

Answer 3

您需要防止提交按鈕的默認行爲，否則它將在操作頁面中結束。爲了實現它，你需要做的是 -

function tog_input(e){ 
    e.preventDefault();// prevents default action 
    ... other code 
}