javascript - Button first action on click and second action on click -
the animated search box expanding @ click on button input. after entering text , second click on icon should send form method get.
i not know doing wrong , happy if can help.
<form action="navi.php" method="get"> <div class="search-wrapper"> <div class="input-holder"> <input type="text" class="search-input" placeholder="type search" /> <button class="search-icon" onclick="searchtoggle(this, event);"><span></span></button> </div> </div> </form> the javascript function
function searchtoggle(obj, evt){ var container = $(obj).closest('.search-wrapper'); if(!container.hasclass('active')){ container.addclass('active'); evt.preventdefault(); } else if(container.hasclass('active')){ container.removeclass('active'); // clear input container.find('.search-input').val(''); // clear , hide result container when press close container.find('.result-container').fadeout(100, function(){$(this).empty();}); } }
try using this
function searchtoggle(obj){ var container = $(obj).find('.search-wrapper'); if(!container.hasclass('active')){ container.addclass('active'); return false; } else if(container.hasclass('active')){ container.removeclass('active'); // clear input container.find('.search-input').val(''); // clear , hide result container when press close container.find('.result-container').fadeout(100, function(){$(this).empty();}); return true; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="navi.php" method="get" onsubmit="return searchtoggle(this);"> <div class="search-wrapper"> <div class="input-holder"> <input type="text" class="search-input" placeholder="type search" /> <button class="search-icon" type="submit"><span></span>submit</button> </div> </div> </form>