Membuat Form Dinamis Meggunakan Bootstrap
Jurnalcode.com


Jurnalcode : kali ini saya akan menulis sebuah artikel bagaimana membuuat sebuah form dinamis menggunakan bootstrap . Form Dinamis adalah form yang dapat di tambah dan dikurangi tanpa harus menginput data satu per satu . Biasa metode ini digunakan saat kita akan melakukan multiple insert Data dalam sekali submit .   Baiklah langsung saja kita bahas bagaiaman membuat Form Dinamis Meggunakan Bootstrap.

Hal pertama yang harus kita lakukan adalah membuat sebuah file HTML untuk membuat sebuah form , perhatikan code berikut :

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https:/netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https:/code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">
	<div class="row">
		<h2>Dinamis Form</h2>
	</div>
    <div class="row">
        <h3 class="text-center text-primary">Membuat Dinamis Form Jurnalcode</h3>
        <div class="col-md-12">
            <table class="table table-hover" id="dinamis">
                <thead>
                    <tr>
                        <th>Nama Lengkap</th>
                        <th>Alamat</th>
                        <th>Kelas</th>
                        <th>Telephone</th>
                        <th>
                            <button type="button" class="btn btn-blue add-row">+</button></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>

                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>

                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

 

Kemudia silahkan sisipkan sedikit codingan javasript untuk memberikan kondisi tambah dan kurangi jumlah form . lihat code dibawah ini :

<script>
$(function () {
    $('#dinamis .add-row').click(function () {
        var template = '<tr><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><button type="button" class="btn btn-danger delete-row">-</button></td></tr>';
        $('#dinamis tbody').append(template);
    });

    $('#dinamis ').on('click', '.delete-row', function () {
        $(this).parent().parent().remove();
    });
})
</script>

 

Nah Kode lengkapnya seperti ini . dan silahkan copy semua code dibawah dan jalankan do browser anda :

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https:/netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https:/code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
    $('#dinamis .add-row').click(function () {
        var template = '<tr><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><button type="button" class="btn btn-danger delete-row">-</button></td></tr>';
        $('#dinamis tbody').append(template);
    });

    $('#dinamis').on('click', '.delete-row', function () {
        $(this).parent().parent().remove();
    });
})
</script>
<div class="container">
	<div class="row">
		<h2>Dinamis Form</h2>
	</div>
    <div class="row">
        <h3 class="text-center text-primary">Membuat Dinamis Form Jurnalcode</h3>
        <div class="col-md-12">
            <table class="table table-hover" id="dinamis">
                <thead>
                    <tr>
                        <th>Nama Lengkap</th>
                        <th>Alamat</th>
                        <th>Kelas</th>
                        <th>Telephone</th>
                        <th>
                            <button type="button" class="btn btn-blue add-row">+</button></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>

                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>

                    </tr>
                    <tr>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <input class="form-control" type="text"></td>
                        <td>
                            <button type="button" class="btn btn-danger delete-row">-</button></td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

 

Oke Selamat Berkreasi dan silahkan dicoba

 

Untuk demo nya silahkan LIHAT DISINI

.

Ayo Komentar