如何使多個表單更可靠？

我正在尋找一個整齊的解決方案爲多個窗體。如何使多個表單更可靠？

看一看例子截圖：

enter image description here

有三個網絡在下拉列表中，AT & T，Verizon無線和T-Mobile。

我已經從下拉列表中選擇'AT & T'，然後出現'銷售類型'收音機。 T-Mobile網絡可能有相同銷售類型爲'AT & T'網絡但有兩個額外的銷售類型。

來自所有銷售類型的大部分文本框都是相同的。例如：

消費者將有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來驗證它。

來源

2012-04-20 I' ll-Be-Back

爲什麼你有多個$（'。name'）。hide（）;調用嗎？一個調用會隱藏所有具有「name」類的元素 – 2012-04-20 14:18:02

http://jsfiddle.net/GvGoldmedal/hct4V/ – 2012-04-20 14:22:09

@MattMoore Like I每個銷售類型的大部分字段都是相同的，我不想隱藏所有字段，我正在尋找DRY原則解決方案，更多的字段和銷售類型可以在f uture。 – 2012-04-20 14:25:35

這裏的小提琴：http://jsfiddle.net/GvGoldmedal/FxEGP/

最好的辦法是創建下面的類標籤：

.ATT，.verizon。，.tmobile，.consumer，.business，.sim

然後您可以根據他們需要隱藏的時間標記字段。如果一個字段用於版本，那麼它會得到一個verizon類。如果一個領域是商務類型，那麼它將獲得商業類。還要將「隱藏」類添加到任何不總是顯示的字段。

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

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

確保標註每個字段。還要確保您的單選按鈕和選擇中的選項具有與類匹配的值。給你的選擇和單選按鈕一類的 '選項'，像這樣： ATT Verizon的 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-20 14:48:30

對我來說類似的想法，你只是花更多的精力來解釋它。我試圖準確地說明它，並失敗:(。 – 2012-04-20 14:54:40

呃這是一個很好的解釋。你確定了我的確切想法。看起來像唯一的方法來做到這一點與幹原則。 – 2012-04-20 14:57:03

這真的是個好主意，並且感謝你好！我很瞭解你的概念，有一個問題。讓我們在提交表單之後說出錯，然後返回/重定向回表單頁面，但你之前選擇的載體和銷售類型將被選中.. – 2012-04-20 15:07:22

隱藏所有僅顯示特定選項的字段，例如Business或sim free。

像這樣

<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-20 14:48:48

如何使多個表單更可靠？

回答

相關問題