引导程序输入字段和下拉按钮提交 [英] bootstrap input field and dropdown button submit

问题描述

目标：要有一个可输入值的输入框，那么在该输入框的右侧是一个引导下拉按钮，他们可以选择存储名称，城市，州或邮编。

他们会输入姓名（比如沃尔玛），然后选择店名。当他们选择商店名称时，它会提交表单并发送两个要由php处理的发布值：

搜索词|搜索类型

以下是我对该按钮的代码：

 < form name =searchFormid =searchFormmethod =POST/> 
< div class =input-append> 
< input class =span2id =attachedInputButtontype =text> 
< div class =btn-group> 
< button class =btn dropdown-toggledata-toggle =dropdown> 
动作
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu> 
< li>搜索商店名称< / li> 
< li>搜寻城市< / li> 
< li>搜寻状态< / li> 
< li>搜寻邮递区号< / li> 
< / ul> 
< / div> 
< / div> 
< / form> 
  

解决方案

 < form name =searchFormid =searchFormmethod =POST/> 
< div class =input-append> 
< input class =span2id =attachedInputButtonname =search_termtype =text> 
< input class =span2id =search_typename =search_typetype =hidden> 
< div class =btn-group> 
< button class =btn dropdown-toggledata-toggle =dropdown> 
动作
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu> 
< li onclick =$（'＃search_type'）。val（'store'）; $（'＃searchForm'）。submit（）>搜索商店名称< / li> 
 onclick =$（'＃search_type'）。val（'city'）; $（'＃searchForm'）。submit（）>搜索城市< / li> 
 onclick =$（'＃search_type'）。val（'state'）; $（'＃searchForm'）。submit（）>搜索状态< / li> $（'＃search_type'）。val（'zip'）; $（'＃searchForm'）。submit（）>搜索邮编< / li> 
< / ul> 
< / div> 
< / div> 
< / form> 
  

$ _ POST ['search_term'] will是输入的文本， $ _ POST ['search_type'] 将是 store 中的一个， city ， state 或 zip 。

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>

解决方案

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

这篇关于引导程序输入字段和下拉按钮提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！