<!DOCTYPE html>
<html>
<head>
<title>Compartir cuotas</title>
<script>
function crearCampos() {
// Obtener la cantidad de personas y el importe total de la cuota
var totalPersonas = parseInt(document.getElementById("totalPersonas").value);
var importeTotal = parseFloat(document.getElementById("importeTotal").value);
// Calcular el importe por persona
var importePersona = importeTotal / totalPersonas;
// Crear los campos para cada persona
var formulario = document.getElementById("formulario");
formulario.innerHTML = "";
for (var i = 0; i < totalPersonas; i++) {
var labelNombre = document.createElement("label");
labelNombre.innerHTML = "Nombre de la persona " + (i+1) + ": ";
var inputNombre = document.createElement("input");
inputNombre.type = "text";
inputNombre.name = "nombre" + i;
inputNombre.required = true;
var labelImporte = document.createElement("label");
labelImporte.innerHTML = "Importe a pagar: ";
var inputImporte = document.createElement("input");
inputImporte.type = "number";
inputImporte.step = "0.01";
inputImporte.name = "importe" + i;
inputImporte.value = importePersona.toFixed(2);
inputImporte.readOnly = true;
var divPersona = document.createElement("div");
divPersona.appendChild(labelNombre);
divPersona.appendChild(inputNombre);
divPersona.appendChild(labelImporte);
divPersona.appendChild(inputImporte);
formulario.appendChild(divPersona);
}
}
</script>
</head>
<body>
<h1>Compartir cuotas</h1>
<form id="formCuotas" method="post">
<label>Cantidad de personas: </label>
<input type="number" id="totalPersonas" name="totalPersonas" required>
<br>
<label>Importe total de la cuota: </label>
<input type="number" id="importeTotal" name="importeTotal" step="0.01" required>
<br>
<button type="button" onclick="crearCampos()">Crear campos</button>
</form>
<form id="formulario" method="post"></form>
</body>
</html>
I am raw html block.
Click edit button to change this html