Crear dinámicamente un número específico de elementos de formulario de entrada
He leído muchos blogs y publicaciones sobre cómo agregar conjuntos de campos dinámicamente, pero todos dan una respuesta muy complicada. Lo que necesito no es tan complicado.
Mi código HTML:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
Entonces, un usuario ingresará un valor entero (estoy verificando la validación usando javascript) en el inputcampo. Y al hacer clic en el Fill Detailsenlace, aparecerá el número correspondiente de campos de entrada para que pueda ingresar. Quiero lograr esto usando javascript.
No soy un profesional en javascript. Estaba pensando cómo puedo recuperar el número entero completado por el usuario en el inputcampo a través del enlace y mostrar el número correspondiente de campos de entrada.
Podría utilizar un onclickcontrolador de eventos para obtener el valor de entrada para el campo de texto. Asegúrese de darle al campo un idatributo único para que pueda consultarlo de forma segura a través de document.getElementById():
Si desea agregar elementos dinámicamente, debe tener un contenedor donde colocarlos. Por ejemplo, un <div id="container">. Cree nuevos elementos mediante document.createElement()y utilícelo appendChild()para agregar cada uno de ellos al contenedor. Es posible que le interese generar un nameatributo significativo (por ejemplo, name="member"+ipara cada uno de los <input>correos electrónicos generados dinámicamente si se van a enviar en un formulario).
Tenga en cuenta que también puede crear <br/>elementos con document.createElement('br'). Si solo desea generar algo de texto, puede usarlo document.createTextNode()en su lugar.
Además, si desea limpiar el contenedor cada vez que esté a punto de llenarse, puede usar hasChildNodes()y removeChild()juntos.
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<div id="container"/>
</body>
</html>Vea una muestra funcional en este JSFiddle .
Pruebe este código JQuery para incluir dinámicamente formularios, campos y comportamientos de eliminación/eliminación:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div><input type="text" name="mytext[]"></div>
</div>