javascript - Html 表单：基于客户端其他控件定义控件值的最简单方法

Question

单击提交按钮时，我想将年龄而不是出生年份从表单发送到服务器。实现它的最简单方法是什么？

<form action="process.php">
    <input type="text" name="yearBorn">
    <input type="hidden" name="Age">
    <input type="submit" >
</form>

Answer 1

这是您的选择，按我个人的喜好顺序排列。

服务器

在服务器上处理这个。我知道你不喜欢那个解决方案，但是如果使用禁用了 JavaScript 怎么办？唯一有意义的情况是当您不控制服务器时（例如提交到其他站点的页面）。

这也是一个安全风险。我可以很容易地发送一个虚假的 POST 说我的出生年份是 2042 年，我是 39,239 岁，由于某种原因，这可能会导致您的应用程序崩溃，特别是如果您尝试将其存储在 16 位有符号整数中。

MVC、MVVM 等

使用一些解决方案，让您定义数据和视图之间的链接。这是一个 KnockoutJS 示例，而有些人更喜欢 Backbone 或 AngularJS。

<input type="text" name="yearBorn" data-bind="value: yearBorn">
<input type="hidden" name="Age" data-bind="value: 2013 - parseInt(yearBorn())">

在更改处理程序中处理它（比 更可靠blur）。

$('input[name=yearBorn]').change(function(){
    $('input[name=Age]').val(2013 - parseInt($(this).val()));
});

也可以触发。

$('input[name=yearBorn]').val('1993').change(); // sets Age to 20

问他们的年龄

可能值得考虑，但这是您的应用程序。

Answer 2

"一个 Javascript/ jQuery解决方案，它不是基于从yearBorn"? 这是我能想出的唯一解决方案：

$('form').submit(function (e) {
    // Prevents the form from being submitted
    e.preventDefault();

    // Find outs the age
    var age = new Date().getFullYear() - $('input[name="yearBorn"]').val();

    // Submits the form through AJAX, so in server-side you can get the age
    $.ajax({
        type: 'POST',
        url: 'process.php',
        data: {'age': age},
        success: function (data) {
            // If successful, do your stuff here
        }
    });
});

Answer 3

建议的服务器端计算是否可以解决问题/您是否需要明确的 JavaScript 解决方案？

$age = $date("Y") - $_POST[yearBorn];

会做的伎俩。