Html表单:基于客户端上的其他控件来定义控件值的最简单方法

Html form: easiest way to define value of control based on other controls on client side

本文关键字：控件 定义 最简单 方法 表单 其他 客户端 Html      更新时间：2023-09-26

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

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

以下是您的选项，按我个人的喜好排序。

服务器

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

这也是一个安全风险。我可以很容易地发送一个虚假的POST，说我的出生年份是2042，我今年39239岁，出于某种原因，这可能会导致你的应用程序崩溃，尤其是如果你试图将其存储在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

询问他们的年龄

也许值得考虑，但这是你的应用程序。

"不是基于从yearBorn捕获事件的Javascript/jQuery解决方案"？这是我唯一能想到的解决方案：

$('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
        }
    });
});

服务器端计算是否能解决问题/是否需要一个明确的JavaScript解决方案？

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

会成功的。

相关文章：