使用Javascript更新HTML表单中的隐藏输入

Question

我有一个HTML表单，其中包含3组（A，B和C）中的一系列问题，用户只能回答任一组的问题。我有一个脚本验证他们的输入，以检查他们是否只回答了一个组中的所有问题。

我想捕捉他们回答的哪组问题，并将其作为隐藏输入发送。我设置一个隐藏的输入是这样的：

<input type="hidden" name="type" value="" id="type"> 

和理想，我想替换这个上提交枝条一样的东西：

<input type="hidden" name="type" value="groupA" id="type"> 

我设置显示窗体/脚本小提琴：

http://jsfiddle.net/fmdataweb/CGp8X/

，这里是我当前的验证脚本：

$('#editRecord').on('submit', validate); 
$('input.sectionclear').on('click', function() { 
    $(this).next().find('input').attr('checked', false); 
}); 
function validate(ev) { 
    var sectionsTouched = $('tbody').has(':checked'), 
     inputs = {}, 
     errorMessage = ''; 

    if (sectionsTouched.length === 0) { 
     errorMessage = 'Please check something before submitting.'; 
    } else if (sectionsTouched.length > 1) { 
     errorMessage = 'Please complete A or B or C only'; 
    } else { 
     sectionsTouched.find('input').each(function(i, e) { 
      var me = $(e), name = me.attr('name'); 
      inputs[name] = !!inputs[name] || me.is(':checked'); 
     }); 
     $.each(inputs, function(k, v) { 
      if (!v) { 
       errorMessage = 'It appears you have not completed all questions.'; 
      } 
      return v; 
     });    
    } 
    if (errorMessage !== '') { 
     $('#error').html(errorMessage); 
     ev.preventDefault(); 
     return false; 
    } 
    return true; 
} 


function seriesNames() { 
    var names = []; 
    $('h3').each(function(i, e) { 
     names.push($(e).text()); 
    }); 
    return names; 
} 

function namesCommaDelimited(namesArr, conjunction) { 
    var retval = '', i, l = namesArr.length - 1, delimiter = ''; 
    if (l === 0) { 
     return retval; 
    } 
    for (i = 0; i < l; i += 1) { 
     retval += delimiter; 
     retval += namesArr[i]; 
     delimiter = ', '; 
    } 
    retval += delimiter; 
    retval += conjunction; 
    retval += ' '; 
    retval += namesArr[l]; 
    return retval; 
} 
​ 

是否可以通过某种方式扩展它以捕获他们回答的哪组问题？ HTML表格有3个标签来标识每个组：

<tbody class="groupA"> 

Answer 1

我希望你不会嫁给你的代码:)

这是有点难以遵循，所以我只是匆匆一个原型，希望你可以遵循，并应允许你做你正在寻找的东西：限制对特定形式的答案。我还进行了一些简单的验证，以确保表格完全填写，并在表单无效时切换按钮。现在的代码：

HTML

<h2>Table A</h2> 
<table id="tableA" border="1"> 
    <tr> 
     <td> 
      A1 
     </td> 
     <td> 
      <input type="radio" name="a1" value="1" /> Yes 
      <input type="radio" name="a1" value="0" /> No 
     </td> 
    </tr> 
    <tr> 
     <td> 
      A2 
     </td> 
     <td> 
      <input type="radio" name="a2" value="1" /> Yes 
      <input type="radio" name="a2" value="0" /> No 
     </td> 
    </tr> 
    <tr> 
     <td> 
      A3 
     </td> 
     <td> 
      <input type="radio" name="a3" value="1" /> Yes 
      <input type="radio" name="a3" value="0" /> No 
     </td> 
    </tr> 
</table> 

<h2>Table B</h2> 
<table id="tableB" border="1"> 
    <tr> 
     <td> 
      B1 
     </td> 
     <td> 
      <input type="radio" name="b1" value="1" /> Yes 
      <input type="radio" name="b1" value="0" /> No 
     </td> 
    </tr> 
    <tr> 
     <td> 
      B2 
     </td> 
     <td> 
      <input type="radio" name="b2" value="1" /> Yes 
      <input type="radio" name="b2" value="0" /> No 
     </td> 
    </tr> 
    <tr> 
     <td> 
      B3 
     </td> 
     <td> 
      <input type="radio" name="b3" value="1" /> Yes 
      <input type="radio" name="b3" value="0" /> No 
     </td> 
    </tr> 
</table> 

<p> 
    <button id="submit">Submit</button> 
    <button id="reset">Reset</button> 
</p> 

<input type="hidden" id="activeTable" /> 

JS

window.ns = {}; 
ns.activeTable = null; 
ns.validate = function() { 
    // Simple validation 
    // If we don't have 3 checked radio buttons, it is invalid 
    var checked = $("#" + ns.activeTable).find("input[type=radio]:checked"); 
    var valid = (checked || []).length === 3; 
    $("#submit").prop("disabled", !valid); 
    return valid; 
}; 

ns.validate(); 

$("#submit").click(function() { 
    var valid = ns.validate; 
    if (valid == false) { 
     alert("You must complete the form!"); 
     return; 
    } 

    var results = $("#" + ns.activeTable).find("input[type=radio]:checked"); 
    var output = ns.activeTable + " Results\n"; 
    $.each(results, function(idx, data) { 
     output += "\t" + $(this).prop("name") + 
      " - " + $(this).val() + "\n"; 
    }); 
    alert(output); 
    $("#activeTable").val(ns.activeTable); 
}); 

$("#reset").click(function() { 
    $("input[type=radio]").prop("checked", false); 
    ns.activeTable = null; 
    ns.validate(); 
}); 

$("input[type=radio]").click(function() { 
    var selectedTable = $(this).closest("table"); 
    if (ns.activeTable != null && 
     selectedTable.prop("id") != ns.activeTable) { 
     alert("Invalid form selection. Onlye selections from " + 
       ns.activeTable + " are allowed"); 
     $(this).prop("checked", false); 
    } else { 
     ns.activeTable = selectedTable.prop("id"); 
    } 
    ns.validate(); 
});​ 

CSS

不需要，只是想使它看起来不错:)

html { margin: 10px; } 
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } 
table td { border: 3px solid #CCC; padding: 5px; } 
table td:nth-child(1) { width: 75%; } 
table td:nth-child(2) { text-align: center; } 
h2 { font-size: 1.8em; font-weight; bold } 
button { padding: 5px; border-radius: 15px; background-color: #CCC; 
     width: 100px; }​ 

最后，看到它的行动：jsFiddle

我使用的表ID，以确定哪个形式是“有效的”，并存储该值。这是我可以限制用户必须使用的形式。

验证很简单：它只是确保为当前表单检查3个复选框。这适用于该示例，但除非每个表单的问题数量相同，否则您希望更强大一些。

验证还控制何时启用提交按钮。还有一个清除单选按钮值的重置按钮，以便您可以再次尝试。

希望这证明是有用如果不是这样，我还是很开心:)

编辑

男孩，我是一个涂料。我完全没有把隐藏的领域，并设置值这是问的问题！这个“疏漏”已被纠正。 Aslo，只是为了表明提交时的价值：

Answer 2

您可以通过检查检查的输入数量是输入数量的一半来生成它们。

$('tbody[class^=group]').each(function (i, val) { 
    if ($('input:checked', val).length == $('input', val).length/2) { 
    console.log($(val).attr('class')); 
    } 
}); 

Answer 3

我可以建议一些更改，使其更具可读性，首先，“namesComaDelimited”是做什么的？你不能只使用JavaScript的连接方法吗？ http://www.w3schools.com/jsref/jsref_join.asp

你的问题，这给该类别的部分的感动：

$(sectionsTouched[0]).attr('class') 

约正在检查我只是比较输入验证：检查长对输入长度

sectionTouched = $(sectionsTouched[0]); 
if (sectionTouched.find('input').length/2 != sectionTouched.find('input:checked')) { 
    errorMessage = 'It appears you have not completed all questions.'; 
} 

短短，你可以做更多的优化