複数フォームの信頼性を高める方法

Question

私は複数のフォームのためのきちんとしたソリューションを探しています。

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

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

ドロップダウンリストから「AT & T」を選択した後、「販売タイプ」ラジオが表示されます。 Tモバイルネットワークは、と同じセールタイプを 'AT & T'ネットワークであるが2つのエキストラセールタイプとすることができる。

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

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

このようなDRY原則は、どのような優れたソリューションを実装していますか？

私は多くの$（ '。名前'）の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で検証します。ここで

Answer 1

はフィドルです：

.ATT、.verizon：http://jsfiddle.net/GvGoldmedal/FxEGP/

あなたの最善の策は、以下のクラスのタグを作成することです。 、.tmobile、.consumer、.business、.sim

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

すべてのフィールドに必ずラベルを付けてください。また、ラジオボタンと選択したオプションにクラスに合った値が設定されていることを確認してください。

//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(); 
     }  
    }); 
}); 

：jqueryのための今

上 ATT ベライゾン Discovery Channnelの

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

...など：そして、そうのように、あなたの選択ラジオボタン 'オプション' のクラスを与えます

ありがとうございます。新しいオプションが選択されるたびに、フォームの一部ではないフィールドはすべて非表示になり、キャリアと販売タイプに一致するフィールドが表示されます。それはすぐに起こり、ユーザーは違うことを伝えることができません。あなたが望むなら、それはより滑らかに見えるようにいくつかの退色を行うことができます。また、フィールドがverizonとattの両方に表示されている場合は、両方のクラスをその入力に追加するだけです。ご質問がある場合はお知らせください。

私はそれを行う方法を正確に示すフィドルを取得しようとします。

Answer 2

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

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

同様

私はそれだけでなく、これを説明していないことを確認。そのオプションは、あなたが、各販売のタイプに固有のものだけで入力を示す、すべてを隠していない

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

この方法を選択される場合:(

は、それからちょうどビジネスのものを表示するためにjqueryのを使用