一旦你验证了用户已经输入有效的数据,那么就应该处理这些数据了。在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域的值。