0

私は登録ページを設定し、onChange イベントによってAJAX メソッドを使用して jQuery 年齢チェックを実行するためのクリーンなソリューションを探しています。私は単純なフォームを持っています（短縮）：

<form action="" id="birthday_form" name="birthday">
    <select name="field_4_1">
    <option value="0">[ DAY ]</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="field_4_2">
    <option value="0">[ MONTH ]</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    </select>
    <select name="field_4_3">
    <option value="0">[ YEAR ]</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    </select>

<div id="result_of_age"></div>

<input type="submit" name="submit_birthday" value="Send" />

</form>

フォームを送信するときに jQuery.ajax() + "serialize" を使用して準備された DIV に結果を取得する方法を知っていますが、3 つの選択フィールドすべてが設定されるとすぐに結果を表示するソリューションを探しています。可能だと思いますが、これを解決するための最良の解決策はどれですか？

何か案は？

よろしくお願いします。

4

2 に答える 2

0 
$('select', '#birthday_form').on('change', function() {
    var day  = $('[name="field_4_1"]').val(),
        month  = $('[name="field_4_2"]').val(),
        year = $('[name="field_4_3"]').val(),
        age = 18,
        birthdate = new Date(),
        currdate = new Date();

    if (day!='0'&&month!='0'&&year!='0') {
        birthdate.setFullYear(year, month-1, day);
        currdate.setFullYear(currdate.getFullYear() - age);

        if ((currdate - birthdate) < 0){
            $('#result_of_age').text('You are not old enough to join');
            this.form.onsubmit = function() { return false; }
        }else{
            $('#result_of_age').text('You are old enough to join');
            this.form.onsubmit = function() { return true; }                
        }
    }
});

フィドル </p>

于 2012-10-28T03:14:12.703 に答える
0

select に data-* 属性を追加して、ready ステータスを追跡できます。選択が行われたら、true に設定し、他の選択のステータスを確認します。3 つ目が設定され、3 つすべてが true の場合は、呼び出しを行います。基本的には、鍵をかけたタンブラーのようなものです。

$(this).attr('data-ready', 'true'); // in onChange handler

function IsFormReady() {
  If ($('selOneId').attr('data-ready')==='true' && //same with other 2 selects){
    YourAjaxCall();
  }
}
于 2012-10-28T03:06:30.417 に答える