• ..


Setelah sebelumnya dibuat sebuah kalkulator sederhana, maka pada kesempatan kali ini saya akan berbagi fungsi dari JavaScript yang lain. Salah satu fungsinya adalah membuat form pemesanan makanan online.
Tampilannya adalah seperti berikut:

 
 Untuk kode HTML dan JavaScript-nya bisa  dilihat dibawah ini :


 Kode HTML :

<!DOCTYPE html>
<html lang="en">

<head>
 <title>Form Pemesanan Makanan</title>
 <script type="text/javascript" src="StudiKasus.js"></script>
</head>

<body>
 <h1>Form Pemesanan Berbasis JavaScript</h1>

 <form name=form1 action="#">
 <table cellpadding=3 border=1>
  <tr>
   <th width=30>No.</th>
   <th width=250>Makanan/Minuman</th>
   <th width=200>Harga</th>
   <th width=200>Pesan</th>
  </tr>

  <tr>
   <td>1.</td>
   <td>Bakso Istimewa</td>
   <td>@   Rp. <input type="text" name="harga1" value="12000" readonly></td>
   <td><center><input type="text" name="jumlah1" onchange="tampil()" onclick="tampil()" style="text-align:center"></center></td>
  </tr>
  
  <tr>
   <td>2.</td>
   <td>Soto Spesial</td>
   <td>@   Rp. <input type="text" name="harga2" value="10000" readonly></td>
   <td><center><input type="text" name="jumlah2" onchange="tampil()" onclick="tampil()" style="text-align:center"></center></td>
  </tr>
  
  <tr>
   <td>3.</td>
   <td>Mie Ayam Super</td>
   <td>@   Rp. <input type="text" name="harga3" value="15000" readonly></td>
   <td><center><input type="text" name="jumlah3" onchange="tampil()" onclick="tampil()" style="text-align:center"></center></td>
  </tr>
  
  <tr>
   <td>4.</td>
   <td>Es Degan</td>
   <td>@   Rp. <input type="text" name="harga4" value="5000"  readonly></td>
   <td><center><input type="text" name="jumlah4" onchange="tampil()" onclick="tampil()"  style="text-align:center"></center></td>
  </tr>
  
  <tr>
   <td>5.</td>
   <td>Es Campur</td>
   <td>@   Rp. <input type="text" name="harga5" value="7000" readonly></td>
   <td><center><input type="text" name="jumlah5" onchange="tampil()" onclick="tampil()" style="text-align:center"></center></td>
  </tr>
  
  <tr>
   <td colspan=3 align="right">JUMLAH TOTAL</td>
   <td><center>Rp. <input type="text" name="total" style="text-align:right" readonly></center></td>
  </tr>

  <tr>
   <td colspan=3 align="right">DISKON</td>
   <td><center>Rp. <input type="text" name="potongan" style="text-align:right" readonly></center></td>
  </tr>

  <tr>
   <td colspan=3 align="right">JUMLAH BAYAR</td>
   <td><center>Rp. <input type="text" name="bayar" style="text-align:right" readonly></center></td>
  </tr>
 </table>
 <br />
 <input type="button" value="BATAL" onclick="cancel()" />
</form>
<br /><br />
&copy;haqiphoenix
</body>
</html>

Kode JavaScript :

function Total() 
{
 var myForm = document.form1;
 
 var jumlah1 = parseInt(myForm.jumlah1.value);
 var jumlah2 = parseInt(myForm.jumlah2.value);
 var jumlah3 = parseInt(myForm.jumlah3.value);
 var jumlah4 = parseInt(myForm.jumlah4.value);
 var jumlah5 = parseInt(myForm.jumlah5.value);
 
 if(myForm.jumlah1.value == "") jumlah1=0;
 if(myForm.jumlah2.value == "") jumlah2=0;
 if(myForm.jumlah3.value == "") jumlah3=0;
 if(myForm.jumlah4.value == "") jumlah4=0;
 if(myForm.jumlah5.value == "") jumlah5=0;
 
 var subTotal1 = parseInt(myForm.harga1.value)*jumlah1;
 var subTotal2 = parseInt(myForm.harga2.value)*jumlah2;
 var subTotal3 = parseInt(myForm.harga3.value)*jumlah3;
 var subTotal4 = parseInt(myForm.harga4.value)*jumlah4;
 var subTotal5 = parseInt(myForm.harga5.value)*jumlah5;
 
 myForm.total.value = subTotal1 + subTotal2 + subTotal3 + subTotal4 + subTotal5;
}
 
function diskon() 
{ 
 var myForm = document.form1;

 if(myForm.total.value < 50000) 
 {
  myForm.potongan.value = 0;
 }
 else 
 {
  myForm.potongan.value = 10000;
 }
}

function TotalBayar() 
{
 var myForm = document.form1;

 myForm.bayar.value = parseInt(myForm.total.value) - parseInt(myForm.potongan.value);
}

function tampil() 
{
 Total();
 diskon();
 TotalBayar();
}

function cancel() 
{
 var myForm = document.form1;

 myForm.jumlah1.value = "";
 myForm.jumlah2.value = "";
 myForm.jumlah3.value = "";
 myForm.jumlah4.value = "";
 myForm.jumlah5.value = "";
 myForm.total.value = "";
 myForm.potongan.value = "";
 myForm.bayar.value = "";
}