javascript - 使用 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">

我已经设置了一个显示表单/脚本的 fiddle :

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

我希望你没有和你的代码结婚:)

这有点难理解，所以我只是快速制作了一个原型(prototype)，希望您能理解它，并且应该允许您做您正在寻找的事情:将答案限制为特定形式。我还进行了一些简单的验证，以确保表单填写完整，如果表单无效，则关闭按钮。现在是代码:

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 个复选框。这适用于该示例，但除非每个表单的问题数量相同，否则您需要更强大的东西。

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

希望这被证明是有用的如果没有，我仍然很开心:)

编辑

天哪，我是不是个傻逼。我完全没有放入隐藏字段并设置值这是被问到的问题!这个“疏忽”已得到纠正。另外，只是为了表明该值是在提交时设置的: