使用する検索フォームを選択するにはどうすればよいですか？

Question

一つのsearchformから別のsearchformに切り替えるために選択ボックスを作ろうとしていますが、HTMLフォームでは非常に不慣れです。

「ブログ」と「ショップ」の2つのオプションがあります。 （FYI WordPressのブログ1とOpencartためのショップ1。）

検索のURLは次のようになりWordPress用：？/ S = TEST Opencartの場合：？/ショップ/ルート=製品/検索& FILTER_NAME = TEST

これらは、これまでの2つの形態である：あなたの助けを事前に

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

おかげで、jQueryを使って マルクス

Answer 1

、これらはに適用される簡単な変更です選択ボックスのイベント：

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

---

次の2つのフォームを持ちたい、とショー/選択に基づいて各フォームを非表示にした場合、あなたはこのような何かがあります

$('#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/

---

あなたが選択した方法は、保守が容易である方法によって異なります。多少の小さな違いしかない大きなフォームがある場合は、2番目の方法を使用できます。フォームが非常に異なる場合は、2つの別々のフォーム全体を保持し、ユーザーの選択に基づいて適切に表示/非表示することができます。なぜなら、それはあまり混乱しないか複雑になるからです。