Añadir y Quitar text inputs dinamicamente

morfasto · #1 (**permalink**) 17/02/2012, 14:24

Hola, que tal?

Hice un script para añadir y quitar text inputs para mi formulario. Funciona bien, pero tengo un problema. Cuando yo añado un text input y escribo en el y pongo para agregar otro, la informacion escrita en el text input se borra, no entiendo porque lo hace.

Alguien podria ayudarme a encontrar el problema??

Mi codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html> 
<head>
<title>Crear input file</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
fields = 2;
function addInput() {
  if (fields < 31) {
    var nombre = "nombre" + fields;
	var link = "link" + fields;
    document.getElementById('text').innerHTML +=
      "<table><tr><td>Nombre #"+fields+"</td><td><input type='text' name='"+nombre+"' /></td></tr><tr><td>Link #"+fields+"</td><td><input type='text' name='"+link+"' /></td></tr></table>";
	document.getElementById('cantidad').innerHTML = "<input type='text' name='cantidad' value='"+fields+"'/>";
    fields += 1;
  } else {
    document.getElementById('warning').innerHTML =
      "Máximo 30.";
    document.form.add.disabled = true;
  }
}

function removeInput( el ) {
  if (fields > 2) {
    document.getElementById('warning').innerHTML = "";
    var parent = document.getElementById('text');
    parent.removeChild(el);
    fields -= 1;
	document.getElementById('cantidad').innerHTML = "<input type='text' name='cantidad' value='"+(fields-1)+"'/>";
  }
}
</script>
</head>
<body>

<p><input type="button" onclick="addInput();" value="Agregar"/><input type="button" onclick='removeInput(getElementById("text").lastChild)' value="Quitar"/></p>

<div id="text">
<table><tr><td>Nombre #1</td><td><input type='text' name='nombre1' /></td></tr><tr><td>Link #1</td><td><input type='text' name='link1' /></td></tr></table>
</div>
<div id="warning"></div>
<div id="cantidad"><input type='text' name='cantidad' value="1"/></div>
</body>
</html>

Espero me puedan ayudar!

Muchas gracias!

zerokilled · #2 (**permalink**) 17/02/2012, 14:54

buenas,
no he visto el código pero por lo que explicas, eso es muy normal. de hecho, esa consulta ya se ha realizado con anterioridad. lo que sucede es que estas sobreescribiendo el código html. fíjate que cuando se escribe en el campo, dicho valor no va directamente al atributo value. por eso, cada vez que se escribe en innerHTML, el navegador interpreta el código html. en el caso del campo, el navegador muestra lo que tenga en el atributo value.

en fin, ¿has considerado manipular el DOM en lugar de innerHTML? manipulando el DOM te evitas ese problema. si no lo has hecho, busca información sobre los métodos appendChild, createElement, removeChild. quizas también intereses cloneNode y luego manipular los atributos por propiedades o método setAttribute.

morfasto · #3 (**permalink**) 17/02/2012, 19:28

Muchisimas gracias! ahora todo funciona genial :)