1

3つのグループ（A、B、C）の一連の質問を含むHTMLフォームがあり、ユーザーはどちらのグループの質問にもしか回答できません。入力を検証して、1つのグループのすべての質問にのみ回答したことを確認するスクリプトがあります。

彼らが回答した質問のグループをキャプチャし、それを非表示の入力として送信したいと思います。私はこのような隠し入力を設定しました：

<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">
4

3 に答える 3

1

チェックされた入力の量が入力の数の半分であるかどうかをチェックすることによって、それらを生成できます。

$('tbody[class^=group]').each(function (i, val) {
  if ($('input:checked', val).length == $('input', val).length / 2) {
    console.log($(val).attr('class'));
  }
});
于 2012-11-30T01:18:26.900 に答える
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();
});​

<strong> 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、送信時に値が設定されていることを示すためだけに：

非表示フィールド値が設定されます

于 2012-11-30T02:05:32.613 に答える
0

読みやすくするためにいくつかの変更を提案できます。まず、「namesComaDelimited」は何をしますか？javascriptのjoinメソッドだけを使用することはできませんか？http://www.w3schools.com/jsref/jsref_join.asp

あなたの質問のために、これは触れられたセクションのクラスに与えます：

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

チェックされている入力に関する検証では、：checkedの長さと入力の長さを比較します。

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

ほんの少し、あなたはより多くの最適化を行うことができます

于 2012-11-30T01:24:22.277 に答える