My Project My Project - 3 months ago 14
HTML Question

Jquery submit form having issue on click event

I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.

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>


Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.

Answer

Change the inline code from:

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

Avoid this line:

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

Prevent the form submission only when needed.

So:

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

Comments