jquery提交表单发生点击事件

我正在创建搜索表单，当用户点击搜索图标时，我需要显示文本框，一旦我输入了内容，并再次点击相同的搜索图标，它需要显示搜索结果。以下是我使用的代码。jquery提交表单发生点击事件

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>

眼下的问题是，当我点击搜索图标，它显示的搜索页面，而不是文本，任何援助将不胜感激。

来源

2016-08-25 My Project

更改内嵌代码：

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

来源

2016-08-25 10:43:27 gaetanoM

完美的一个。谢谢 –

我建议这是因为您的按钮类型是提交。如果将其更改为按钮类型=“按钮”，那么它应该可以工作，但您可能需要另一个按钮才能提交表单。

来源

2016-08-25 10:39:17 Kristian82

谢谢，我累了，它不工作。我提到了一个网站。 http://qdsociety.com/我试图实现类似的功能。 –

您需要防止提交按钮的默认行为，否则它将在操作页面中结束。为了实现它，你需要做的是 -

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

来源

2016-08-25 10:41:19

感谢您的代码，当我使用preventdefault时，单击操作不起作用。，我需要在第一次点击按钮时显示文本框，然后我将输入文本，然后再次点击相同的按钮。 –

请检查您的循环条件作为默认提交行为是阻止你现在可以有jquery/js函数。 'console.log（）'你的条件/变量你会找到一种方法。 –

jquery提交表单发生点击事件

回答

相关问题