[英]Jquery submit form having issue on click event
我正在创建搜索表单,当用户单击搜索图标时,我需要显示文本框,一旦输入内容,然后再次单击相同的搜索图标,它就需要显示搜索结果。 下面是我使用的代码。
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>
现在的问题是,当我单击搜索图标时,它显示搜索页面而不是文本框,我们将不胜感激。
从以下位置更改内联代码:
<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>
我建议这是因为您的按钮类型是“提交”。 如果将其更改为button type =“ button”,则它应该起作用,尽管您可能需要另一个按钮来提交表单。
您需要阻止“提交”按钮的默认行为,否则它将最终出现在操作页面中。 为此,您需要-
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.