2.12 如何使用隐藏控件

在HTML表单<form>中还可以定义一类隐藏控件（type=hidden），这类控件在页面中是不显示（隐藏）的，但可以实现一些比较特殊的功能。下面介绍一个通过使用隐藏表单控件实现根据用户年龄自动分配卧铺铺位的代码实例。

关于【代码2-12】的说明：

● 第14～33行代码定义了一个表单，其中action属性定义了表单提交的服务器端地址（PHP文件）。

● 第24行代码定义了一个日期类型的文本框，用于输入用户出生年月；同时，还定义了onchange事件处理方法（on_birth_change()），当用户选择好日期（日期数据发生改变）后会被触发。

● 第25行代码定义了一个隐藏文本框控件（<input type="hidden"/>），用于保存根据用户出生年月计算得出的年龄等级（具体内容见下面的js代码）。

● 第36～63行代码是“on_birth_change()”方法的实现，具体就是根据第24行代码用户选择的出生年月信息和当前的年月信息计算出用户的年龄；如果年龄大于60岁（含60岁）则自动分配下铺（通过定义level=1实现），如果年龄年龄介于45～60岁之间则自动分配中铺（通过定义level=2实现），而如果年龄小于45岁则自动分配上铺（通过定义level=3实现）；第62行代码则将level等级数值保存在第25行代码定义的隐藏文本框中（相当于保存在全局变量中）。表单在提交到服务器端后，服务器端PHP文件会根据第25行代码定义的隐藏文本框控件中储存的level数值获取到用户的年龄等级并自动分配卧铺铺位。

下面使用Chrome浏览器运行测试该HTML网页，具体效果如图2.13所示。

图2.13 JavaScript使用隐藏控件的方法