如何選擇使用哪種搜索表單？

我想做一個選擇框從一個搜索表單切換到另一個，但我對HTML表單很沒有經驗。如何選擇使用哪種搜索表單？

這兩個選項應該是「Blog」和「Shop」。（FYI博客的一個WordPress的和Opencart的店鋪之一。）

WordPress的搜索網址是：？/ S = TEST 對於Opencart的：？/店/路由=產品/搜索& FILTER_NAME = TEST

這是兩種形式至今：

<form method="get" id="blogsform" class="form-search" action="/"> 
<input type="search" name="s" id="s" placeholder="Blog durchsuchen ..."> 
<input type="submit" class="submit" id="searchsubmit" value="Durchsuchen"> 
</form> 

<form method="get" id="shopsform" class="form-search" action="/shop/"> 
<input type="hidden" name="route" value="product/search"> 
<input type="search" name="filter_name" placeholder="Shop durchsuchen ..."> 
<input type="submit" class="submit" id="searchsubmit" value="Durchsuchen"> 
</form>

預先感謝您的幫助，馬庫斯

來源

2012-04-11 reitermarkus

你如何定義「從一個搜索表單切換到另一個」？一個是隱藏的，另一個是基於您的選擇框選擇的？ – mellamokb 2012-04-11 17:11:55

對不起，沒有真正想過這個。它實際上應該是相同的形式，但是具有其他行爲/價值。就像那樣：搜索[Blog/Shop]：[searchfield] [searchbutton] – reitermarkus 2012-04-11 17:17:30

您是否有能力在項目中使用jQuery等JavaScript庫？ – mellamokb 2012-04-11 17:18:55

使用jQuery，這些都是在應用簡單的變化事件選擇框：

<select id="chooseform"> 
    <option value="">Select Form...</option> 
    <option value="Blog">Blog</option> 
    <option value="Shops">Shops</option> 
</select>

如果你想有兩種形式，並顯示/隱藏基於所選的每一個形式，你可以做這樣的事情：

$('#chooseform').change(function() { 
    var choice = $(this).val(); 
    if (choice == "Blog") 
    { 
     $('#blogsform').show(); 
     $('#shopsform').hide(); 
    } 
    else if (choice == "Shops") 
    { 
     $('#blogsform').hide(); 
     $('#shopsform').show(); 
    } 
    else 
    { 
     $('#blogsform').hide(); 
     $('#shopsform').hide(); 
    } 
});

演示：http://jsfiddle.net/Pf9QQ/

如果你想有一個單一的形式，但更改操作/方法和顯示屬性動態地根據選擇的形式，你可以做這樣的事情：

$('#chooseform').change(function() { 
    var choice = $(this).val(); 
    if (choice == "Blog") 
    { 
     $('#theform').attr('action', '/'); 
     $('#s').attr('name', 's'); 
     $('#s').attr('placeholder', 'Blog durchsuchen ...'); 
     $('#theform').show(); 
    } 
    else if (choice == "Shops") 
    { 
     $('#theform').attr('action', '/shop/'); 
     $('#s').attr('name', 'filter_name'); 
     $('#s').attr('placeholder', 'Shop durchsuchen ...'); 
     $('#theform').show(); 
    } 
    else 
    { 
     $('#theform').hide(); 
    } 
});

演示：http://jsfiddle.net/JgLSE/

您選擇哪種方法取決於哪種方式更容易維護。如果您的表格只有很小的差異，您可以使用第二種方法。如果表單非常不同，我將只保留兩個單獨的整個表單，並根據用戶的選擇適當地顯示/隱藏它們，因爲這樣會更容易混淆或複雜。

來源

2012-04-11 17:38:10 mellamokb

好的，謝謝你，但是你忘了名字=「route」和value =「product/search」。你會建議解決這個問題的第一個方法嗎？ – reitermarkus 2012-04-11 17:44:31

如果沒有理由需要組合表單，並且保持兩者都可以，我肯定會使用第一個解決方案，因爲它更乾淨。至於'name ='route''，我特意將它留在那裏，假設'blogsform'會忽略無關字段，但是您可以在技術上動態地添加/刪除輸入字段。 – mellamokb 2012-04-11 17:49:51

謝謝，它在jsFiddle中工作，但不在實際的網站上。可能是cloudflare縮小問題。 – reitermarkus 2012-04-11 18:17:40

如何選擇使用哪種搜索表單？

回答

相關問題