Cara Mengambil Value Form Input Dengan Fungsi Val jQuery
Halo Dumenity, selamat datang kembali di laman tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di pembahasan tips – tips seputar dunia laman, di kesempatan kali ini saya akan memberikan tips mengenai Cara Mengambil Value Form Input Dengan Fungsi Val jQuery dimana di latihan kali ini saya akan mengambil value dari sebuah inputan form kemudian kita akan tampilkan di tag html. Pada hal ini saya menyiapkan tag html ol yang kemudian kita masukan tag li dan juga hasil inputan dari form input, pastinya dengan menggunakan kegunaan val() jQuery yang berfungsi bagi mengambil sebuah nilai atau value dari form input.
Mari seketika saja kita praktekkan Cara Mengambil Value Form Input Dengan Fungsi Val jQuery teman – teman siapkan text editornya dan siapkan pun library jQuery nya dapat kalian ambil dari jQuery.com kemudian ketikkan script html nya seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<title><strong>Cara Mengambil Value Form Input Dengan Guna Val jQuery</strong></title>
</head>
<body>
<div>
<input type=text name= id=save>
<button>Save</button>
</div>
<ol></ol>
</body>
</html>
Dan masukkan css nya bagi layout hasil nya
* {padding: 0; margin: 0}
div {margin: 20px;}
button {padding: 3px 10px}
input {padding: 3px 10px}
ol {padding: 3px 10px;margin-left: 25px}
li {cursor: pointer; width: 100px}Dan save dengan nama index.html, lalu kita masukkan library jQuery nya
https://code.jquery.com/jquery-3.3.1.min.js
Dan kita bikin kegunaan bagi mengambil data dari form, ketika button di klik karenanya value form input akan kita ambil dengan kegunaan val() pada hal ini saya memberikan id=”save” dan ketikkan script di bawah ini
$(document).ready(function(){
$('button').click(function(){
var nama = $('#save').val();
if(nama == ''){
alert('tak boleh kosong')
}else{
$('ol').append('<li>'+ nama +'</li>');
var ok = $('ol').children('li').length;
}
});
})Di script di atas pun saya berikan validasi, apabila button diklik dengan value form kosong karenanya ada notifikasi alert(‘tak boleh kosong’). Dan apabila ada value karenanya akan di proses dan tambahkan tag li bagi di tampilkan di pada tag ol. Seandainya telah save dan jalankan di borwsernya, lalu isi form nya
Hasilnya seperti gambar di atas ini, akan ada nomor otomatis karena saya menggunakan tag ol. Seperti itulah Cara Mengambil Value Form Input Dengan Fungsi Val jQuery demikian di artikel kali ini dan kita jumpa kembali di artikel yang akan datang pastinya dengan tips dan trik lainnya seputar dunia laman. Terimakasih dan hingga jumpa.
Semoga bermanfaat.
Sumber https://kursuswebsite.org
