Repeater

Official Docs

Basic

Nested

Name:

Email:

Number:

Delete

Add New

Advanced

Username:

Email:

Password:

Gender:

Profession:

Delete

Add New

Dynamic

Username:

Email:

Password:

Gender:

Profession:

Add New

Options

Reference	Details
`Repeater`	Creates an interface to add and remove a repeatable group of input elements.
`Initialization`	Add an `id` HTML attribute to wrap the element wrapper that consists of repeated inputs. Then add `data-repeater-item` to define the repeated items. Please refer to the official documentation for all options available.
`Templates`	Repeater uses the first `"data-repeater-item"` as a template for added items.
`Rewritten Name Attributes`	Repeater rewrites your name attributes to avoid collisions within the same form. (since the name attributes will be repeated). In the example below, the name attributes would be renamed `group-a[0][text-input]` and `group-a[1][text-input]`. Checkbox inputs and Multiple Select inputs will have an additional `[]` appended. So for example a checkbox with name `foo` would be mapped to `group-a[0][foo][]`. Names get reindexed if an item is added or deleted.
`repeaterVal`	Get a structured object of repeater values, without submitting the form. The rewritten name attributes of the form `group[index][name]` work well when submitting to a server that knows how to parse this format, but not as well when trying to grab the values via javascript. The `repeaterVal` method can be called on a repeater group and will parse the renamed attributes into something more easily digestible


// Initialize repeaters
initRepeater("#repeaterBasic");
initNestedRepeater("#repeaterNested");
initRepeater("#repeaterAdvanced");

var room = 1;

function initRepeater(selector) {
	$(selector).repeater({
		initEmpty: false,
		defaultValues: {
			"text-input": "foo",
		},
		show: function () {
			$(this).slideDown();
		},
		hide: function (deleteElement) {
			$(this).slideUp(deleteElement);
		},
	});
}

function initNestedRepeater(selector) {
	$(selector).repeater({
		initEmpty: false,
		defaultValues: {
			"text-input": "foo",
		},
		show: function () {
			$(this).slideDown();
		},
		hide: function (deleteElement) {
			$(this).slideUp(deleteElement);
		},
		repeaters: [
			{
				selector: ".inner-repeater",
				initEmpty: false,
				defaultValues: {
					"text-input": "foo",
				},
				show: function () {
					$(this).slideDown();
				},
				hide: function (deleteElement) {
					$(this).slideUp(deleteElement);
				},
			},
		],
	});
}

function addDynamicRepeater() {
	room++;
	var objTo = document.getElementById("dynamicRepeaterPlace");
	var divtest = document.createElement("div");
	divtest.setAttribute("class", "mb-4 removeclass" + room);
	var rdiv = "removeclass" + room;
	divtest.innerHTML = '<form class="row">' + '<div class="col-lg-2 mb-2 mb-md-0">' + '<label class="form-label">Username:</label>' + '<input type="text" class="form-control mb-2 mb-md-0" id="dyn-username" name="dyn-username" placeholder="wrapcoders" />' + "</div>" + '<div class="col-lg-2 mb-2 mb-md-0">' + '<label class="form-label">Email:</label>' + '<input type="email" class="form-control" id="dyn-email" name="dyn-email" placeholder="wrapcoders@gmail.com" />' + "</div>" + '<div class="col-lg-2 mb-2 mb-md-0">' + '<label class="form-label">Password:</label>' + '<input type="password" class="form-control" id="dyn-password" name="dyn-password" placeholder="******" />' + "</div>" + '<div class="col-lg-2 mb-2 mb-md-0">' + '<label class="form-label">Gender:</label>' + '<select class="form-select" id="dyn-genger" name="dyn-genger">' + '<option value="male">Male</option>' + '<option value="female">Female</option>' + '<option value="others">Others</option>' + "</select>" + "</div>" + '<div class="col-lg-2 mb-2 mb-md-0">' + '<label class="form-label">Profession:</label>' + '<select class="form-select" id="dyn-profession" name="dyn-profession">' + '<option value="designer">Designer</option>' + '<option value="developer">Developer</option>' + '<option value="marketer">Marketer</option>' + '<option value="others">Others</option>' + "</select>" + "</div>" + '<div class="col-lg-2 mb-2 mb-md-0 pt-1">' + '<a href="javascript:void(0);" class="btn btn-md btn-soft-danger d-block mt-4" onclick="removeDynamicRepeater(' + room + ');">' + '<i class="fi fi-rr-trash"></i>' + '<span class="ms-1">Delete</span>' + "</a>" + "</div>" + "</form>";

	objTo.appendChild(divtest);
}

function removeDynamicRepeater(rid) {
	$(".removeclass" + rid).remove();
}

// Expose the functions to the global scope if needed
window.addDynamicRepeater = addDynamicRepeater;
window.removeDynamicRepeater = removeDynamicRepeater;