自舉輸入字段和下拉按鈕提交

目標：要有一個可輸入值的輸入框，那麼在該輸入框的右側是一個引導下拉按鈕，他們可以在其中選擇「存儲名稱，城市，州或郵編」。自舉輸入字段和下拉按鈕提交

他們會輸入姓名（比如沃爾瑪），然後選擇店名。當他們選擇商店名稱時，它會提交表單併發送兩個後處理值由php處理：

搜索條件|搜索類型

這裏是我對按鈕的代碼：

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

來源

2013-03-26 John

<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']將輸入的文本和$_POST['search_type']將是store之一，city，state，或zip。

來源

2013-03-26 23:14:15 MichaelRushton

這是一個美妙的解決方案。非常感謝。奇怪的Bootstrap如何使用輸入/下拉提交按鈕，但找到一個解決方案來捕獲值是非常困難的。謝謝邁克爾。噢，對於我來說，至少我用這個解決方案失去了懸停效果（對比超鏈接列表元素，我將它添加到了我的實現中，否則，完全按照您的寫法進行操作Big thx。 – 2014-10-21 05:38:47

對於純HTML和CSS的解決方案，試試這個：

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

來源

2015-10-01 15:16:48

更改' .dropdown'到'dropdown-menu'也會影響到這個類。好的解決方法謝謝加載 – djack109 2017-07-14 09:24:12

自舉輸入字段和下拉按鈕提交

回答

相關問題