Submit form after search button is pressed using bootstrap

Question

<div class="container">
                <div class="row">    
                    <div class="col-xs-8 col-xs-offset-2">

                        <div class="input-group">
                            <div class="input-group-btn search-panel">

                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span id="search_concept">Filter</span> <span class="caret"></span>
                                </button>
                                <ul   class="dropdown-menu" role="menu">
                                  <li><a href="#Electronics">electronics</a></li>
                          <li><a href="#Movies">movies</a></li>

                                  <li class="divider"></li>
                                  <li><a href="#all">All</a></li>
                                </ul>
                            </div>
                    <form method="POST" name="form" action="#">

                                <input type="hidden" name="search_param" value="all" id="search_param">         
                                <input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default"  type="submit"><span class="glyphicon glyphicon-search"></span></button>
                        </span>

                    </form>
                        </div>

                    </div>
                   </div>
                </div>

ISSUE Everytime I press Go button; I redirect to same page; which I want however by drop down acts funky; like it doesn't replace the 'filter' button with appropriate choosen filter inside dropdown-menu when after the form gets submitted. Here's the code for that. However before I press go button it works as expected. What could be happening?

    <script>
         $(document).ready(function(e){
              $('.search-panel .dropdown-menu').find('a').click(function(e) {
                e.preventDefault();
              var param = $(this).attr("href").replace("#","");
              var concept = $(this).text();
              $('.search-panel span#search_concept').text(concept);
              $('.input-group #search_param').val(param);
              });
            });

  </script>

JS FIDDLE: https://jsfiddle.net/0e37tvyx/

Answer 1

There is nothing wrong in this. Your fiddle code works fine for all UI change operations. But because your form supports POST method, all your form parameters are submitted as POST request. You have three possible options (may be more than that too) to preserve the state of last chosen filters:

1. Use ajax request instead of form submit with entire page refresh. In this way you will have to add content from server response in your page; that is search results.

2. If your content is generating dynamically. I mean to say you are using PHP / JSP / ASP / Any Other Templating Library , you can use that, to update the HTML code based upon the search request, ie search_param request param.

3. The other way is use cookies. When user changes the option in front end preserve the filter option search_param in cookies. And on ready state of document; read those saved cookies if exists or fallback to default option all if not already stored in cookies.

Check out the fiddle for cookie based implementation. Not that I have added cookies plugin of jQuery.

https://jsfiddle.net/ksbora/3w6k171f/2

Note: Cookies has size limitations too and cross site origination restrictions. So, be careful which option you choose.