Membuat form penghitungan tanpa tombol Submit

/ ndholkondho

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

25 pemikiran pada “Membuat form penghitungan tanpa tombol Submit”

  2. 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

    Balas

    • “…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. 🙂

      Balas

  4. 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……

    Balas

  5. 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

    Balas

  6. 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…

    Balas

  11. 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

    Balas

    • 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>

      Balas

  12. 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

    Balas

    • 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

      Balas

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

    Balas

Tinggalkan Balasan ke Jack De Amenez Batalkan balasan