Jquery submit form having issue on click event

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> 

To:

<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

Я бы предположил, что это потому, что ваш тип кнопки отправляется. Если вы измените его на кнопку type = "button", тогда она должна работать, хотя вам может понадобиться еще одна кнопка для отправки вашей формы.

Answer 3

Вам нужно предотвратить поведение кнопки отправки по умолчанию, иначе оно будет на странице действий. Для достижения этой цели вам нужно сделать, как -

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