Clickイベントで問題が発生したJquery submit form

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 
}