bootstrap input field and dropdown button submit

9
votes

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>
2
formstwitter-bootstrap

2 Answers

26
votes
<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.

6
votes

For a pure html and css solution, try this:

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