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>
