ブートストラップ入力フィールドとドロップダウンボタンsubmit

Question

ゴール：値を入力できる入力ボックスを持つには、その入力ボックスの右側にブートストラップドロップダウンボタンがあります。そこでは、 "Store Name、City、StateまたはZip "

名前を入力すると（たとえばWalmart）、店舗名を選択します。ストア名を選択すると、フォームが送信され、PHPで処理される2つのポスト値が送信されます。

検索語|

<form name="searchForm" id="searchForm" method="POST" /> 
     <div class="input-append"> 
     <input class="span2" id="appendedInputButton" type="text"> 
     <div class="btn-group"> 
      <button class="btn dropdown-toggle" data-toggle="dropdown"> 
      Action 
      <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
      <li>Search Store Names</li> 
      <li>Search City</li> 
      <li>Search State</li> 
      <li>Search Zip Code</li> 
      </ul> 
     </div> 
     </div> 
    </form> 

Answer 1

<form name="searchForm" id="searchForm" method="POST" /> 
    <div class="input-append"> 
    <input class="span2" id="appendedInputButton" name="search_term" type="text"> 
    <input class="span2" id="search_type" name="search_type" type="hidden"> 
    <div class="btn-group"> 
     <button class="btn dropdown-toggle" data-toggle="dropdown"> 
     Action 
     <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
     <li onclick="$('#search_type').val('store'); $('#searchForm').submit()">Search Store Names</li> 
     <li onclick="$('#search_type').val('city'); $('#searchForm').submit()">Search City</li> 
     <li onclick="$('#search_type').val('state'); $('#searchForm').submit()">Search State</li> 
     <li onclick="$('#search_type').val('zip'); $('#searchForm').submit()">Search Zip Code</li> 
     </ul> 
    </div> 
    </div> 
</form> 

$_POST['search_term']が入力したテキストになり、$_POST['search_type']はstoreの1、city、state、またはzip次のようになります。ここでは

検索タイプは、私がボタンを持っているコードです。

Answer 2

純粋なHTMLとCSSソリューションについては、これを試してみてください。

<li> 
    <input type="submit" class="form-control btn btn-link" name="submit" value="Search State"> 
</li> 

CSS：

.dropdown input { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: 400; 
    line-height: 1.42857143; 
    color: #333; 
    white-space: nowrap; 
    height: 26px; 
} 

.dropdown .btn-link:hover { 
    text-decoration: none; 
    background-color: #e8e8e8; 
}