crear dynamicamente campos de formulario - v2.0

markshock · #1 (**permalink**) 02/02/2005, 06:58

Ayer posteé para ver si alguien me guiava en la creación de campos dynamicos de formulario utilizando javascript, y mediante un boton "añadir".

Nuestro amigo javierB me ha hechado una grandisima mano, pero ahora despues de implementar y compobar lo que me ha comentado me surgen dudas...

Alguien sabe donde puedo consultar información a cerca de este tipo de funciones... appendChild, createElement, etc...

Lo suyo sería que hubieran ejemplos.. xq voy algo pez.

gracias.

P.D: detalle de lo que intento hacer.

Dispongo de un formulario con un par de campos input type="text" que hacen referencia a partidos de futbol. Tengo un boton que hace la funcion de "Añadir partido" y con este boton se tiene que ejecutar la acción de agregar 2 campos mas de text para poder insertar 1 partido mas... y así indefinidamente, sin limite.

Tambien tendría que haber otro boton al lado de cada partido para eliminar del formulario dichos campos.

Os comento esto x si alguien ha visto un aplicativo parecido, me pase la URL.

Graciaaaaaaaaaaaaas!!!

markshock · #2 (**permalink**) 02/02/2005, 11:16

mre espondo a mi mismo...

encontre la solución en otro foro de Java y Javascript

Ahí va el code.

Código:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var mailcount = 0;
function cerrar(obj){
	email=document.getElementById("emailNode"); 
	email.parentNode.removeChild(email.parentNode.childNodes[mailcount+7]);
	mailcount --;
	if (mailcount==0){
		//retirar el código para borrar la última dirección de mail 
		document.getElementById("mailManagment").removeChild(document.getElementById("cerrarMail"));
	}
}

function newEntry(inputName,text){
	newInput = document.createElement("input");
	newInput.type="text";
	newInput.name=inputName;
	newNode = document.createElement("tr");
	newNode.appendChild(document.createElement("td"));
	newNode.appendChild(document.createElement("td"));
	newNode.firstChild.appendChild(document.createTextNode(text));
	newNode.lastChild.appendChild(newInput);
	
	return newNode;
}

function newMail(){
	mailcount ++;
	email=document.getElementById("emailNode");
	//Creo el nuevo campo
	newNode=newEntry("email"+mailcount,"Email alternativo "+mailcount+":");
	//Muestro el nuevo campo
	email.parentNode.insertBefore(newNode,email);

	//Agregar el código para borrar el último mail
	if (mailcount==1){
		newClose = document.createElement("a");
		newClose.id="cerrarMail";
		newClose.href="javascript:cerrar(this)";
		newClose.appendChild(document.createTextNode("Borrar último"));
		document.getElementById("mailManagment").appendChild(newClose);
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="nuevo.php">
<table>
<tr>
<td>Nombre:</td>
<td> <INPUT TYPE="text" NAME="nombre"></td>
</tr>
<tr>
<td>Apellido:</td>
<td><INPUT TYPE="text" NAME="apellido"></td>
</tr>
<tr>
<td>Contraseña:</td>
<td><INPUT TYPE="password" NAME="password"></td>
</tr>
<tr>
<td>Email principal:</td>
<td><INPUT TYPE="text" NAME="email0"></td>
</tr>
<tr id="emailNode">
<td colspan="2"><CENTER id="mailManagment"><A HREF="javascript:newMail();">Agregar otro mail</A>&nbsp;</CENTER></td></tr>
<tr><td><INPUT TYPE="submit"></td><td><INPUT TYPE="reset"></td></tr>
</table>
</form>
</body>

caricatos · #3 (**permalink**) 02/02/2005, 17:08

Hola markshock:

Una página en donde encontré información como la que buscas es ésta: http://www.linti.unlp.edu.ar/frames/proyecto.htm
Fíjate en los enlaces donde pone DOM

Saludos

markshock · #4 (**permalink**) 03/02/2005, 03:05

gracias caricatos, voy a indagar.

Hanoy · #5 (**permalink**) 16/03/2005, 17:16

Perdona markshock, pero has conseguido que el código ese funcione? Es que yo lo he probado xq estoy buscando lo mismo y no me funciona, de momento creo que en esta linea falta un =.

Código HTML:

newNode.firstChild.appendChild(document.createText  Node(text));

Tampoco me funciona el enlace que se ha puesto, si has conseguido algo te importaría ponerlo?, es que llevo bastante tiempo liado con esto

Gracias

caricatos · #6 (**permalink**) 16/03/2005, 17:38

Hola Hanoy:

Lo que no está bien es la separación "createText Node" debería ser una palabra: "createTextNode"...

También tienes que tener cuidado de que los nodos existan: firstChild es el primer nodo hijo (de newNode)

Saludos