Cara Mengulang Form Inputan dengan jQuery

Jadi disini saya akan mempunyai sebuah inputan nama dan email dimana inputan nama dan email itu bisa kita tambahkan lagi formnya, jadi kita bisa sekaligus untuk memasukan nama dan emailnya, dengan cara mengulang form inputan dengan jQuery, jadi jangan kemana-mana simak terus ya teman-teman.

Untuk kasus cara mengulang form inputan dengan jQuery, disini saya mempunyai sebuah button ada add dan ada remove jadi untuk add itu untuk menambahkan formnya, dan remove itu ketika kita menambahkan jika kita tidak mengurung kan menambahkannya, teman-teman bisa klik button removenya seperti itu, dan cara ini saya temukan di jqueryscript dimana saya tinggal menggunakannya saja, teman-teman juga bisa lihat sendiri disana banyak macamnya, oke langsung saja

<div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <!-- Repeater Html Start -->
                <div id="repeater">
                    <!-- Repeater Heading -->
                    <div class="repeater-heading">
                        <h5 class="pull-left">Cara Mengulang Form Inputan dengan jQuery</h5>
                        <button class="btn btn-primary pt-5 pull-right repeater-add-btn">
                            Add
                        </button>
                    </div>
                    <div class="clearfix"></div>
                    <!-- Repeater Items -->
                    <div class="items" data-group="test">
                        <!-- Repeater Content -->
                        <div class="item-content">
                            <div class="form-group">
                                <label for="inputEmail" class="col-lg-2 control-label">Name</label>
                                <div class="col-lg-10">
                                    <input type="text" class="form-control" id="inputName" placeholder="Name" data-name="name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                                <div class="col-lg-10">
                                    <input type="text" class="form-control" id="inputEmail" placeholder="Email" data-skip-name="true" data-name="email">
                                </div>
                            </div>
                        </div>
                        <!-- Repeater Remove Btn -->
                        <div class="pull-right repeater-remove-btn">
                            <button class="btn btn-danger remove-btn">
                                Remove
                            </button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                <!-- Repeater End -->
            </div>
        </div>
    </div>
    </div>

<h5 class="pull-left">Cara Mengulang Form Inputan dengan jQuery</h5>

Add

</button>

</div>

</div>

<label for="inputEmail" class="col-lg-2 control-label">Email</label>

</div>

Remove

</button>

</div>

</div>

</div>

Disini saya menggunakan sebuah bootstrap jika teman-teman perhatikan ada sebuah class items parent dengan class items itulah yang akan kita ulang-ulang, dan karena ini sebut sebagai plugin jadi disini saya tinggal memanggil

$("#repeater").createRepeater({
   showFirstItemToDefault: true,
});

$("#repeater").createRepeater({

showFirstItemToDefault: true,

});

dimana dengan cara itu kita sudah berhasil mengkatifkan cara perulangan form fieldnya, script itu jika kita lihat terdapat kode yang sangat panjang jika teman-teman ingin melihatnya, bisa lihat disini

 jQuery.fn.extend({
    createRepeater: function (options = {}) {
        var hasOption = function (optionKey) {
            return options.hasOwnProperty(optionKey);
        };

        var option = function (optionKey) {
            return options[optionKey];
        };

        var generateId = function (string) {
            return string
                .replace(/\[/g, '_')
                .replace(/\]/g, '')
                .toLowerCase();
        };

        var addItem = function (items, key, fresh = true) {
            var itemContent = items;
            var group = itemContent.data("group");
            var item = itemContent;
            var input = item.find('input,select');

            input.each(function (index, el) {
                var attrName = $(el).data('name');
                var skipName = $(el).data('skip-name');
                if (skipName != true) {
                    $(el).attr("name", group + "[" + key + "]" + "[" + attrName + "]");
                } else {
                    if (attrName != 'undefined') {
                        $(el).attr("name", attrName);
                    }
                }
                if (fresh == true) {
                    $(el).attr('value', '');
                }

                $(el).attr('id', generateId($(el).attr('name')));
                $(el).parent().find('label').attr('for', generateId($(el).attr('name')));
            })

            var itemClone = items;

            /* Handling remove btn */
            var removeButton = itemClone.find('.remove-btn');

            if (key == 0) {
                removeButton.attr('disabled', true);
            } else {
                removeButton.attr('disabled', false);
            }

            removeButton.attr('onclick', '$(this).parents(\'.items\').remove()');

            var newItem = $("<div class='items'>" + itemClone.html() + "<div/>");
            newItem.attr('data-index', key)

            newItem.appendTo(repeater);
        };

        /* find elements */
        var repeater = this;
        var items = repeater.find(".items");
        var key = 0;
        var addButton = repeater.find('.repeater-add-btn');

        items.each(function (index, item) {
            items.remove();
            if (hasOption('showFirstItemToDefault') && option('showFirstItemToDefault') == true) {
                addItem($(item), key);
                key++;
            } else {
                if (items.length > 1) {
                    addItem($(item), key);
                    key++;
                }
            }
        });

        /* handle click and add items */
        addButton.on("click", function () {
            addItem($(items[0]), key);
            key++;
        });
    }
});

jQuery.fn.extend({

createRepeater: function (options = {}) {

var hasOption = function (optionKey) {

return options.hasOwnProperty(optionKey);

};

var option = function (optionKey) {

return options[optionKey];

};

var generateId = function (string) {

return string

.replace(/\[/g, '_')

.replace(/\]/g, '')

.toLowerCase();

};

var addItem = function (items, key, fresh = true) {

var itemContent = items;

var group = itemContent.data("group");

var item = itemContent;

var input = item.find('input,select');

input.each(function (index, el) {

var attrName = $(el).data('name');

var skipName = $(el).data('skip-name');

if (skipName != true) {

$(el).attr("name", group + "[" + key + "]" + "[" + attrName + "]");

} else {

if (attrName != 'undefined') {

$(el).attr("name", attrName);

}

if (fresh == true) {

$(el).attr('value', '');

}

$(el).attr('id', generateId($(el).attr('name')));

$(el).parent().find('label').attr('for', generateId($(el).attr('name')));

})

var itemClone = items;

/* Handling remove btn */

var removeButton = itemClone.find('.remove-btn');

if (key == 0) {

removeButton.attr('disabled', true);

} else {

removeButton.attr('disabled', false);

}

removeButton.attr('onclick', '$(this).parents(\'.items\').remove()');

var newItem = $("<div class='items'>" + itemClone.html() + "<div/>");

newItem.attr('data-index', key)

newItem.appendTo(repeater);

};

/* find elements */

var repeater = this;

var items = repeater.find(".items");

var key = 0;

var addButton = repeater.find('.repeater-add-btn');

items.each(function (index, item) {

items.remove();

if (hasOption('showFirstItemToDefault') && option('showFirstItemToDefault') == true) {

addItem($(item), key);

key++;

} else {

if (items.length > 1) {

addItem($(item), key);

key++;

}

});

/* handle click and add items */

addButton.on("click", function () {

addItem($(items[0]), key);

key++;

});

}

});

Jadi ini ada scriptnya karena masih tidak sampai ratusan maka saya masih relevan untuk menampilkannya, tapi jika teman-teman ingin langsung melihatnya bisa langsung di websitenya jqueryscript ya, oke sekarang kita lihat hasilnya

jadi untuk yang pertama ada default dimana kita belum menambahkan fieldnya yang selanjutnya itu kita sudah menambahkannya bisa dilihat ya, oke saya rasa cukup sampai disini belajar kita tentang cara mengulang form inputan dengan jQuery, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Facebook DUMET School

Categories