បង្កើតកម្មវិធីសម្រាប់ order ក្នុង Javascript

លោកអ្នកបង្កើត Form ចំនួនពីរ៖ ទី១ គឺ Form សម្រាប់បញ្ចូលតម្លៃ និងទី២ គឺ Form សម្រាប់ទាញតម្លៃមកបង្ហាញ សូមមើលគម្រូកូដដូចខាងក្រោម៖
<center>
<form name=”frm_inp”>
<table width=”500px” height=”350px”>
<tr>
<td colspan=”2″ align=”center”><h1>NANCO GROUP</h1></td>
</tr>
<tr>
<td align=”right”>ItemID :</td><td align=”left”><input type=”text” name=”id” /></td>
</tr>
<tr>
<td align=”right”>Type :</td><td align=”left”><select name=”type”>
<option>Beef</option>
<option>Crab</option>
<option>Sausage</option>
<option>Pork</option>
</td>
</tr>
<tr>
<td align=”right”>Size :</td><td align=”left”><select name=”size”>
<option>M</option>
<option>L</option>
<option>S</option>
</select>
</td>
</tr>
<tr>
<td align=”right”>Price :</td><td align=”left”><input type=”text” name=”price” /></td>
</tr>
<tr>
<td align=”right”>Discount :</td><td align=”left”><input type=”text” name=”dis” /></td>
</tr>
<tr>
<td align=”right”>Customer Name :</td><td align=”left”><input type=”text” name=”cn” /></td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=”button” value=”Submit” onclick=”order()” style=”color:#F00″ /><input type=”reset” value=”Reset” style=”color:#F00″ /></td>
</tr>
</table>

</form>
</center>

<center>
<form name=”frm_ord”>

<table>
<tr>
<td>
<div id=”title”>Order</div>
</td>
</tr>
<tr>
<td align=”right”>Item :</td><td align=”left”><div id=”item”></div></td>
</tr>
<tr>
<td align=”right”>Type :</td><td align=”left”><div id=”tp”></div></td>
</tr>
<tr>
<td align=”right”>Size :</td><td align=”left”><div id=”sz”></div></td>
</tr>
<tr>
<td align=”right”>Total :</td><td align=”left”><div id=”total”></div></td>
</tr>
<tr>
<td align=”right”>Customer Name :</td><td align=”left”><div id=”cname”></div></td>
</tr>
</table>
</form>
</center>

a

បន្ទាប់ពីបង្កើតបានជា Form រួចមក បន្តបង្កើតជា Function ដើម្បីងាយសិក្សាលក្ខខណ្ឌ និងទាញយកតម្លៃមកបង្ហាញ។
<script type=”text/javascript”>
function order()
{
var f=document.frm_inp;
var i=document.id;
var p=document.price;
var d=document.dis;
var c=document.cn;
var t=document.type;
var s=document.size;
if(f.id.value==””)
{
alert(“Please input the item”);
f.id.focus();
}
else if(f.price.value==””)
{
alert(“Please input the price”);
f.price.focus();
}
else if(f.dis.value==””)
{
alert(“Please input the discount”);
f.dis.focus();
}
else if(f.cn.value==””)
{
alert(“Please input the customer name”);
f.cn.focus();
}
else
{
document.getElementById(“item”).innerHTML=f.id.value + “”;
document.getElementById(“tp”).innerHTML=f.type.value + “”;
document.getElementById(“sz”).innerHTML=f.size.value + “”;
document.getElementById(“cname”).innerHTML=f.cn.value + “”;
document.getElementById(“total”).innerHTML=f.price.value – (f.price.value*f.dis.value)/ 100 ;

}
}
</script>