Problema colocando input dinámicamente

molinos · #1 (**permalink**) 07/02/2010, 09:50

Hola a todos!, os resumo mi problema a ver si alguien puede ayudarme, creo que debe ser algo fácil pero no tengo demasiadas nociones de js y llevo varios dias atascado.
Mi objetivo es hacer un formulario, en el que tengo un input(llamado pais) con un boton Añadir.
Al hacer click en añadir saco nuevos inputs que no estaban antes y los coloco bajo el input "pais", debajo de todo esto tengo un boton Enviar Registro.Todo funciona como es debido excepto por que los nuevos inputs se colocan bajo el botón Enviar Registro, en lugar de encima de este botón (y bajo el input "pais" que es donde quiero que se coloque):
Aqui va el código del que hablo

Código HTML:

<!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" />
<title>Documento sin t&iacute;tulo</title>
<link href="../includes/estilos.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--

num=0;
function crear(obj) {

  if (num <= 1) {
     num++;
     fi = document.getElementById('fiel'); 
     contenedor = document.createElement('div'); 
     contenedor.id = 'div'+num; 
     fi.appendChild(contenedor); 
     /*****************/
    ele = document.createElement('input');
    ele.type = 'text'; 
    ele.className = 'impCol';	
    contenedor.appendChild(ele); 
  
    ele = document.createElement('input'); 
    ele.type = 'button'; 
    ele.value = 'Borrar'; 
    ele.name = 'div'+num;
    ele.className ='impCol';
    ele.onclick = function () {borrar(this.name)} 
    contenedor.appendChild(ele); 
    } else {
  	  alert ('Máximo de 3 .');
    }
}
function borrar(obj) {
  num--;
  fi = document.getElementById('fiel'); // 1 
  fi.removeChild(document.getElementById(obj)); // 10
}
--> 
</script>
</head>

<body>
          <div id="fiel">
                <label for="textfield">País:</label>
                <input class ="impCol" type="text" maxlength="20" name="pais" id="pais" size="20"/>
                <input class ="impCol" type="button" value="Añadir" onclick="crear(this)" />
           </div>   
           
           <input class ="impCol" type="submit" name="reg" id="reg" value="Enviar Registro" />                           
      
</body>
</html>

Esto funciona(a no ser que al quitar las partes no importantes haya quitado algo), lo único que mi nuevo input se genera debajo de Enviar Registro y necesito que se genere entre Enviar Registro y el input Pais.

He probado añadiendo en la linea comentada esto:

fi.insertAfter(contenedor,obj);

Pero firebug me da un error diciendo que el nodo obj no existe, cosa extraña pues es el que mando a la función.

Alguna idea o sugenrencia?
Gracias de antemano

orchating · #2 (**permalink**) 07/02/2010, 10:03

E probado tu codigo y al añadir, se genera entre el primero osease pais y enviar registro, pruebalo a mi me funciona

molinos · #3 (**permalink**) 07/02/2010, 10:09

, es cierto, no puedo creerlo, debe ser entonces alguna de las partes del formulario que he quitado para postear aqui las que hacen que me vaya mal, voy a revisarlo!, gracias

molinos · #4 (**permalink**) 07/02/2010, 10:35

pues era culpa de un div no de js, al quitar todo para postearlo mas claro ha funcionado y ya he vto cual era. Era una tonteria , pero llevaba 2 dias dandole vueltas al js creyendo que era culpa suya :(