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

搜寻
函数tog_input（）{
if（jQuery（#search”）.is（':visible'））
{         
if（jQuery（“#search”）.val（）！=”{jQuery（“#search_mini_form”）.submit（）；
}否则{
jQuery（#search”）.animate（{width:'hide'}）；
}
}
其他的
{
jQuery（#search”）.animate（{width:'show'}）；
} 
}

---

现在的问题是，当我点击搜索图标时，它会显示搜索页面而不是文本框，任何帮助都将不胜感激

我认为这是因为您的按钮类型是submit。如果您将其更改为button type=“button”，那么它应该可以工作，尽管您可能需要另一个按钮来提交表单。

您需要防止提交按钮的默认行为，否则它将出现在操作页面中。要实现这一目标，你需要做以下几点-

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

---

将内联代码更改为：

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

防止仅在需要时提交表单

因此：

搜寻
提交
功能切换输入（obj，e）{
if（jQuery（#search”）.is（':visible'））{
if（jQuery（“#search”）.val（）=''）{
jQuery（#search”）.animate（{width:'hide'}）；
e、 预防默认值（）；
}
}
否则{
e、 预防默认值（）；
jQuery（#search”）.animate（{width:'show'}）；
}
}

谢谢，我累了，它不工作了。我参考了一个网站。我尝试实现类似的功能。感谢代码，当我使用preventdefault时，单击action not working.，我需要在第一次单击按钮时显示文本框，然后输入文本，然后再次单击相同的按钮。请，检查循环条件，因为默认提交行为被阻止，现在可以使用jquery/js函数了

console.log（）

你的条件/变量你会找到一种方法。完美的方法。谢谢

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

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