1

ある検索フォームから別の検索フォームに切り替えるための選択ボックスを作成しようとしていますが、HTML フォームの経験があまりありません。

2 つのオプションは、「ブログ」と「ショップ」である必要があります。（参考までに、ブログはWordpress用、ショップはOpencart用です。）

Wordpress の場合、検索 URL は次のようになります: /?s=TEST Opencart の場合: /shop/?route=product/search&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>

よろしくお願いします、マーカス

4

1 に答える 1

2

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

<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 つの個別のフォーム全体を維持し、ユーザーの選択に基づいて適切に表示/非表示にします。これにより、混乱や複雑さが軽減されます。

于 2012-04-11T17:38:10.910 に答える