Skip to main content

Kalkulasi Textbox Secara Otomatis Di HTML, Php, Dan JQuery

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


Misalnya kita memiliki 3 buah textbox yang kita buat dengan menggunakan HTML yang terdiri dari qty, harga satuan, dan total jumlah. Kemudian setiap kali kita menginputkan angka ke dalam textbox qty dan textbox harga satuan tersebut, kita ingin textbox total jumlah 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.


[code language="html"]

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

[/code]

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 atau htdoc jika anda menggunakan xampp :


[code language="html"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kalkulasi Textbox Secara Otomatis Di HTML, PHP, Dan JQuery</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!--kalian bisa download file jquery dan masukkan ke dalam folder assets/js/-->
<script src="assets/js/jquery.js"></script>
<!--atau bisa juga masukkan script berikut ini bila anda terhubung ke dalam internet tanpa harus mendownloadnya-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<legend class="text-success"><?php echo 'Kalkulasi Textbox Secara Otomatis Di HTML, PHP, Dan JQuery';?></legend>
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<label class="col-lg-3 control-label">Qty</label>
<div class="col-lg-3">
<input type="number" step="any" min="0" name="volume" id="volume" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Satuan</label>
<div class="col-lg-3">
<input type="text" name="satuan" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Harga Satuan</label>
<div class="col-lg-3">
<input type="number" step="any" min="0" name="harga" id="harga" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Jumlah Total</label>
<div class="col-lg-3">
<input type="text" name="jumlah" id="jumlah" class="form-control" Readonly></div>
</div>
</form>
</body>
</html>

<script type="text/javascript">
$("#volume").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

$("#harga").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

</script>

[/code]

Berikut tampilan dari hasil kalkulasi textbox di atas setelah dijalankan dari web browser.


calculate-textbox-jquery-html.jpg

Ini adalah script dari jquery di atas yang digunakan untuk menghitung textbox secara otomatis menggunakan event/function keyup :


[code language="html"]

<script type="text/javascript">
$("#volume").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

$("#harga").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

[/code]

 

Ok guys, thanks for reading my article, I hope this short explanation can help you. Bye. Wanna see the video ? Thanks for watching, don't forget to like, share and subscribe. It's free.

https://www.youtube.com/watch?v=zOvwcNyuGq4

Comments

Popular posts from this blog

Tips Jitu Cara Mengatasi Error Pada Saat Compile Aplikasi Menggunakan Visual Basic 6

Sebenarnya ada banyak sekali nih project yang harus saya kerjakan dikantor. Namun terkadang apa yang kita rencanakan sering kali berbeda dengan kenyataan. Maksud hati ingin focus dulu ke satu project, tapi karena adanya satu dan lain hal, akhirnya terpaksa deh harus melakukan modifikasi dan membuka project lama yang sebenarnya saya sudah malas untuk berhubungan lagi dengannya :) Project ini sudah dibangun dari awal tahun 2000-an, jauh sebelum saya join. Ya intinya saya dapat warisannya lah seperti itu. Di bangun masih dengan menggunakan vb5-vb6 waktu itu. Sekarang sudah tahun 2016. Jadi sudah lama ya sob. Sudah ketinggalan jaman lah kurang lebih. Meskipun sudah tua, tapi menurut saya visual basic tetap menjadi bahasa pemrograman yang masih powerful. Masalah Kompatibilitas Nah masalah terbesar dalam menggunakan program-program lawas seperti itu biasanya ada pada kompatibilitas component-componentnya. Karena hardware dan os yang kita gunakan biasanya akan berubah seiring waktu. Jika soba...

Cara mudah membuat gambar animasi bergerak

Inspirasi itu memang kadang bisa datang tiba-tiba tanpa mengenal waktu, tempat dan dari mana kamu mendapatkannya, bener ngga sob ? Contohnya tadi siang pas kebetulan lagi makan tiba-tiba sahabat nelpon dan menanyakan bagaimana caranya bikin banner. Mau ngejelasin caranya lewat telpon sepertinya terlalu panjang deh jelasinnya. Yang ada nanti malah ngga jadi makan. Yo wis diposting aja ke blog. Biar ilmunya bisa dinikmati oleh banyak orang dan pahala saya bertambah. Aamiin. Sebelumnya saya sudah pernah sharing mengenai cara mudah membuat logo . Kali ini saya juga akan sharing bagaimana caranya membuat sebuah gambar animasi bergerak yang bisa kamu jadikan sebagai banner atau iklan di website kamu. Buat kamu yang hobby gonta-ganti dp bbm, cara ini juga bisa kamu gunakan untuk membuat gambar animasi yang lucu dan menarik. Tipe file gambar yang biasanya digunakan untuk membuat gambar animasi bergerak adalah Graphics Interchange Format ( GIF ) yang merupakan format grafis yang paling sering ...

Aplikasi Database CRUD (VB6 + Ms. Access + Crystal Report 8)

Assalamualaikum wr. wb. sobat yadishare, apa kabar ? Di artikel kali ini saya akan membagikan tutorial tentang bagaimana cara membuat aplikasi CRUD (create, read, update, dan delete) menggunakan aplikasi atau bahasa pemrograman visual basic 6.0 dan database yang akan saya gunakan adalah database microsoft access. Untuk pembuatan laporannya nanti saya akan menggunakan aplikasi crystal report versi 8. Oke topiknya kali ini adalah membuat aplikasi crud sederhana tentang data pegawai. Namun di dalam aplikasi ini nanti teman-teman akan mempunyai opsi yang cukup lengkap. Selain ada fitur crud dan filtering data, teman-teman bisa langsung mencetak laporannya ke dalam printer. Keren kan ??? Ok langsung saja kita mulai tutorialnya. Untuk membuat aplikasi crud ini, dibutuhkan sebuah database microsoft access. Nah untuk mempersingkat waktu, berhubung saya sudah membuatkan tutorialnya di artikel dan video saya sebelumnya, jadi saya tidak akan bahas lagi disini. Teman-teman bisa langsung b...