Problema creando un elemento en Javascript/Ajax

laqmaslocaesta · #1 (**permalink**) 13/11/2012, 15:40

Hola

estoy haciendo una pagina con Ajax, que se comunica con una aplicación symfony.
Hasta ahi todo bien.

La cosa es que querio implementar una funcion, de modo que cuando se pulse sobre un elemento, vaya a un metodo javascript y cree un formulario en el div indicado. Pero no lo consigo, el codigo es:

Código:

function anadirForm()
{

	fi=document.getElementById("txtHint2");
	//var html="<p>Introduzca los datos del alumno: </p>";
	//cont.innerHTML=html;
	
	contenedor=document.createElement('form');
	contenedor.id='form';
	fi.appendChild(contenedor);

	ele=document.createElement('input');
	ele.type='text';
	ele.id='nombre';
	contendor.appendChild(ele);


		
}

esta dentro de un script

y es llamado desde el html del siguiente modo:

Código:

</script>
</head>
<body>

<h2 align=center>Menu de acciones</h2>
</br>
<div id="acciones" align=left> 
<a href="#" onclick="consulta()">Consulta</a>
&nbsp;&nbsp;&nbsp;
<a href="#" onclick="anadirForm()">A&ntilde;adir</a>
</div>
<div id="buscar" align=right> 
<input id="demo" type=text>
<button type="button" onclick="showCustomer()">Buscar</button>
</br>
</div>
<div id="txtHint"><script>document.write(consulta()); </script></div>
<div id="txtHint2"> </script></div>
</body>
</html>

No estoy utilizando ningun Framework para ajax.

Como vemos el div que queremos modificar existe.

Alguien sabe por que no funciona???

laqmaslocaesta · #2 (**permalink**) 14/11/2012, 06:32

aki os dejo el codigo con la solucion, para futuras dudas al respecto.
Parece ser que tenia que crear un form y un fieldset del que colgaria los elemenos

Código:

<!DOCCTYPE html>
<html>
<head>
<title>Pagina Ejemplo1</title>
<script language="javascript">

function crear() {

  fi = document.getElementById('fiel'); // 1
//limpiamos el contenido anterior, para evitar que se multiplique el formulario
fi.innerHTML="";

  contenedor = document.createElement('div'); // 2
  contenedor.id = 'div'; // 3
  fi.appendChild(contenedor); // 4

  contenedor.appendChild(document.createTextNode('Nombre '));


  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'nombre'; // 6
  contenedor.appendChild(ele); // 7

  ele = document.createElement('br'); 
  contenedor.appendChild(ele);

  contenedor.appendChild(document.createTextNode('Apellido '));

  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'apellido'; // 6
  contenedor.appendChild(ele); // 7

  ele = document.createElement('br'); 
  contenedor.appendChild(ele);
  
  ele = document.createElement('input'); // 5
  ele.type = 'button'; // 6
  ele.value = 'Submit'; // 8
  ele.name = 'div'; // 8
  contenedor.appendChild(ele); // 7
}


</script>
</head>
<body>

<h2 align=center>Menu de acciones</h2>
</br>
<div id="acciones" align=left> 
<a href="#" onclick="consulta()">Consulta</a>
&nbsp;&nbsp;&nbsp;
<a href="#" onclick="crear()">A&ntilde;adir</a>
</div>
<div id="buscar" align=right> 
<input id="demo" type=text>
<button type="button" onclick="showCustomer()">Buscar</button>
</br>
</div>
<div id="txtHint"><script>document.write(consulta()); </script></div>
<form >
<fieldset id="fiel">
</fieldset>
</form> 
</body>
</html>

si aun asi no os funciona, quitar la etiqueta div e ir directamente a los inputs

Saludos