Cara Membuat Form Dinamis Menggunakan JavaScript

Halo teman-teman di panduan kali ini saya akan menjelaskan mengenai Cara Merancang Form Dinamis Menggunakan JavaScript, form dinamis berfungsi bagi mempermudah user bagi memasukan sebuah data kedalam sebuah form dengan nilai inputan lebih dari satu atau banyak. Misalkan seperti hobi, nomor telephone, dan lain-lain, atau sekiranya kita mempunyai sebuah blog ecommerce  tentu blog tersebut mempunyai banyak barang jadi bagi inputan barang tersebut kita pun dapat menggunakan Form dinamis ini.

Oke teman-teman biar lebih paham lagi kita seketika saja masuk ke study casenya mengenai Cara Merancang Form Dinamis Menggunakan JavaScript.

Langkah pertama-tama kita akan masukan CDN yang terdapat di getbootstrap.com seperti script yang terdapat dibawah ini.

<!-- Latest compiled and minified CSS -->
        <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u crossorigin=anonymous>

        <!-- Optional theme -->
        <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css integrity=sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp crossorigin=anonymous>

        <!-- Latest compiled and minified JavaScript -->
        <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymous></script>

Berikutnya kita akan bikin sebuah form seperti script dibawah ini.

              <form action=index.php method=post>
                    <table class=table table-condensed>
                        <thead>
                            <tr>
                                <th width=300px>Jenis Barang</th>
                                <th width=100px>Jumlah</th>
                                <th width=80px></th>
                            </tr>
                        </thead>
                        <!--elemet selaku target append-->
                        <tbody id=itemlist>
                            <tr>
                                <td><input name=jenis_input[0] class=form-control /></td>
                                <td><input name=jumlah_input[0] class=form-control /></td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>
                                    <button class=btn btn-small btn-default onclick=additem(); return false><i class=glyphicon glyphicon-plus></i></button>
                                    <button name=submit class=btn btn-small btn-primary><i class=glyphicon glyphicon-ok></i></button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </form>

Dan yang terakhir kita akan merancang prosesnya menggunakan javascript seperti dibawah ini

 <script>
            var i = 1;
            function additem() {
                var itemlist = document.getElementById('itemlist');
                
//                merancang element
                var row = document.createElement('tr');
                var jenis = document.createElement('td');
                var jumlah = document.createElement('td');
                var aksi = document.createElement('td');

//                meng append element
                itemlist.appendChild(row);
                row.appendChild(jenis);
                row.appendChild(jumlah);
                row.appendChild(aksi);

//                merancang element input
                var jenis_input = document.createElement('input');
                jenis_input.setAttribute('name', 'jenis_input[' + i + ']');
                jenis_input.setAttribute('class', 'form-control');

                var jumlah_input = document.createElement('input');
                jumlah_input.setAttribute('name', 'jumlah_input[' + i + ']');
                jumlah_input.setAttribute('class', 'form-control');

                var hapus = document.createElement('span');

                jenis.appendChild(jenis_input);
                jumlah.appendChild(jumlah_input);
                aksi.appendChild(hapus);

                hapus.innerHTML = '<button class=btn btn-small btn-default><i class=glyphicon glyphicon-trash></i></button>';
//                Aksi Delete
                hapus.onclick = function () {
                    row.parentNode.removeChild(row);
                };

                i++;
            }
        </script>

Bagi script lengkapnya teman-teman dapat simpan script dibawah ini dengan nama index.php

<!doctype html>
<html>
    <head>
        <title>Cara Merancang Form Dinamis Menggunakan JavaScript</title>
        <style>
            body{
                padding: 15px
            }
            input[type=text]{
                margin-bottom: 0px !important;
            }
        </style>
       <!-- Latest compiled and minified CSS -->
        <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u crossorigin=anonymous>

        <!-- Optional theme -->
        <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css integrity=sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp crossorigin=anonymous>

        <!-- Latest compiled and minified JavaScript -->
        <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymous></script>
    </head>
    <body>
        <div class=row-fluid>
            <div class=span6>
                <form action=index.php method=post>
                    <table class=table table-condensed>
                        <thead>
                            <tr>
                                <th width=300px>Jenis Barang</th>
                                <th width=100px>Jumlah</th>
                                <th width=80px></th>
                            </tr>
                        </thead>
                        <!--elemet selaku target append-->
                        <tbody id=itemlist>
                            <tr>
                                <td><input name=jenis_input[0] class=form-control /></td>
                                <td><input name=jumlah_input[0] class=form-control /></td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>
                                    <button class=btn btn-small btn-default onclick=additem(); return false><i class=glyphicon glyphicon-plus></i></button>
                                    <button name=submit class=btn btn-small btn-primary><i class=glyphicon glyphicon-ok></i></button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </form>
            </div>
            <div class=span6>
                <p>Hasil :</p>
                <p>
                    <?php
                    if (isset($_POST['submit'])) {
                        $jenis = $_POST['jenis_input'];
                        $jumlah = $_POST['jumlah_input'];

                        foreach ($jenis as $key => $j) {
                            echo <p> . $j .  :  . $jumlah[$key] . </p>;
                        }
                    }
                    ?>
                </p>
            </div>
        </div>
        <script>
            var i = 1;
            function additem() {
                var itemlist = document.getElementById('itemlist');
                
//                merancang element
                var row = document.createElement('tr');
                var jenis = document.createElement('td');
                var jumlah = document.createElement('td');
                var aksi = document.createElement('td');

//                meng append element
                itemlist.appendChild(row);
                row.appendChild(jenis);
                row.appendChild(jumlah);
                row.appendChild(aksi);

//                merancang element input
                var jenis_input = document.createElement('input');
                jenis_input.setAttribute('name', 'jenis_input[' + i + ']');
                jenis_input.setAttribute('class', 'form-control');

                var jumlah_input = document.createElement('input');
                jumlah_input.setAttribute('name', 'jumlah_input[' + i + ']');
                jumlah_input.setAttribute('class', 'form-control');

                var hapus = document.createElement('span');

                jenis.appendChild(jenis_input);
                jumlah.appendChild(jumlah_input);
                aksi.appendChild(hapus);

                hapus.innerHTML = '<button class=btn btn-small btn-default><i class=glyphicon glyphicon-trash></i></button>';
//                Aksi Delete
                hapus.onclick = function () {
                    row.parentNode.removeChild(row);
                };

                i++;
            }
        </script>
    </body>
</html>

Bila kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini

Bagaimana teman-teman lumayan gampang bukan Cara Merancang Form Dinamis Menggunakan JavaScript, lumayan demikianlah dulu panduan saya kali ini mengenai Cara Merancang Form Dinamis Menggunakan JavaScript, semoga bermanfaat

Terimakasih

Sumber https://kursuswebsite.org