Create a form that will be calculated using JavaScript

When we make purchase orders, we often have to calculate the customer purchase goods, the HTML does not provide this online calculation function, but we use JavaScript program to achieve this online summary calculation function. Of course a complete order may involve many form tags, and how to get the value of each form tag is the key to solving the problem. The method in this example will tell you how to get the value of each form element and calculate it. You see this order, although it involves a variety of form elements (such as the Radio box, check box, single-line text box, etc.), but you can select items, as long as a "Calculate Money" button, immediately calculate all the goods, exactly. Please be satisfied!

Production method:

1, the production of a purchase order, with form elements to make a purchase order here is not detailed, if you do not, please go to see the topic of the relevant articles. But there are two points to note in making the form that you want to use the program to calculate:

1 All form elements must give an exact name, that is, to set the "name" parameter value, so as to be referenced in the program;

2 for a user-selected form element such as a radio box, check box, to define the value of the specific values on its value parameters, otherwise, the program in the calculation can not get the actual value, written on the side of the value is to show the user, the program is not available, this point should not be ignored, otherwise the calculation results are incorrect. For example, in this example, the source code for the two radio boxes of the two computer unit prices (5000 and 7000) is as follows:

Unit Price: <input type= "Radio" name= "R1" value= "5000" >5000 yuan

<input type= "Radio" name= "R1" value= "7000" >7000 yuan

See, in addition to the value of the unit price to be written on the edge of the radio box, set the corresponding value of value in the Radio box tag.

2. Insert the following procedure at the back of the form:

<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>

The program is not complex, the key to note the following:

1 for all form elements of value parameter values, they are character form, to be involved in the calculation, you must first use the parseint () function to convert it into numerical form;

2 for the Radio box, first find the user selected is that one of the radio box, and then take its value to calculate;

3 for the check box, to determine whether the selected, if selected, then calculate, otherwise not calculated.

4 for a single-line text box, the user is generally required to input, so its value can be directly converted after the calculation.

3. Add an event to the "Start Calculation" button: onclick= "Jshk ()" To invoke the program for calculation.

Because the style of purchase order is changeable, so the possibility of direct reference of this article is very few, but regardless of how the form changes, same, its method that obtains the table cell element value parameter is same, so the method introduced in this article is very practical.