Question

我不太确定如何命名这个主题来解决我的问题，所以我很抱歉，如果它有点像一个重复的问题，但这topic并不是我想要的。

我无法找到一种方法来创建一个动态表单，该表单在选项标签上发生更改，而不会有通过POST发送的空白或未定义字段。换句话说，无论如何我可以动态更改字段，以便我不必通过javascript中的.hide（）发送隐藏的空白字段吗？我在这里设置了一个jsfiddle可能的场景，我可能会遇到不同选项中的类似字段，但在另一个选项中也会遇到完全不同的字段。

http://jsfiddle.net/boyilus/c0bdx8xL/

这是我选择的一个例子，但并不是我想做的事情:( jsfiddle中的完整版）

$('#companies').change(function(){
   selection = $(this).val();    
   switch(selection)
   { 
       case 'Microsoft':
           $('#microsoftType').show();
            $('#appleType').hide();
            $('#googleType').hide();
            $('#otherType').hide();     
           break;
       ......
       ......
    }
 });

感谢所有的帮助！提前谢谢你！

Answer 1

试试这个：

$('#companies').change(function(){
  selection = $(this).val();
  switch(selection) { 
    case 'Microsoft':
      $('#microsoftType').show().find('input, select, textarea').prop('disabled', false);
      $('#appleType, #googleType, #otherType').hide().find('input, select, textarea').prop('disabled', true);
      break;
   ......
   ......
  }
});

这利用了以下事实：一旦提交表单，禁用的字段就不会发送到服务器。您可以重构上面的代码并使其更好，但这就是您如何做到这一点的想法。

Answer 2

您可以使用disabled或disabled="disabled"属性标记表单中的其他字段。来自这些控件的数据将不会在请求中发送。如下所示：

switch(selection)
{ 
   case 'Microsoft':
       $('#microsoftType').show();
       $("#microsoftType input, #microsoftType textarea").removeAttr('disabled');
       $('#appleType').hide();
       $("#appleType input, #appleType textarea").attr('disabled', 'disabled');
       $('#googleType').hide();
       $("#googleType input, #googleType textarea").attr('disabled', 'disabled');
       $('#otherType').hide();
       $("#otherType input, #otherType textarea").attr('disabled', 'disabled');
           break;
       ......
       ......
}

当然，将这些hide/attr和show/removeAttr移动到单独的函数会很不错。希望它有所帮助。

根据选项标签创建不同的表单

2 个答案: