Hi every body

first of all I inform you that I have any idea about JS but I know that can help me to much in my problem that why I need you help following my html code I want any one to help me how to use JS to make some calculation for example a2*a4
a1*a3
my html code :
HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1256">
<title>loan page</title>
<style type="text/css">
div#container
{
   width: 994px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #C8D7EB;
   text-decoration: underline;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: underline;
}
</style>
<style type="text/css">
#wb_Form1
{
   background-color: #FAFAFA;
   border: 0px #000000 solid;
}
#Combobox1
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Editbox1
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Editbox2
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Combobox2
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Button1
{
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Button2
{
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Editbox3
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Editbox4
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Editbox5
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Editbox6
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Editbox7
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#Editbox8
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Text2 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Text3 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text4 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text4 div
{
   text-align: left;
}
#wb_Text5 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text5 div
{
   text-align: left;
}
</style>
</head>
<body>
<div id="container">
<a href="http://www.wysiwygwebbuilder.com" target="_blank"><img src="images/builtwithwwb8.gif" alt="WYSIWYG Web Builder" style="position:absolute;left:451px;top:735px;width:88px;height:31px;border-width:0;z-index:250"></a>
<div id="wb_Form1" style="position:absolute;left:304px;top:64px;width:398px;height:455px;z-index:18;">
<form name="Form1" method="post" action="" enctype="text/plain" target="_self" id="Form1">
<select name="a3" size="1" id="Combobox1" style="position:absolute;left:290px;top:139px;width:96px;height:21px;z-index:0;">
<option selected value="35%">35%</option>
<option value="50%">50%</option>
</select>
<input type="text" id="Editbox1" style="position:absolute;left:284px;top:79px;width:94px;height:19px;line-height:19px;z-index:1;" name="a1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:108px;top:80px;width:94px;height:19px;line-height:19px;z-index:2;" name="a2" value="">
<select name="a4" size="1" id="Combobox2" style="position:absolute;left:115px;top:140px;width:96px;height:21px;z-index:3;">
<option value="5%">year</option>
<option value="8%">2 year</option>
<option value="11%">3 year</option>
<option value="14%">4 year</option>
<option value="17%">5 year</option>
<option selected value="20%">6 year</option>
</select>
<input type="reset" id="Button1" name="a5" value="empty" style="position:absolute;left:82px;top:193px;width:96px;height:25px;z-index:4;">
<input type="submit" id="Button2" name="a6" value="submit" style="position:absolute;left:215px;top:193px;width:96px;height:25px;z-index:5;">
<input type="text" id="Editbox7" style="position:absolute;left:263px;top:271px;width:94px;height:19px;line-height:19px;z-index:6;" name="a9" value="">
<input type="text" id="Editbox6" style="position:absolute;left:145px;top:272px;width:94px;height:19px;line-height:19px;z-index:7;" name="a8" value="">
<input type="text" id="Editbox3" style="position:absolute;left:34px;top:274px;width:94px;height:19px;line-height:19px;z-index:8;" name="a7" value="">
<input type="text" id="Editbox4" style="position:absolute;left:35px;top:350px;width:94px;height:19px;line-height:19px;z-index:9;" name="a10" value="">
<input type="text" id="Editbox5" style="position:absolute;left:148px;top:348px;width:94px;height:19px;line-height:19px;z-index:10;" name="a11" value="">
<input type="text" id="Editbox8" style="position:absolute;left:260px;top:351px;width:94px;height:19px;line-height:19px;z-index:11;" name="a12" value="">
<div id="wb_Text1" style="position:absolute;left:116px;top:25px;width:159px;height:24px;z-index:12;">
<span style="color:#000000;font-family:Arial;font-size:21px;">Calculating loan</span></div>
<div id="wb_Text2" style="position:absolute;left:8px;top:81px;width:102px;height:16px;z-index:13;">
<span style="color:#000000;font-family:Arial;font-size:13px;">value of the loan</span></div>
<div id="wb_Text3" style="position:absolute;left:228px;top:83px;width:48px;height:16px;z-index:14;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Salary</span></div>
<div id="wb_Text4" style="position:absolute;left:6px;top:143px;width:111px;height:16px;z-index:15;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Repayment period</span></div>
<div id="wb_Text5" style="position:absolute;left:217px;top:142px;width:75px;height:16px;z-index:16;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Interest rate</span></div>
</form>
</div>
</div>
</body>
</html> 
please help me

Last edited by shabbir; 14Oct2012 at 18:57.. Reason: Code blocks