Cara membuat penjumlahan di html

Pada postingan kali ini saya akan membahas Bagaimana cara membuat program penjumlahan, pengurangan, perkalian, dan pembagian menggunaan script PHP

Klik link ini untuk penanganan error undefined: Script PHP penjumlahan, pengurangan, perkalian, dan pembagian dalam bentuk form sederhana

Contoh form penjumlahan :

<html>
<body>
<h1> PENJUMLAHAN </h1>
<form method="post">
Nilai 1 = <input type="text" name="a" value="<?php echo $_POST["a"] ?>" required><br>
Nilai 2 = <input type="text" name="b" value="<?php echo $_POST["b"] ?>" required><br>
<?php
$a=$_POST["a"];
$b=$_POST["b"];
$penjumlahan = $a+$b;
echo "Hasil = $penjumlahan";
?>
<br><input type="submit" value="hasil">
</form>
</body>
</html>

Hasilnya :

Proses dan cara kerja :

method="post" >> digunakan untuk memproses Submit
<?php echo $_POST["a"] ?> >> Untu menampilkan nilai yang dimasukkan
+>> metode yang digunakan
Warna yang sama pada script diatas harus mempunyai text yang sama
Tag required digunakan agar form tidak boleh kosong
Dan script yang lainnya merupakan script HTML biasa

*.BACA JUGA: MATERI TKJ KELAS 10 SEMESTER 1 dan 2 BERBASIS KTSP LENGKAP

Hai sobat yadishare apa kabar? Sudah hari sabtu lagi nih. Iseng-iseng ah pengen nulis mengenai html dan jquery. Ketika kita membangun sebuah aplikasi menggunakan php, seringkali kita harus membuat sebuah penjumlahan antar textbox secara otomatis agar memudahkan user.

Misalnya kita memiliki 3 buah inputbox yang kita buat dengan menggunakan HTML yang terdiri dari sub total, ppn, dan grand total. Kemudian setiap kali kita menginputkan angka ke dalam textbox sub total dan textbox ppn tersebut, kita ingin textbox grand total jumlahnya terhitung secara otomatis agar dapat memudahkan user. Lalu bagaimana caranya?

Nah untuk dapat melakukannya, kita pasti butuh cara yang mudah dan cepat bukan? Ada banyak cara yang dapat kita lakukan untuk mewujudkan hal tersebut. Salah satunya adalah dengan menggunakan bantuan JQuery.

Pertama kalian bisa download file jquery.js disini. Masukkan ke dalam folder assets/js. Kalian juga dapat menambahkan script berikut ini tanpa harus mendownload file diatas jika memang PC/Laptop anda terhubung ke dalam internet.

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js


Jangan lupa juga untuk mendownload css bootstrap agar tampilan halaman web kita menjadi sedikit lebih menarik ya. Kemudian ketikkan full script html berikut ini ke dalam file index.php dan simpan ke dalam folder textbox-jquery yang anda buat di dalam folder www jika anda menggunakan wamp server atau htdoc jika anda menggunakan xampp :
Penjumlahan Textbox Secara Otomatis Di HTML, PHP, Dan JQuery
<div class="form-group">
		Sub Total

<div class="col-lg-3"></div>
</div>
<div class="form-group">
		PPn

<div class="col-lg-3"></div>
</div>
<div class="form-group">
		Grand Total

<div class="col-lg-3"></div>
</div>
<pre> $("#volume").keyup(function(){
   var a = parseInt($("#volume").val());
   var b = parseInt($("#harga").val());
   var c = a+b;
   $("#jumlah").val(c);
 });


 $("#harga").keyup(function(){
   var a = parseInt($("#volume").val());
   var b = parseInt($("#harga").val());
   var c = a+b;
   $("#jumlah").val(c);
 });


Berikut tampilan dari hasil kalkulasi textbox di atas setelah di jalankan dari web browser:

Ini adalah script dari jquery di atas yang digunakan untuk menghitung textbox secara otomatis menggunakan event/function keyup :
 $("#volume").keyup(function(){
   var a = parseInt($("#volume").val());
   var b = parseInt($("#harga").val());
   var c = a+b;
   $("#jumlah").val(c);
 });

 $("#harga").keyup(function(){
   var a = parseInt($("#volume").val());
   var b = parseInt($("#harga").val());
   var c = a+b;
   $("#jumlah").val(c);
 });


Ok guys, thanks for reading my article today, I hope this short explanation can help you. Wanna see the video ? Check it below. Thanks for watching, don’t forget to like, share and subscribe. It’s free. Find the download link of this source code in the description of below video 🙂

kode html

Cara membuat penjumlahan di html

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social