el número de inputs que existe siempre coincide con un número.

educacanis · #1 (**permalink**) 15/03/2012, 09:01

Hola, tengo que la siguiente función en Javascript que me permite crear unos div con inputs según el número elegido en una lista/menú de un formulario:

Código Javascript:

Ver originalfunction crear(obj) {
    var num
    var max = document.getElementById("tiradores").value;
for (num=1;num<=max;num++) { 
  fi = document.getElementById('fiel');
  contenedor = document.createElement('div');
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor);
 
  ele1 = document.createElement('input');
  ele1.type = 'text';
  ele1.size = 5 ;
  ele1.name = 'fil'+num;
  contenedor.appendChild(ele1); 
  
  ele2 = document.createElement('input');
  ele2.type = 'text';
  ele2.size = 50 ;
  ele2.name = 'tir'+num;
  contenedor.appendChild(ele2); 
}
}

el formulario de donde elijo el número es el siguiente y me crea los campos es el siguiente:

Código HTML:

<label class="seccion">Número de Tiradores (participantes del club)
      <select name="tiradores" id="tiradores">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </label>
    <input type="button" value="Añadir" onclick="crear(this)" />

Si le doy sólo una vez al botón me muestra tantos campos como he puesto, sin embargo si le vuelvo a dar con el mismo número o cambiado me añade más campos, es decir si la primera vez elijo 2 y la segunda 3 me aparece un total de 5 campos, yo lo que quiero es que el número de campos siempre sea igual al value establecido, es decir si elijo el 5 me crea 5 campos, pero si cambio de opinión y elijo un 3 quiero que me borre 2 campos y sean sólo 3 (en vez de añadirme 3 y quedarme con 8)

espero haberme explicado y que me podáis ayudar, no sé como hacerlo.

goteen_mx · #2 (**permalink**) 15/03/2012, 12:19

Antes del for puedes pone esto

document.getElementById('fiel').innerHTML = "";

Vas a limpiar tu contenedor principal ante de crear y agragar los hijos

Saludos

IsaBelM · #3 (**permalink**) 15/03/2012, 14:56

a ver si funciona con este cambio

Cita:

fi = document.getElementById('fiel');
while(fi.firstChild) fi.removeChild(fi.firstChild);
for (num=1;num<=max;num++) {

goteen_mx · #4 (**permalink**) 15/03/2012, 16:22

las dos opciones hacen lo mismo solo que con innerHTML no habría necesidad de iterar para quitar elemento por elemento.

Saludos.

IsaBelM · #5 (**permalink**) 16/03/2012, 07:25

Cita:

Iniciado por goteen_mx

las dos opciones hacen lo mismo solo que con innerHTML no habría necesidad de iterar para quitar elemento por elemento.

Saludos.

a ver que te respondo a esto. si se anidan elementos, se quiere eliminar esos elementos anidados y tenemos una función con la cual se puede eliminar esos elementos anidados, ...... en ocasiones, que se pueda, no quiere decir que sea correcto. pero sí el resultado sería el mismo

educacanis · #6 (**permalink**) 16/03/2012, 08:06

Gracias IsaBelM me sirvió muchísimo, pero me puedes explicar un poco que hace el while?? que no lo he conseguido entender, y de aquí supongo que vendrá el problema que tengo ahora porque me hace lo que quiero perfecto, pero si escribo algo en los campos, los que se supone que se quedan se borran, eso es porque en realidad no se quedan no?? sino que se "reinicia" todo...

Habría alguna forma de dejar los que están escritos??

IsaBelM · #7 (**permalink**) 16/03/2012, 15:29

entonces se complica un poco mas

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function crearCampos(cantidad){
var div = document.getElementById('campos_dinamicos');
nuevosNodos = cantidad - div.childNodes.length;
asignarId = div.childNodes.length;

if(nuevosNodos >= 1) {

for(var i = 1; i <= nuevosNodos; i++){

var salto = document.createElement('p');
var input = document.createElement('input');
var text = document.createTextNode('Campo Dinamico ' + ++asignarId + ': ');
input.setAttribute('type', 'text');
input.setAttribute('name', 'campo[]');
input.setAttribute('id', 'campo' + asignarId);
input.setAttribute('size', '12');
input.className = 'input';
salto.appendChild(text);
salto.appendChild(input);
div.appendChild(salto);
}
} else {

while(nuevosNodos <= -1) {

div.removeChild(div.lastChild);
nuevosNodos++;
}

}
}
</script>
</head>
<body>
<form>
¿Cuantos Campos? <input type="text" name="cantidad" id="cantidad" value="" onkeyup="if(this.value != '') {crearCampos(this.value);}" />
<div id="campos_dinamicos"></div>
</form>
</body>
</html>