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

您可以向选择添加 data-* 属性以跟踪它们的就绪状态。进行选择时，设置为 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 回答
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 回答