如何使多个表单更可靠？

我正在寻找一个整齐的解决方案为多个窗体。如何使多个表单更可靠？

看一看例子截图：

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

如何使多个表单更可靠？

回答

相关问题