bootstrap input field and dropdown button submit

Question

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>

Michael · Accepted Answer · 2013-03-26 23:14:15Z

27

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

answered Mar 26, 2013 at 23:14

Michael

12.9k6 gold badges57 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Randy Greencorn Over a year ago

This is a wonderful solution. Thanks so much. Weird how Bootstrap uses input / dropdown submit buttons, but finding a solution to capture the value is so difficult. Thanks Michael. Oh, also... for me at least, I lost the hover-over effect with this solution (vs. hyperlinking the list elements. I added this to my implementation. Otherwise, did exactly as you wrote. Big thx.

Brent Sandstrom · Accepted Answer · 2015-10-01 15:16:48Z

6

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

answered Oct 1, 2015 at 15:16

Brent Sandstrom

83911 silver badges16 bronze badges

1 Comment

djack109 Over a year ago

change .dropdown to dropdown-menu to affect that class too. nice solution thanks loads

Collectives™ on Stack Overflow

bootstrap input field and dropdown button submit

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related