Jquery button tidak berfungsi

Ditanyakan pada tanggal 3 August 2019 oleh Ilyas fardian
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0" >
    <title>latihan web jquery&bootstrap</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <!-- aksi untuk input hobi -->
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn-add").on("click", function(){
                var hobi = $("#hobi").val();
                $("ul").append('<li>'+ hobi +"</li>");
            });
        });
    </script>
</head>
<body>
    <!-- tabel input hobi siswa -->
    <div class="cotainer">
        <h2>msukkan hobi</h2>
        <ul>
            <li>volly</li>
        </ul>
        <form  class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-2" for="input">Hobi:</label>
                <div class="col-sm-8">
                    <input id="hobi" type="text" name="input" class="form-control">

                </div>

            </div>

            <div id="btn-add" class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-success">tambah</button>
                </div>
            </div>
        </form>

</body>
</html>

pada kode di atas saat aya menambah value pada field input value tsb sempat ter add namun hilang lagi seketika mohon bantuan

1 JAWABAN / 2 KOMENTAR

Generic placeholder image
Ahmad Oriza menjawab pada tanggal 7 August 2019

Ini terjadi karena posisi button ada di dalam form. Form menyebabkan melakukan request HTTP sehingga data kembali ke reset mas. Solusinya, keluarkan posisi button keluar form agar tidak dianggap submit.

Jadinya kodenya seperti ini :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0" >
    <title>Latihan web jquery&bootstrap</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="cotainer">
        <h2>Masukkan hobi</h2>
        <ul>
            <li>Volly</li>
        </ul>

        <div class="form-group">
            <label class="control-label col-sm-2" for="input">Hobi:</label>
            <div class="col-sm-8">
                <input id="hobi" type="text" name="input" class="form-control">
            </div>
        </div>

        <div class="form-group mt-3">
            <div class="col-sm-offset-2 col-sm-10">
                <button id="btn-add" class="btn btn-success">Tambah</button>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn-add").on("click", function(){
                var hobi = $("#hobi").val();
                $('ul').append('<li>' + hobi + '</li>');
            });
        });
    </script>
</body>
</html>
Comment ..

siap, kode berhasil berjalan mas tapi bisa jelaskan lebih rinci mengpa terjadi demikian ?? atau ada referensi yg bisa membantu saya??

Dikomentari pada tanggal 7 August 2019 oleh Ilyas fardian
Comment ..

Jadi ketika button ada didalam FORM dia kan melakukan submit request, sehingga menyebabkan halaman pindah / refresh sendiri. List nya karena sifatnya tidak permanen ketika refresh akan kembali seperti semula.

Untuk mengujinya coba mas pasang kembali tag form dan pasang atribut action kemudian isi action dengan url yang mengarah ke halaman lain. Pasti ketika button dipencet nanti halamannya akan pindah.

Dikomentari pada tanggal 8 August 2019 oleh Ahmad Oriza