フォームを送信

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私はボタンを押します 毎回。私は同じページにリダイレクトします。私はしかし、ドロップダウンの行為によってファンキーな欲しい;フォームが提出された後にドロップダウンメニューの中の適切な選択されたフィルタで 'フィルタ'ボタンを置き換えないように。ここにそのコードがあります。しかし、私はgoボタンを押す前に、それは期待どおりに動作します。何が起こっているのでしょうか？

<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

この中には何も間違っています。あなたのフィドルコードは、すべてのUI変更操作でうまく動作します。しかし、フォームがPOSTメソッドをサポートしているため、すべてのフォームパラメータはPOSTリクエストとして送信されます。

使用AJAX要求の代わりに、フォームはページ全体の更新を提出

：あなたは最後に選択したフィルタの状態を保存するための3つの可能な選択肢を（あまりにもそれ以上でもよい）があります。このようにして、ページ内のサーバーレスポンスのコンテンツを追加する必要があります。それは検索結果です。

1. コンテンツが動的に生成されている場合。あなたがPHP/JSP/ASP/Any Other Templating Libraryを使用しているとします。これを使用して、検索リクエストに基づいてHTMLコードを更新することができます。つまり、search_paramリクエストパラメータです。

2. 他の方法はクッキーを使用することです。ユーザーがフロントエンドのオプションを変更すると、フィルタオプションsearch_paramがクッキーに保持されます。そして、文書のreadyの状態で; Cookieに保存されていない場合は、保存されているクッキーを読み込み、デフォルトのオプションallに置き換えます。

クッキーベースの実装については、 jQueryのクッキープラグインを追加したわけではありません。

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

注：Cookiesはあまりにも、クロスサイト発信制限サイズの制限があります。だから、どのオプションを選ぶか注意してください。