9.1.2　获取和设置表单元素的值

有时候，我们需要查看表单元素的值。例如，我们可能想要查看一个文本字段，以确保其中输入的是一个E-mail地址。或者，我们可能想要确定一个字段值来计算订单的总额。另外，可能想要设置表单元素的值。例如，假设有一个要求有账单信息和配送信息的订单表单。给访问者一个“Same as billing”的复选框，并且使得配送信息自动使用账单字段的信息来填充。

jQuery提供了一个简单的函数来完成这两项任务。val（）既可以设置表单字段的值，也可以读取表单字段的值。如果调用这个函数而不传递任何参数，它读取字段的值；如果给该函数传递一个值，它设置表单字段的值。例如，假设有一个字段收集用户的E-mail地址，其ID为email。可以像下面这样获取该字段的内容：

var fieldValue=$（'#email'）. val（）；

可以直接传递一个值给val（）函数，从而设置字段的值。例如，假设有一个表单用于订购产品，并且想要根据访问者指定的数量来计算一笔销售的总金额（如图9-2所示）。可以获取访问者提供的数量，将其和产品的价格相乘，然后用这个值设置总金额字段。

图9-2所示的表单获取数量并设置表单的总金额字段的代码如下：

1 var unitCost=9.95；

2 var amount=$（'#quantity'）.val（）；//get value

3 var total=amount*unitCost；

4 total=total.toFixed（2）；

5$（'#total'）.val（total）；//set value

第1行代码创建了一个变量，其中存储了产品的价格。第2行代码创建了另一个变量，获取了访问者在ID为quantity的字段中输入的数量。第3行代码通过把订购数量和单价相乘得到了总金额，第4行代码把结果格式化为包含两位小数的格式（参见14.3.4节对toFixed（）方法的介绍）。最后，第5行把ID为total的字段的值设置为总金额（将在本书9.1.4节学习如何触发这些代码）。

图　9-2　jQuery使得我们很容易获取表单字段的值和设置表单字段的值