0

私は複数のフォームのためのきちんとした解決策を探しています。

スクリーンショットの例を見てください。

ここに画像の説明を入力してください

ドロップダウンには、AT＆T、Verizon Wireless、T-Mobileの3つのネットワークがあります。

ドロップダウンリストから「AT＆T」を選択すると、「SaleType」ラジオが表示されます。T-Mobileネットワークには、「AT＆T」ネットワークと同じ販売タイプがありますが、2つの追加の販売タイプがあります。

すべての販売タイプのテキストボックスの大部分は同じです。例えば：

消費者には20のフィールドがあり、ビジネスには27のフィールド（追加フィールド）があります。Sim-Onlyのフィールドは少なくなります-15フィールド（いくつかの削除されたフィールドと新しいフィールド）。

このようなDRYの原則のような優れたソリューションの実装は何ですか？

私はたくさんの$（'。name'）。hide（）;でjQueryを使用しました。$（'。name'）。hide（）; しかし、それは本当に厄介になります。例：

$(".at&t_consumer_radio").click(function(){
       showSaleType("at&t_consumer");
});

function showSaleType(type) {
        if (type == "at&t_consumer") { 
          $('.name').hide(); 
          $('.name').hide(); and so on..
     } 
}

フォームに記入するときは、PHPを使用してフォームを検証します。

4

2 に答える 2

1

これがフィドルです：http：//jsfiddle.net/GvGoldmedal/FxEGP/

最善の策は、次のクラスタグを作成することです。

.att、.verizon。、.tmobile、.consumer、.business、.sim

次に、フィールドを非表示にする必要がある時期に基づいてフィールドにタグを付けることができます。フィールドがverisonに使用される場合、verizonクラスを取得します。フィールドがビジネスタイプの場合、ビジネスクラスを取得します。また、常に表示されていないフィールドに「hide」クラスを追加します。

Some Field:
<input type="text" class=" hide verizon att consumer" />

Another Field
<input type="text" class = " hide att business" />

必ずすべてのフィールドにラベルを付けてください。また、ラジオボタンと選択したオプションの値がクラスと一致していることを確認してください。そして、次のように、選択ボタンとラジオボタンに「オプション」のクラスを指定します。attverizon tmobile 

<input type='radio' name='sale_type' class='option' value="business" />
<input type='radio' name='sale_type' class='option' value="consumer" />
<input type='radio' name='sale_type' class='option' value="consumer" />

.. 等々

Jqueryの場合：

//selectId is the ID of your select 
// myform is the id of your form



$(".option").change(function()
{   
     // get the value of our select and option
     carrier =  $('#selectId option:selected').val();
     sale_type = $('input[name=sale_type]:checked').val();

    // Hide all fields that don't always show up.
     $(".hide").hide();

    //Show all fields that match our carrier and sale type

    $(".hide").each(function(){
        if($(this).hasClass(carrier) && $(this).hasClass(sale_type))
        {            
            $(this).show();
        }    
    });
});

そこにあります。新しいオプションを選択すると、常にフォームに含まれていないすべてのフィールドが非表示になり、携帯通信会社と販売タイプに一致するフィールドが表示されます。それはほとんどすぐに起こり、ユーザーは違いを見分けることができなくなります。必要に応じて、フェードを実行して、より滑らかに見えるようにすることができます。また、verizonとattの両方でフィールドが表示されている場合は、その入力に両方のクラスを追加するだけです。ご不明な点がございましたら、お気軽にお問い合わせください。

私はそれを行う方法を正確に示すフィドルを試してみます。

于 2012-04-20T14:48:30.890 に答える
1

ビジネスやSIMフリーなどの特定の選択肢に対してのみ表示されるすべてのフィールドを非表示にします。

そのようです

<input type="text" class="standard" />
<input type="text" class="business" style="display:none" />
<input type="text" class="simOnly" style="display:none" />
<input type="text" class="standard" />
<input type="text" class="business simOnly" style="display:none" />

これをうまく説明しているのかわかりません。:(

次に、jqueryを使用して、そのオプションが選択されている場合はビジネスのものだけを表示します

$("#businessRadio").click(function(){          
    $('.business').show();   
});

このように、すべてを表示および非表示にするのではなく、各販売タイプに固有の入力のみを表示します。

于 2012-04-20T14:48:48.470 に答える