JavaScript系列之(8)处理表单数据

ZDNet软件频道 时间:2004-05-10 作者:Builder.com |  我要评论()
本文关键词:javatips
一旦你验证了用户已经输入有效的数据,那么就应该处理这些数据了。在JavaScript 中,处理表单数据相当容易。
本文译自Builder.com,未经许可请勿转载

一旦你验证了用户已经输入有效的数据,那么就应该处理这些数据了。在JavaScript 中,处理表单数据相当容易。

我们将利用下面的函数来计算总认养额:

functioncalcTotal()
  document.orderForm.totalPrice.value =
    (document.orderForm.numberOrdered.value
* 15.99);
}

简单吧,不是吗?calcTotal() 函数简单地取出用户在numberOrdered域所提供的数字,然后将其乘以15.99。

计算出来的总额,接着会打印在“Total sponsorship fee”框中。

当然,这里是用来调用该函数的HTML:

Number of brains you'd like to sponsor
<INPUT TYPE="text" NAME="numberOrdered"
VALUE="" SIZE=10
  onChange="if(this.value) {
    if (!(isANumber(this.value, 'number of
brains'))) {
      this.focus();
    } else {
      calcTotal();
    }
  }">

这将numberOrdered中输入的数发送到calcTotal() 进行处理,并假设其已经通过了isANumber() 检查。请注意,这个JavaScript 例子并不需要将数据送回服务器进行最后的处理。你可以运用类似的技术来创建任何类型的在线计算器、转换器、或是小测验。

注意在我们的脚本开始时,我们定义了orderPlaced(一个全局变量),并将其值初始化为“false”。

varorderPlaced = false;

如果用户在“number of brains”域输入了一个数字,那么我们将下面几行代码添加到isANumber() 函数中,从而把orderPlaced的值改为“true”:

这个变量的用法如下:

Total price
<INPUT TYPE="text" NAME="totalPrice" SIZE=10
  onChange="if (orderPlaced) {
    alert('Total fee is a calculated field.');
    calcTotal(this.value);
  }">

此处,如果用户在一个有效订单被受理之后(即orderPlaced已被设为“true”),又试图更改totalPrice域的值,那么就会弹出一个警告信息,告诉用户不可更动该域的值。另外,calcTotal() 函数也会被再次被调用,来恢复totalPrice域的值。


本文作者:Emily A. Vander Veer 是无数与 Internet 有关的杂志文章和书籍的作者,包括《JavaScript for Dummies》、《JavaScript for Dummies Quick Reference》和《JavaBeans for Dummies》,其所有著作都由 IDG Books 出版。


责任编辑:李宁

欢迎评论投稿

百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134