Dynamic Input Fields

Dynamic Input Fields

Come creare una Dynamic Input Fields tramite javascript cosi da creare un multi input al click del tuo form.

Ottimo per le registrazioni, questo script semplice ma bello da vedere permette con un click inserimento di piu` input ora vedrete


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Input Fields</title>
<style>
.input-group {
display: flex;
gap: 5px;
margin-bottom: 5px;
}
.action-btn {
cursor: pointer;
padding: 5px 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 3px;
}
.remove-btn {
background-color: #dc3545;
}
</style>
</head>
<body>
<div id="add-button" class="action-btn">Add Input</div>
<div id="input-container"></div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const container = document.getElementById("input-container");
const addButton = document.getElementById("add-button");

function createInput() {
const div = document.createElement("div");
div.className = "input-group";

const input = document.createElement("input");
input.type = "text";
input.className = "text-input";

const addBtn = document.createElement("div");
addBtn.textContent = "+";
addBtn.className = "action-btn add-btn";
addBtn.addEventListener("click", createInput);

const removeBtn = document.createElement("div");
removeBtn.textContent = "-";
removeBtn.className = "action-btn remove-btn";
removeBtn.addEventListener("click", function () {
if (container.children.length > 1) {
container.removeChild(div);
}
});

div.appendChild(input);
div.appendChild(addBtn);
div.appendChild(removeBtn);
container.appendChild(div);
}

addButton.addEventListener("click", createInput);
createInput(); // Initialize with one input
});
</script>
</body>
</html>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.