Cara Mendapatkan Nilai Input dengan JavaScript
Berdasarkan pengalaman pribadi mengunakan javascript sangatlah mempermudah dan mempercatik semua fitur dalam pemrograman. kali ini admin akan membahas dasar penggunana DOM (Document Object Module).
DOM merupanakan sebuah antarmuka (program interface) untuk html, xml, dan svg yang bersifat platform dan bahasa independen.
Dapatkan nilai input teks
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form action="tes.php">
<h1>form input</h1>
<input type="text" name="username" id="username">
<input type="email" name="email" id="email">
<button type="button" onclick="ambildata()">Submit</button>
</form>
<div id="tampil">
<p id="tampil_username"></p>
<p id="tampil_email"></p>
</div>
</body>
<script>
function ambildata() {
var ini_username = document.getElementById('username').value;
var ini_password = document.getElementById('email').value;
document.getElementById("tampil_username").innerHTML =
"nama = "+ ini_username;
document.getElementById("tampil_email").innerHTML =
"password = " + ini_password;
}
</script>
</html>
maka akan menampilkan layout seperti berikut :
jika di input:
<label>nama</label>
<input type="text" name="username" id="username">
<label>password</label>
<input type="email" name="email" id="email">
Dari kode di atas memiliki id yang berbeda yaitu "username" dan "email"
lalu javascript menangkap id tersebut sebagai parameter untuk mengambil nilai / value
<button type="button" onclick="ambildata()">Submit</button>
Lalu mengunakan fungsi ONCLIK "ambildata()" pengertian dari onclick = adalah event jika sebuah element html di klik akan memberikan respon tertentu.
<script>
function ambildata() {
var ini_username = document.getElementById('username').value;
var ini_password = document.getElementById('email').value;
document.getElementById("tampil_username").innerHTML =
"nama = " + ini_username;
document.getElementById("tampil_email").innerHTML =
"password = " + ini_password;
}
</script>
pada fungsi ambildata
terdapat 2 variable yaitu "ini_username " dan "ini_password " yang berguna untuk menampung value atau nilai yang akan di input
var ini_username = document.getElementById('username').value;
var ini_password = document.getElementById('email').value;
Setelah data variabel di tampung lalu di tampilkan berdasarkan ID mengunakan ke tiap tiap paragraf ( "<p>") mengunakan innerHTML
document.getElementById("tampil_username").innerHTML = "nama = " + ini_username;
document.getElementById("tampil_email").innerHTML = "password = " + ini_password;
dan di tampilkan ke tiap tiap paragraf :
<p id="tampil_username"></p>
<p id="tampil_email"></p>
jika ada kesulitan silahkan bertanya di kolom komentar
