Bootstrap-Eingabefeld und Dropdown-Taste senden

Question

ZIEL: Um ein Eingabefeld zu haben, in das ein Wert eingegeben werden kann, befindet sich rechts neben diesem Eingabefeld eine Bootstrap-Dropdown-Schaltfläche, in der "Store Name, City, State oder Zip" ausgewählt werden kann ".

Sie würden Namen eingeben (sagen Walmart) und wählen Sie Store Name. Wenn sie Store Name auswählen, würde sie das Formular senden und zwei Post-Werte senden, die von php verarbeitet werden:

Suchbegriff | Suchart

Hier ist der Code, den ich für die Schaltfläche haben:

<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'] wird der eingegebene Text und $_POST['search_type'] wird eine der store, city, state oder zip sein.

Answer 2

Für eine reine HTML und CSS-Lösung, versuchen Sie dies:

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