Cara Menampilkan Value Tag Input Menggunakan alert()

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang  Cara Menampilkan Value Tag Input Menggunakan alert(). Mungkin sebagian dari teman – teman sudah banyak yang tahu bahkan sudah familiar dengan yang namanya fungsi val() dan alert() pada javascript, tetapi tidak apa – apa karena banyak juga yang dari teman – teman kita yang belum tahu bagaimana cara mengambil sebuah nilai atau value dari tag input lalu menampilkan kedalam sebuah jendela popup alert().

Metode ini biasa saya gunakan untuk mengecek sebuah program pengambilan nilai dari tag html input atau yang lainnya, ketika baris program pengambilan nilai dalam tag html saya berhasil, maka jendela alert akan muncul atau menampilkan nilai yang saya ambil. Jadi pada artikel kali ini sekedar tips dan trik untuk mengecek apakah baris program kita berhasil mengambil nilai dari tag input meski sangat sederhana bagi yang udah expert tentang javascript tapi bagi pemula mungkin sangat berguna.

Oke langsung saja kita praktekkan bagaimana cara membuatnya, silahkan teman – teman lihat di bawah ini

Script HTML form untuk tampilannya.

form.html

<html>
	<head>
		<title>Cara Menampilkan Value Tag Input Menggunakan Alert</title>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-sm-12">

					<h3>Cara Menampilkan Value Tag Input Menggunakan Alert</h3>	

					<form>
					  <div class="form-group">
					    <label for="exampleInputEmail1">Email address</label>
					    <input type="email" class="form-control" id="user" aria-describedby="emailHelp" placeholder="Enter email">
					   
					  </div>
					  <div class="form-group">
					    <label for="exampleInputPassword1">Password</label>
					    <input type="password" class="form-control" id="pass" placeholder="Password">
					  </div>

					  <button type="submit" class="btn btn-primary">Submit</button>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>

Oke dari script di atas ketika akan membuat sebuah tampilan form menggunakan bootstrap, form sederhana dimana nantinya kita akan mengambil nilai dari setiap inputan yang diinputkan oleh user dan menampilkannya kedalam alert(), kurang lebih tampilannya seperti di bawah ini;

Cara Menampilkan Value Tag Input Menggunakan alert()

Oke kalau sudah kita akan lanjut bikin script untuk proses pengambilan datanya silahkan lihat script di bawah ini;

<script>
			$(document).ready(function(){

				$('.container').css({'background':'#81ecec', 'color':'#2d3436', 'padding':'5px', 'margin-top':'10px'});
				$('h3').css({'color':'red', 'text-align':'center'});

				$("button").click(function(){
					var user = $('#user').val();
					var pass = $('#pass').val();

					alert('Email = ' +user + '\n\n password = ' + pass );
				})
			})
		</script>

Untuk meilhat hasilnya silahkan teman – teman coba praktekkan sendiri,  Oke itulah tadi pembahasan saya tentang Cara Menampilkan Value Tag Input Menggunakan alert(), semoga bermanfaat.