使用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.'; 
} 

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