Cara Menambah Text Field dengan Javascript

Cara Menambah Text Field dengan Javascript
0 0
Read Time:3 Minute, 29 Second

Tutorial Cara Menambah Text Field dengan Javascript– hai semua kali ini iniilmu.com akan berbagi cara menambah text field secara dinamis.

Penambahan text field secara dinamis berfungsi untuk mempermudah pengguna jika ingin menginputkan data lebih dari satu data.

langsung saja ikuti source code dibawah ini:

<!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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Iniilmu.com</title>
</head>

<body>
    <div class="container-fluid">
        <div class="card" style="width: 50%;margin-top:10em;margin-left:20em">
            <div class="card-body">
                <h5 class="card-title text-center">TUTORIAL MENAMBAH TEXT FIELD DENGAN JAVASCRIPT</h5>
                <form>
                    <div class="form-group">
                        <label for="nama_barang">Nama Barang</label>
                        <input type="text" name="nama_barang" class="form-control" id="nama_barang" placeholder="Nama Barang" aria-describedby="nama_barang">
                    </div>
                    <button style="margin-bottom: 2em;" onclick="tambah_form(); return false;" type="button" class="btn btn-success">+ Tambah</button>
                    <input type="hidden" id="idf" value="1">
                    <div id="form"></div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <script language="javascript">
        function tambah_form() {
            var idf = document.getElementById("idf").value;
            var stre;
            stre = "<div id='srow" + idf + "'><button class='btn btn-danger' onclick='hapusElemen(\"#srow" + idf + "\"); return false;'>- Hapus</button><div class='form-group'><label for='nama_barang'>Nama Barang</label><input type='text' class='form-control' id='nama_barang' placeholder='Nama Barang' autocomplete='off' name='nama_barang' autocomplete='off'></div></div>";
            $("#form").append(stre);
            idf = (idf - 1) + 2;
            document.getElementById("idf").value = idf;
        }

        function hapusElemen(idf) {
            $(idf).remove();
        }
    </script>
</body>

</html>

Perhatikan source code tersebut

<script language="javascript">
        function tambah_form() {
            var idf = document.getElementById("idf").value;
            var stre;
            stre = "<div id='srow" + idf + "'><button class='btn btn-danger' onclick='hapusElemen(\"#srow" + idf + "\"); return false;'>- Hapus</button><div class='form-group'><label for='nama_barang'>Nama Barang</label><input type='text' class='form-control' id='nama_barang' placeholder='Nama Barang' autocomplete='off' name='nama_barang' autocomplete='off'></div></div>";
            $("#form").append(stre);
            idf = (idf - 1) + 2;
            document.getElementById("idf").value = idf;
        }

        function hapusElemen(idf) {
            $(idf).remove();
        }
    </script>

fungsi tambah_form diatas berfungsi untuk menambahkan text field secara dinamis ketika button tambah di tekan.

Didalam button tambah terdapat event javascript berupa onclik yang berfungsi ketika button tambah ditekan maka akan menjalankan fungsi tambah_form().

<button style="margin-bottom: 2em;" onclick="tambah_form(); return false;" type="button" class="btn btn-success">+ Tambah</button>

Selain memperhatikan button tambah, kalian juga harus memperhatikan

<input type="hidden" id="idf" value="1">

code diatas berfungsi untuk memberikan nilai awal, yang akan memberikan penomoran kepada text field ketika ditambahkan, jadi setiap text field yang baru timbahkan akan memiliki nomor atau id tertentu, nomor tersebut juga digunakan untuk menghapus text field yang ditambahkan tersebut.

<div id="form"></div>

fungsi div diatas berfungsi untuk tempat text field yang ditambahkan, jadi setiap menekan button tambah maka text field yang baru akan bertambah di dalam div tersebut.

jika berhasil menggunakan fungsi diatas maka akan tampil seperti gambar dibawah ini:

Cara menambah text field dengan javascript
Cara menambah text field dengan javascript

Sekian mengenai pembahasan tentang cara menambah text field dengan java script jika masih bingung, kalian bisa download file nya disini.

jangan lupa untuk memberi saran kepada kami agar bisa membuat tutorial yang lebih bermanfaat lagi. terimakasih

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Cara Membuat Combobox Bertingkat Di PHP Previous post Cara Membuat Combobox Bertingkat di PHP
Cara Menambahkan Data Array dengn PHP dan MySQL Next post Cara Menambahkan Data Array dengan PHP dan Mysql

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

One thought on “Cara Menambah Text Field dengan Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *