Monday, May 20, 2013

SCRIPT FORM TIKET MENGGGUNAKAN ALERT PERINGATAN JAVASCRIPT

Sebelum membahas script bahasa javascript menggunakan peringatan atau alert, saya akan merefresh sejenak apakah alert dan fungisnya. Alert dalam javascript yaitu kotak peringatan yang dapat ditampilkan menggunakan / melalui javascript () aret function. Alert tersebut digunakan untuk menampilkan kotak pesan berisi keterangan, namun ada satu pilihan saja yaitu "ok". Saya akan membagikan script / kode javascript membuat alert dalam form tiket. Untuk lebih jelasnya silahkan lihat atau simak kode berikut ini :

   <html >
    <head>
       <TITLE>PT.INDRA MULYO TRAVEL</TITLE>
  </HEAD>

   <body id="abc">
 
    <script type="text/javascript" id="abc">
<!--
    function hitungtotal()
      {
 
     var a=document.getElementById("abc").innerHTML;
   
var nama = document.getElementById("inama").value;
  var tujuan = document.getElementById("itujuan").value;
  var kelas = document.getElementById("ikelas").value;
var jumlahtiket = parseFloat(document.fform.ijumlah.value);
    var ht = 0.0;
  var subtotal = 0.0;
  var diskon = 0.0;
  var total = 0.0;

    if ((tujuan=="Jakarta")&&(kelas=="Eksekutif"))
   {
          ht =70000;
   }
  else if ((tujuan=="Jakarta")&&(kelas=="Bisnis"))
   {
      ht =40000;
   }
  else if ((tujuan=="Jakarta")&&(kelas=="Ekonomi"))
   {
      ht =10000;
   }
else if ((tujuan=="Solo")&&(kelas=="Eksekutif"))
   {
      ht =80000;
   }
else if ((tujuan=="Solo")&&(kelas=="Bisnis"))
   {
      ht =50000;
   }
else if ((tujuan=="Solo")&&(kelas=="Ekonomi"))
   {
      ht =20000;
   }
else if ((tujuan=="Surabaya")&&(kelas=="Eksekutif"))
   {
      ht =90000;
   }
else if ((tujuan=="Surabaya")&&(kelas=="Bisnis"))
   {
      ht =60000;
   }
else
   {
      ht=30000;
   }
 
subtotal = jumlahtiket*ht;

  if (document.fform.imember.checked==true)
   {ket="YA";
  diskon = subtotal*10/100;
 
 }

else

 
   {ket="TIDAK";
   diskon=0.0;
 }


total=subtotal-diskon;
 
document.write(a+"<br>");
document.write(" Nama : "+nama+"<br >");
document.write(" Tujuan : "+tujuan+ "<br >");
document.write(" Kelas : "+kelas+ "<br >");
document.write(" Jumlah : "+jumlahtiket+ "<br >" );
document.write(" Member : "+ket+"<br>");
document.write("<br>");

document.fform.otiket.value=ht;
  document.fform.osubtotal.value=subtotal;
  document.fform.odiskon.value=diskon;
  document.fform.ototal.value=total;
   
document.write("<table width ='600' border ='1'>");
  document.write("<tr><th>Harga Tiket</th>");
    document.write("<th>Sub Total</th>");
document.write("<th>Diskon</th>");
document.write("<th>Total Bayar</th>");
document.write("<tr>");

  document.write ("<tr>");
document.write("<th>"+ht+"</th>");
document.write("<th>"+subtotal+"</th>");
document.write("<th>"+diskon+"</th>");
document.write("<th>"+total+"</th>");
document.write ("</table>");



// gunakan untuk mengecek !!! alert (total);
 }
  //-->

</SCRIPT>
<FORM name="fform">

<table border="1" align="center" width="70%">
   <tr>
     <td width="100%" colspan="2">
     <H3 ALIGN="center">PT. INDRA MULYO TOURS & TRAVEL</H3></td>
   </tr>
   <tr>
     <td width="50%">
<pre>
 Nama         : <input type="text" id="inama" size="20" name="inama">
 Tujuan       : <select name="itujuan" id="itujuan" size=1>
    <option value="Jakarta">Jakarta</option>
    <option value="Solo">Solo</option>
    <option value="Surabaya">Surabaya</option>
      </select>
 Kelas        : <select name="ikelas" id="ikelas" size=1>
    <option value="Eksekutif">Eksekutif</option>
    <option value="Bisnis">Bisnis</option>
    <option value="Ekonomi">Ekonomi</option>
      </select>
 jumlah tiket : <input type="text" id="ijumlah" size="11" name="ijumlah">
 member       : <input type="checkbox" id="imember" name="imember">ya
 </td>
 </pre>
    <td width="50%"><pre>
 harga tiket : <input type="text" size="10" id="otiket" name="otiket">
 sub total : <input type="text" size="10" id="osubtotal" name="osub">
 diskon : <input type="text" size="10" id="odiskon" name="odiskon">
 total bayar : <input type="text" size="10" id="ototal" name="ototal">
 </td><pre>
</tr>
<tr>
<td width ="100%" colspan="2">
 <center>
    <input type="button" value="hitung" onclick="hitungtotal()">
<input type="reset" value="ulang">

 </center>
    </td>
</tr>
</table>
</form>
</body>
</html>

Silahkan anda coba kode/script tersebut agar tidak menjadi penasaran dan untuk lebih jelas hasilnya silahkan anda bisa cari di postingan saya membuat tiket form dan alert javascript. Jika terjadi kesalahan atau gagal dalam penulisan maupun menjalankan script tersebut, silahkan kontak saya atau kirim pesan melalui email. Mohon kritik dan saran karena saya juga masih awam atau pemula dalam pemrograman bahasa javascript. semoga artikel yang saya tulis dapat bermanfaat untuk semuanya.
terima kasih telah berkunjung ke blog saya.

No comments:

Post a Comment