jquery basic get value form

cara mengambil nilai dari berbagai jenis value dari form

by trisna dev

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
<input id='isiNama' type="text" placeholder="Nama">
    <input id='isiUmur' type="number" placeholder="Umur">

    <select id='pilihHobi'>
        <option value=''>-- Pilih Hobi --</option>
        <option value='sepak bola'>Sepak Bola</option>
        <option value='bulu tangkis'>Bulu Tangkis</option>
        <option value='bola basket'>Bola Basket</option>
    </select>

    <p>Jenis Kelamin</p>
    <input class='jk' type='radio' name='jk' value='laki-laki' checked>Laki-laki
    <input class='jk' type='radio' name='jk' value='wanita'>Wanita
    <br>

    <p>Pilih Kemampuan minimal satu</p>
    <input class='skill' type='checkbox' value='java' checked>Java
    <input class='skill' type='checkbox' value='javascript'>Javascript
    <input class='skill' type='checkbox' value='php'>PHP
    <input class='skill' type='checkbox' value='ruby'>Ruby
    <input class='skill' type='checkbox' value='golang'>Golang
    <input class='skill' type='checkbox' value='python'>Python
    <br>

    <button id='btnSubmit'>Submit</button>

    <div id='hasil'>
    </div>
</body>

</html>

JavaScript

$(document).ready(function () {
            $('#btnSubmit').click(function () {
                var nama = $('#isiNama').val();
                var umur = $('#isiUmur').val();
                var jk = $('.jk:checked').val();
                var hobi = $('#pilihHobi').val();

                if (nama == '' || umur == '' || hobi == '') {
                    alert('Isi form dengan benar !');
                } else if ($('.skill:checked').length != 0) {
                    var html = `
                    <p>Nama : ${nama}</p>
                    <p>Umur : ${umur}</p>
                    <p>Jenis Kelamin : ${jk}</p>
                    <p>Hobi : ${hobi}</p>
                    <p>Kemampuan yang di miliki</p>
                    <ol>
                    `;

                    $('.skill:checked').each(function () {
                        html += `
                        <li>${$(this).val()}</li>
                        `;
                    });

                    html += `</ol>`
                    $('#hasil').html(html);
                } else {
                    alert('Pilih skill minimal satu !');
                }
            });
        });