Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap input field and dropdown button submit

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>
like image 299
John Avatar asked Mar 26 '13 23:03

John


2 Answers

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

like image 53
MichaelRushton Avatar answered Nov 06 '22 16:11

MichaelRushton


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;
}
like image 42
Brent Sandstrom Avatar answered Nov 06 '22 16:11

Brent Sandstrom