cara membuat total harga otomatis menggunakan javascript

Pada tutorial kali ini anda akan belajar bagaimana cara membuat total harga otomatis menggunakan javascript .

Hallo semua kembali lagi nih di tutorial dumet school, nah untuk kali ini saya akan membahas tentang javascript lagi setelah kemarin-kemarin saya membahas jquery.

Untuk javascript yang saya bahas kalini adalah bagaimana cara membuat total harga otomatis menggunakan javascript . maksudnya gimana sih ? yang saya maksud dari menghitung total otomatis itu kita membuat sebuah fungsi misal kita sedang berbelanja online dan memasukan barang yang kita inginkan ke dalam shoping cart berserta jumlah harganya kan ? nah saat kita memasukan quantity yang di inginkan saat itu juga harga secara OTOMATIS terjumlah sesuai quantity yang kita inginkan.

nah sekarang kita membuat bagian fungsi menghitung otomatis nya 🙂

silahkan di salin code berikut :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.container{
			width:650px;
			margin: auto;
			border: 1px dotted #blue;
			padding: 10px;
			background: grey;
			color:#fff;
		}

		h2{
			text-align: center;
			text-decoration: underline;


		}

		table{
			background: DeepPink;
			margin:auto;

		}

		td{
			padding: 10px
		}
	</style>
</head>
<body>
	<div class="container">
		<h2>Form Pemesanan buku</h2>
		<table border="1">
			<tr>
				<th>No </th>
				<th>Judul buku</th>
				<th>harga</th>
				<th>jumlah</th>
			</tr>

			<tr>
				<th>1</th>
				<th>algoritma dan pemprograman</th>
				<th>@<input type="text" name="harga" id="algoritma" size="7" value="75000" readonly></th>
				<th>@<input type="number" name="jumlah_algoritma" id="harga_algoritma" size="7" value="0" onchange="total()"></th>
			</tr>

			<tr>
				<th>2</th>
				<th>algoritma dan pemprograman</th>
				<th>@<input type="text" name="harga" id="javascript" size="7" value="46000" readonly></th>
				<th>@<input type="number" name="jumlah_javascript" id="harga_javascript" size="7" value="0" onchange="total()"></th>
			</tr>

			<tr>
				<th>3</th>
				<th>PHP</th>
				<th>@<input type="text" name="harga" id="php" size="7" value="90000" readonly></th>
				<th>@<input type="number" name="jumlah_php" id="harga_php" size="7" value="0" onchange="total()"></th>
			</tr>

			<tr>
				
				<th colspan="3" style="text-align:right">jumlah total</th>
				<th>@<input type="text" name="total_jumlah" id="total" size="7" value="" readonly></th>
			</tr>
		</table>
		<br><br>
		<input type="button" onclick="window.print()" value="cetak">

		<script type="text/javascript">
		function total() {
		var valgoritma = 75000 * parseInt(document.getElementById('harga_algoritma').value);
		var vjavascript = 45000 * parseInt(document.getElementById('harga_javascript').value);
		var vphp = 90000 * parseInt(document.getElementById('harga_php').value);

		var jumlah_harga = valgoritma + vjavascript + vphp;

		document.getElementById('total').value = jumlah_harga;
		}
		
		</script>
	</div>
</body>
</html>

setelah di salin silahkan di jalankan pada browsernya masing-masing maka akan terlihat tampilan form pemesanan sebagai berikut :

silahkan kalian pahami code javascript yang saya berikan tadi , agar bisa kalian kembangkan sendiri lebih dari ini karena ini hanya menghitung jumlah harga secara otomatis saja.

Cara Membuat Total Harga Otomatis Menggunakan Javascript

Kategori