Cara Mengambil Value Form Input Dengan Fungsi Val jQuery

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips – tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Mengambil Value Form Input Dengan Fungsi Val jQuery dimana pada latihan kali ini saya akan mengambil value dari sebuah inputan form kemudian kita akan tampilkan pada tag html. Dalam hal ini saya menyiapkan tag html ol yang kemudian kita masukan tag li beserta hasil inputan dari form input, tentunya dengan menggunakan fungsi val() jQuery yang berfungsi untuk mengambil sebuah nilai atau value dari form input.

Mari langsung saja kita praktekkan Cara Mengambil Value Form Input Dengan Fungsi Val jQuery teman – teman siapkan text editornya dan siapkan juga library jQuery nya bisa 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 Fungsi 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 untuk 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 buat fungsi untuk mengambil data dari form, ketika button di klik maka value form input akan kita ambil dengan fungsi val() dalam 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('tidak boleh kosong')
        }else{
        $('ol').append('<li>'+ nama +'</li>');
        var ok = $('ol').children('li').length;  
    }
    });
})

Pada script di atas juga saya berikan validasi, jika button diklik dengan value form kosong maka ada notifikasi alert(‘tidak boleh kosong’). Dan jika ada value maka akan di proses dan tambahkan tag li untuk di tampilkan di dalam tag ol. Jika sudah save dan jalankan pada borwsernya, lalu isi form nya

Hasilnya seperti gambar di atas ini, akan ada nomor otomatis karena saya menggunakan tag ol. Itulah Cara Mengambil Value Form Input Dengan Fungsi Val jQuery sekian pada artikel kali ini dan kita jumpa kembali pada artikel yang akan datang tentunya dengan tips dan trik lainnya seputar dunia website. Terimakasih dan sampai jumpa.

Semoga bermanfaat.

Cara Mengambil Value Form Input Dengan Fungsi Val jQuery

Kategori