bootstrap input field and dropdown button submit

forms, twitter-bootstrap

Solution

<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']` will be the entered text and `$_POST['search_type']` will be one of `store`, `city`, `state`, or `zip`.

Problem

GOAL: To have a input box where a value can be typed, then to the right of that input box is a bootstrap dropdown button where they can select "Store Name, City, State or Zip". They would type in name (say Walmart) and then select Store Name. When they select Store Name it would submit the form and send two post values to be handled by php: search term | search type Here is the code I have for the button: ``` <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> ```

Original source