Agregar elementos de formulario con una variable

[chroman81]

Soy novato en Javascript tiene menos de un mes que lo estoy usando, todo bien hasta que tengo un problema al tomar el valor de una variable y según el valor me agregue elementos "input" en un formulario.

intente con esta función espero y me puedan ayudar:

Código:

function rellena()
{
var x = parseInt(document.datos.numeros.value)
for (i=0; i<x; i++)
		{
		document.write('<input type="text" size ="2" value="">')
		}
}

La función me agrega los elementos "input" según el valor que contenga X, pero me aparecen en un documento en blanco, no se la manera correcta de realizar esto dinamico es decir sin que me borre todo del html.....

Bueno tuve esta experiencia con javascript por ejemplo cuando tenia que enviar valores a una etiqueta DIV use:

document.getElementById("DIV1").innerHTML = x;

Pero con formularios dinamicos a la hora de agregarlos no se que sentencia usar.

Espero y me puedan orientar un poco... SALU2

[djaevi]

Proba asi

function rellena()
{
var x = parseInt(document.datos.numeros.value)
for (i=0; i<x; i++)
{
var nuevoInput = document.createElement('input');
nuevoInput.type = 'text';
nuevoInput.appendChild(document.datos);
}
}

Por ahi debe andar la solucion no lo probe en un naevgador si no lo solucionas avisa

Saludos

[Adler]

Hola

Has de usar document.createElement("input");

Suerte

[chroman81]

Gracias ya me ha funcionado, pero le tuve que hacer modificaciones por que al dar llamar a la función me borraba el campo donde metía la variable x. me ha quedado asi:

function rellena()
{
var x = parseInt(document.datos.numeros.value)
var form = document.getElementById("formulario");
for (i = 0; i < x; i++) {
var nuevoInput = document.createElement('input');
nuevoInput.type = 'text';
nuevoInput.name = 'arre'+i;
nuevoInput.size = '2';
form.appendChild(nuevoInput);
}
}

Ahora como puedo agregar un Espacio o caracter después de cada elemento creado????

GRACIAAS!

[djaevi]

mmm si lo que te referis es a llenar los campos seria nuevoInput.value = 'nombre del usuario';
es eso lo que queres hacer?

[Adler]

Hola

Prueba así

Código javascript:

for (i = 0; i < x; i++) {
var txr = document.createTextNode("Campo Dinamico "+ i + " ")
form.appendChild(txt);
var nuevoInput = document.createElement('input');
 

Suerte

[chroman81]

Gracias Adler el codigo enseguida lo pruebo y comento ahora tengo una duda como elmino lo ya creado???? pense en el mismo script para insertar, pero con algunos cambios.

Código javascript:

function doLimpiatodo()
{
    var x = parseInt(document.datos.numeros.value)
    var form = document.getElementById("formulario");
    
    for (i = 0; i < x; i++) {
        var borrainput = getElementsByTagName('input');
        borrainput.type = 'text';
        borrainput.name = 'arre' + i;
        borrainput.size = '2';
        borrainput.class = "input";
        form.removeChild(borrainput);
    }
}
 

pero no me borra no se que estoy haciendo mal, o si es la manera correcta de eliminar elementos que he creado a partir de un valor X.

salu2 y gracias a todos.

[djaevi]

Si queres borrar los campos creo que simplemente deberias dejarlo asi

Código javascript:

1.
      function doLimpiatodo()
      {
         var x = parseInt(document.datos.numeros.value)
          var form = document.getElementById("formulario");
          var borrainput = getElementsByTagName('input');
          for (i = 0; i < x; i++) {
              form.removeChild(borrainput[i]);
          }
      }
 

Saludos

[chroman81]

Gracias estrictamente como lo has puesto no me ha funcionado, puesto que no se muy bien como funciona realmente la función que has puesto hice modificaciones y pruebas y he logrado lo que queria borrar todos los elementos que había creado.

Código javascript:

function doLimpiatodo()
{
    var x = parseInt(document.datos.numeros.value);
    var form3 = document.getElementById('formulario');
    var borrainput = form3.getElementsByTagName('input');
    for (i = 0; i < x; i++)
    {
        form3.removeChild(borrainput[0]);
        }
}
 

solamente me borraba cuando .removeChild(borrainput[j]); fuese [0], no entendi por que :S

salu2 pero de todos modos ya ha quedado muchísimas gracias!!!!

[zerokilled]

el codigo que tienes no te funciona porque: (1) estas buscando todos los elementos inputs dentro del formulario cuando solo quieres aquellos creados dinamicamente, y (2)

solamente me borraba cuando .removeChild(borrainput[j]); fuese [0], no entendi por que

sucede que getElementsByTagName devuelve una coleccion de elementos. cuando uno de esos elementos se remueve del documento (.removeChild) la coleccion tambien se altera. o sea, llega un punto en que la variable que sirve como iterador (en tu caso la j), no representa un elemento de la coleccion.

a continuacion un ejemplo donde en lugar de utilizar una coleccion de elementos, utiliza un elemento en particular (<div id="dynamic">) donde se van agregando los elementos creados.

Código:

<script type="text/javascript">
function create(quantity){
var div = document.getElementById("dynamic");
while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
	for(var i = 1, quantity = Number(quantity); i <= quantity; i++){
	var p = document.createElement("p");
	var input = document.createElement("input");
	var text = document.createTextNode("Campo " + i + ": ");
	input.setAttribute("name", "arre" + i);
	input.setAttribute("size", "2");
	input.className = "input";
	p.appendChild(text);
	p.appendChild(input);
	div.appendChild(p);
	}
}
</script>
<form name="datos">
<p>Cantidad de campos: <input type="text" name="quantity" /> <input type="button" value="Crear" onclick="create(this.form.quantity.value)" /></p>
<div id="dynamic"></div></form>

que quede claro. no digo que esta mal utilizar la coleccion de elementos, sigue siendo una alternativa valida. simplemente queria desviarte por otra alternativa para que no tuvieras mayores problema.