用Javascript制作会计算的表单

我们在制作定购单时,往往要计算客户定购物品的货款,HTML并没有提供这种在线计算的功能,但我们用Javascript程序可以实现这种在线汇总计算的功能。当然一个完整的定货单可能涉及许多表单标记,如何获取各表单标记的value值是解决问题的关键。本例的方法将告诉你如何去获得各表单元素的value值,并加以计算。你看下面这张定货单,它虽涉及多种表单元素(如单选框、复选框、单行文本框等等),但你可以随意选取物品,只要一按“计算货款”按钮,立即计算好全部货款,分毫不差。满意吧!


制作方法:

1、制作一个定货单, 用表单元素制作定货单在这里不细讲了,若你不会做的话,请去看看《》专题的有关文章。但在制作这种要用程序进行计算的表单有两点要注意:

1)所有表单元素都要给取一个确切的名字,也就是要设置好“name”参数的值,以便在程序中引用;

2)对于象单选框、复选框这样的供用户选择的表单元素,要把具体的值定义到它的value参数上,否则,程序在计算时无法获得实际数值,写在它边上的那个数值是给用户看,程序是无法获取的,这一点切勿忽视,否则计算结果不正确。例如:本例中两种电脑单价(5000元和7000元)的两个单选框的源代码如下:

单价: <input type="radio" name="r1" value="5000">5000元

<input type="radio" name="r1" value="7000">7000元

看到了吧,除了在单选框的边上要写上单价的数值,还在单选框标记中设置好value的相应数值。

2、在表单的后面插入下面这段程序:

<script language="JavaScript">
<!--
function jshk(){
obj=document.dhform;
var dj=0;
for (i=0;i<(obj.item.length);i++){ //查找那种单价被选中
if ((obj.item(i).checked) && (obj.item(i).name="r1")) {dj=parseInt(obj.item(i).value);break}}
hk=parseInt(obj.t1.value); hk=hk*dj; //计算电脑的货款(数量*单价)
if (obj.c1.checked) hk+=parseInt(obj.c1.value); //如果该复选框被选中,加上该项货款。
if (obj.c2.checked) hk+=parseInt(obj.c2.value); //如果该复选框被选中,加上该项货款。
if (obj.c3.checked) hk+=parseInt(obj.c3.value); //如果该复选框被选中,加上该项货款。
if (obj.c4.checked) hk+=parseInt(obj.c4.value); //如果该复选框被选中,加上该项货款。
obj.t3.value=hk+".00";
}
//-->
</script>

该程序不复杂,关键的要注意以下几点:

1)对于所有表单元素的value参数值,它们都是字符形式,要参于计算,必须先用parseInt()函数把它转换成数值形式;

2)对于单选框,要先找出用户选中的是那一个单选框,然后再取其value值进行计算;

3)对于复选框,要逐个判断是否被选中,如果被选中,则计算,否则不计算。

4)对于单行文本框,一般是要求用户输入的,所以其值可直接转换后进行计算。

3、在“开始计算”按钮中加上一个事件:onclick="jshk()"来调用程序进行计算。

由于定购单的样式千变万化,所以本文的程序直接引用的可能性是很少,但不管表单如何变化,万变不离其宗,其获取表单元素value参数值的方法是相同的,所以本文介绍的方法是很实用的。

时间: 2024-09-11 22:52:06

用Javascript制作会计算的表单的相关文章

JavaScript实现仿网易通行证表单验证

  这篇文章主要介绍了JavaScript实现仿网易通行证表单验证,十分的实用,有需要的小伙伴可以参考下. 介绍一下表单验证,不错哦: 如图 CSS代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

Javascript实例教程(9) 检验表单有效性

javascript|教程 利用javascript表单的有效性检验 表单的有效性检验是javascript一个很有用的方面.它可以用于检查一个给定的表单以及发现表单中的任何问题,比如一个空白的输入框或者一个无效的E-mail(电子邮件)地址,然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间.另外,除此以外,对表单标签的一些修改跟其它类型的脚本是类似的.以下的例子是一个简单的表单,如下面表单所示.你可以让名字的方框留空白或者输入一个电子邮件地址而没有@符号,即是输入错误的内容,看

Javascript 函数: CTRL+回车 提交表单

javascript|函数|提交表单 <script type="text/javascript"> //<![CDATA[ Javascript 函数: Ctrl+回车 提交表单 // 例: <textarea name="textarea" ></textarea> // 注意: Form 必须有 Name 或 ID      function submitForm(formName) {         if(wind

Javascript中CTRL+回车提交表单

<script type="text/javascript"> //<![CDATA[ Javascript 函数: Ctrl+回车 提交表单 // 例: <textarea name="textarea" onKeyDown="submitForm(this.form.name)"></textarea> // 注意: Form 必须有 Name 或 ID function submitForm(for

JavaScript获取按钮所在form表单id的方法

 本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button

javascript获取form里的表单元素的示例代码

 本篇文章主要是对javascript获取form里的表单元素的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 //获取form对象   var form=document.getElementById('my_form');   //用户名input对象 user_name是对象的name属性   var userName=form.user_name;   //用户名清空   userName.value='';   //用户密码input对象 password是对象的na

javascript如何监听form 表单提交请求?

问题描述 javascript如何监听form 表单提交请求? 前端form 表单提交请求如何监听?就像ajax请求可以通过xmlHttpRquest对象去监听所有的ajax请求,对其中的参数做一层包装再发送到后台,后台返回的数据也可以在此处做一次封装再发给指定的页面一样,但是xmlHttpRquest捕捉不到form表单提交的请求,请问各位大神form表单提交的请求前端如何捕获? 解决方案 表单的onsubmit事件,或者给input为submit的类型添加onclick事件也行,返回fals

JavaScript获取按钮所在form表单id的方法_javascript技巧

本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

JavaScript实现仿网易通行证表单验证_javascript技巧

介绍一下表单验证,不错哦: 如图 CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;margin:0;} #header,#main{ width:650px; margin:0 auto; } .bg{ background-image:url(../images/register_bg.gif); background-repeat:no-repeat; width:6px;