Pole wprowadzania i przycisk rozwijania do wysyłania Wyślij

Question

CEL: Aby mieć pole wprowadzania, w którym można wpisać wartość, a następnie na prawo od tego pola wejściowego jest przycisk rozwijania ładowania początkowego, gdzie można wybrać "Nazwa sklepu, miasto, województwo lub Zip ".

Zostaną wpisane nazwisko (na przykład Walmart), a następnie wybierz Nazwa sklepu. Po wybraniu opcji Nazwa Sklepu prześle formularz i wyśle ​​dwie wartości postów do obsłużenia przez php:

wyszukiwać | Typ wyszukiwania

Oto kod mam dla przycisku:

<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'] będzie wprowadzony tekst i $_POST['search_type'] będzie jednym z store, city, state lub zip.

Answer 2

Dla czystego HTML i CSS rozwiązania, spróbuj tego:

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