Cara Membuat Field Banyak di Input Menggunakan Jquery

Membuat field banyak di input sering kita jumpai saat kita ingin menambahkan hastag di youtube atau di beberapa marketplace. Dan kali ini saya akan membahas tentang Cara Membuat Field Banyak di Input Menggunakan Jquery.

Struktur html Membuat Field Banyak di Input Menggunakan Jquery sebenernya menggunakan tag div dimana div ini berisi beberapa span untuk memunculkan semua data yang telah di input dan satu tag input di dalamnya, sehingga terlihat seperti tag input yang memiliki banyak field. Pada artikle kali ini saya akan menggunakan studi kasus hampir sama seperti pemberian hastag yang ada pada akun youtube.

Berikut ini adalah struktur htmlnya.

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Cara Membuat Field Banyak di Input Menggunakan Jquery</title>

    <style>

                .tutup{

                                cursor: pointer;

                }

    </style>

  </head>

  <body>

    <div class="container">

                <div class="row">

                                <div class="col">

                                                <h1>Cara Membuat Field Banyak di Input Menggunakan Jquery</h1>

                                                <div class="input border p-2">

                                                                                <input type="text" placeholder="Tambah Hastag" class="border-0" id="inputhastag">

                                                    </div>

                                </div>

                </div>

    </div>
</body>

</html>

Jika sudah selesai maka kita akan membuat script jquerynya seperti script di bawah ini.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script>

                $(document).ready(function(){

                                var values = [];

                                $("#inputhastag").keypress(function( event ) {

                                                  if (event.which ==13) {

                                                    event.preventDefault();

                                                    var value = $(this).val();

                                                    if(value !== ""){           

                                                                    values.push(value);

                                                                    $("#inputhastag").before(`<span class="badge badge-info m-1 p-2">

                                                                                                                                                                                <span class="isi">${value}</span>

                                                                                                                                                                                    <span class="tutup">&times;</span>

                                                                                                                                                                                </span>`); 

                                                                $(this).val("");

                                                    }

                                                  }                                             

                                                });

                                                $(".input").on('click','.tutup',function(){

                                                                var valdel = $(this).prev().text();

                                                                var index = values.indexOf(valdel);

                                                                values.splice(index,1);

                                                                $(this).parent().remove();

                                                                addHastag();

                                               })

                })

    </script>

Script jquery di atas terdapat dua event. Dimana event pertama adalah event keypress dengan event.which ==13 yang berarti ketika kita enter maka hastag akan bertambah. Dan event click untuk menghapus sebuah hastagnya. Dan semua data hastag akan di simpan ke dalam varable values dengan bentuk array. Dimana akan ditambah ketika event keypress enter dijalankan dengan menggunakan metode push dan menghapus data hastag di dalam variable values akan di jalankan ketika melakukan klik pada ikon silang dengan menggunakan metode splice.

Jika di tampilkan di dalam browser maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Membuat Field Banyak di Input Menggunakan Jquery. Semoga bermanfaat dan selamat mencoba.

19 Februari 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat