Thursday 15 July 2010

forms - bootstrap input field and dropdown button submit -


Target: An input box where a value can be typed, there is a bootstrap dropdown on the right side of that input box Button where they can select "Store Name, City, State or Zip"

They will type the name (say Walmart) and then select the store name. When they choose the store name, this form will submit and send two post values ​​to be handled by the PP:

search terms | Search Type

Here's the code for the button:

   & Lt; Div class = "input-append" & gt; & Lt; Input class = "span2" id = "appendedInputButton" type = "text" & gt; & Lt; Div class = "btn-group" & gt; & Lt; Button class = "BTN dropdown-toggle" data-toggle = "dropdown" & gt; Action & lt; Span class = "caret" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Ul class = "dropdown menu" & gt; & Lt; Li & gt; Search store name & lt; / Li & gt; & Lt; Li & gt; Search City & lt; / Li & gt; & Lt; Li & gt; Search State & lt; / Li & gt; & Lt; Li & gt; Find ZIP code & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt;    

  & lt; Name of the form = "Search form" id = "searchForm" method = "post" /> & Lt; Div class = "input-append" & gt; & Lt; Input class = "span2" id = "appendedInputButton" name = "search_term" type = "text" & gt; & Lt; Input class = "span2" id = "search_type" name = "search_type" type = "hidden" & gt; & Lt; Div class = "btn-group" & gt; & Lt; Button class = "BTN dropdown-toggle" data-toggle = "dropdown" & gt; Action & lt; Span class = "caret" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Ul class = "dropdown menu" & gt; & Lt; Li onclick = "$ ('# search_type') Val ('store'); $ ('# searchForm') Submit ()" & gt; Find the store name & lt; / Li & gt; & Lt; Li onclick = "$ ('# search_type'). Val ('city'); $ ('#searchform'). Submit ()" & gt; Search City & lt; / Li & gt; & Lt; Li onclick = "$ ('# search_type'). Val ('state'); $ ('# searchForm'). Submit ()" & gt; Search State & lt; / Li & gt; & Lt; Li onclick = "$ ('# search_type'). Val ('zip'); $ ('# searchForm') Submit ()" & gt; Find ZIP code & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt;   

$ _ POST ['search_term'] entered text and $ _ POST ['search_type'] will Store , city , state , or zip .

No comments:

Post a Comment