Membuat form penghitungan tanpa tombol Submit

Sudah lama rasanya tidak update blog ini, maklum banyak yang dikerjakan he3.  Maksud judul yang saya buat ini adalah pengalaman saya waktu ingin membuat form penghitungan. Biasanya untuk mengkalkulasi form kita harus menekan tombol (form.button) Submit. Yang saya inginkan adalah saya membikin 3 textfield masing-masing adalah sbb:

  1. Textfield 1 berisi harga barang per-unit
  2. Textfield 2 berisi diskon
  3. Textfield 3 berisi jumlah barang yang kita pesan
  4. Textfield 4 menampilkan hasil perhitungan

Begitu saya mengisikan angka pada jumlah barang yang dipesan, maka otomatis hasil perhitungan langsung muncul (seperti model ajax gitu-lah). Screenshotnya seperti ini

OK, langsung sharing skripnya ajah…..

Taruh skrip ini didalam <head>

<script type=”text/javascript”>
<!–
function startCalculate(){
interval=setInterval(“Calculate()”,10);
}

function Calculate(){
var a=document.form1.harga_perunit.value;
var b=document.form1.diskon.value;
var c=document.form1.jml_barang.value
document.form1.total.value=(a*c)-(a*c*(b/100));
}

function stopCalc(){
clearInterval(interval);
}
//–>
</script>

Kemudian siapkan tabel berifi form di <body>

<form id=”form1″ name=”form1″ method=”post” action=””>
<table width=”400″ border=”0″ cellpadding=”5″ cellspacing=”1″ bgcolor=”#333333″>
<tr>
<td width=”50%” bgcolor=”#FFFFFF”>Harga per unit </td>
<td bgcolor=”#FFFFFF”><input name=”harga_perunit” type=”text” id=”harga_perunit” style=”text-align:right” onfocus=”startCalculate()” onblur=”stopCalc()” value=”5000″ /></td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Diskon</td>
<td bgcolor=”#FFFFFF”><input name=”diskon” type=”text” id=”diskon” size=”10″ onfocus=”startCalculate()” onblur=”stopCalc()”/>
%</td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Jumlah barang </td>
<td bgcolor=”#FFFFFF”><input name=”jml_barang” type=”text” id=”jml_barang” size=”10″ onfocus=”startCalculate()” onblur=”stopCalc()”/></td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Total dibayar </td>
<td bgcolor=”#FFFFFF”><input name=”total” type=”text” id=”total” style=”text-align:right” onfocus=”startCalculate()” onblur=”stopCalc()”/></td>
</tr>
</table>
</form>

Silahkan copas saja deh daripada ngeting ulang he3. Pengembangan skrip ini bisa luas misalnya digabung dengan database, misalnya harga dikaitkan dengan jenis barang yang tersimpan di database (seperti aplikasi kasir), atau data realtime seperti jumlah pengunjung yang masuk arena bermain, atau laporan keuangan.

Semoga bermanfaat

Iklan

25 thoughts on “Membuat form penghitungan tanpa tombol Submit

  1. pak, bagaimana jika sebuah form bisa mengirim data tanpa klik submit, misal form ada di index.php, lalu ketika index.php dibuka, maka form otomatis mengirimkan data .tolong dijawab pak. makasih

    • “…misal form ada di index.php, lalu ketika index.php dibuka, maka form otomatis mengirimkan data…”
      Maksudnya bagaimana ya??? khan form-nya belum diisi? Atau maksudnya form yang tanpa tombol submit? Kalau itu maksudnya ada beberapa solusi
      1. Coba buka link http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter
      2. Pakai contoh script dibawah ini (dari hotscripts.com)

      <input type="hidden" name="hiddenfield1" value="”>

      document.MyForm.submit();

      Mudah-mudahan membantu, saya sendiri belum mencoba. 🙂

  2. function Calculate(){
    var a=document.form1.harga_perunit.value;
    var b=document.form1.diskon.value;
    var c=document.form1.jml_barang.value
    document.form1.total.value=(a*c)-(a*c*(b/100));
    }
    fungsini di taru dimana……

  3. function Calculate(){
    var a=document.getElementById(‘harga_perunit’).value;
    var b=document.getElementById(‘diskon’).value;
    var c=document.getElementById(‘jml_barang’).value;
    document.getElementById(‘total’).value=(a*c)-(a*c*(b/100));
    }

    cobaganti sama ini. semoga jalan

  4. kenapa saat
    document.form1.total.value=(a*c)-(a*c*(b/100));
    saya ganti mennjadi
    document.form1.total.value=(a+b+c);
    hasilnya malah menjadi abc
    bukan jumlah dari a+b+c…

  5. Hello mas admin mohon pencerahannya saya running gak jalan mas apa permasalahannya ya mas…

    saya mau buat contoh kasusnya seperti ini mas :
    textbox 1 x textbox2 hasilnya di textbox3 kemudian texbox 3 x textbox 4 (% kalinya dengan persen mas) seteah itu hasilnya di textbox 5 mas mohon pencerahannya mas

    • Untitled Document

      <head>

      function startCalculate(){
      interval=setInterval(“Calculate()”,10);
      }

      function Calculate(){
      var a=document.form1.satu.value;
      var b=document.form1.dua.value;
      var c=document.form1.tiga.value;
      var d=document.form1.empat.value;
      //var e=document.form1.5.value;
      document.form1.tiga.value=(a*b);
      document.form1.lima.value=(c-(c*(d/100)));
      }

      function stopCalc(){
      clearInterval(interval);
      }

      </head>
      <body>

      <form id="form1" name="form1" method="post" action="">
      <table width="400" border="0" cellpadding="5" cellspacing="1" bgcolor="#333333">
      <tr>
      <td width="50%" bgcolor="#FFFFFF">1 </td>
      <td bgcolor="#FFFFFF"><input name="satu" type="text" id="satu" style="text-align:right" onFocus="startCalculate()" onBlur="stopCalc()" value="5000" /></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFFF">2</td>
      <td bgcolor="#FFFFFF"><input name="dua" type="text" id="dua" size="10" onFocus="startCalculate()" onBlur="stopCalc()"/></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFFF">3 </td>
      <td bgcolor="#FFFFFF"><input name="tiga" type="text" id="tiga" size="10" onFocus="startCalculate()" onBlur="stopCalc()"/></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFFF">4 </td>
      <td bgcolor="#FFFFFF"><input name="empat" type="text" id="empat" size="10" onFocus="startCalculate()" onBlur="stopCalc()"/>%</td>
      </tr>
      <tr>
      <td bgcolor="#FFFFFF">5 </td>
      <td bgcolor="#FFFFFF"><input name="lima" type="text" id="lima" style="text-align:right" onFocus="startCalculate()" onBlur="stopCalc()"/></td>
      </tr>
      </table>
      </form>
      </body>

  6. Hallo pak, kalau pas iput formnya ada pemisah format angkanya misalnya 10000 = 10.000 itu gmana pak modif koding java script di atas pak,,mohon pencerahannya, makasih

    • Asumsi kita memanggil record dari database.
      Kemudian kita ingin menuliskan dalam bentuk pecahan desimal misal 10.000,00,
      maka scriptnya adalah

      <?php echo number_format($row_tabel["uang"],2,",","."); ?>

      Atau kalau mau langsung

      <?php echo number_format(10000,2,",","."); ?>

      akan menghasilkan tulisan 10.000,00

      Semoga membantu

  7. Salam … menarik sekali, permasalahannya jika textboxnya diberi id dalam bentuk array karena didapat dari database, bagaimana solusinya ? Trims 🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s