Formulario con opción de añadir más campos

[juanla]

Bueno mi idea es la siguiente:

Tengo un formulario digamos con los siguientes campos: Nombre, Apellido1, Apellido2, Dirección, Teléfono y Email

Tengo una tabla en la bd con esos campos, pero quiero hacer un poco mejor las cosas y estructurarlo así:

Tabla personas (ID, Nombre, Apell1, Apell2)
Tabla direcciones (IDPersona, Direccion)
Tabla Telefonos (IDPersona, Telefono)
Tabla Email (IDpersona, email)

La idea es en el formulario por defecto te salga un input como "básico", pero al lado lo ideal sería situar un pequeño botón (una imagen por ejemplo) y que al pulsar te abra otro input dirección y así todos los que quieras (para hacerlo también con telefono y email)

Se debe a que estas personas puedan tener más de uno de esos datos. Lo que no se es como poder hacer lo que os comento, generar otro input si el usuario lo necesita. Lo poco que sé me da a opinar que en javascript hay una forma sencillita para esto, pero ando frito del mismo.

Si alguien tiene alguna sugerencia para una situación similar lo escucho :)

Me edito para añadir algo más de información:
Me creo una función en javascript así:

Código Javascript:

<script language="JavaScript" type="text/javascript">
var direccion = 1;
function input_direccion(){
    document.write("<tr><td>Direcci&oacute;n"+(direccion + 1)+": <span style=\"color: red; font-size:10px;\">*</span></td><td><input type=\"text\" name=\"direccion\"/></td></tr>");
}
</script>
 

La cuestión es que tengo el input original así:

Código Javascript:

<tr><td>Direcci&oacute;n: <span style="color: red; font-size:10px;">*</span></td><td><input type="text" name="direccion"/> <a onclick="input_direccion()">Add</a></td><tr>
 

Por lo tanto al dar click al "Add" que puse la página se "crea" de nuevo en blanco y sólo con el segundo input, cuando la idea es que se cree una fila de tabla adicional bajo el primer input, con otro.. no se si me explico, si alguien necesita más datos que avise ^^

[zerokilled]

para estos casos tu mejor aliado no es document.write ni similares. eso es practica del pasado y muy complicado. la mejor solucion es utilizando metodos del DOM para crear los controles adicionales. basicamente los ingredientes son:

• document.createElement - crear elementos html.
• algunos de los siguientes: document.getElementById, firstChild, nextSibling - para obtener referencia del elemento donde se va agregar el elemento creado.
• appendChild - la funcion para agregar el elemento creado.
• setAttribute o propiedad name - para agregar una identificacion al campo creado de modo que el servidor pueda recibir el campo.

si es la primera vez que trabajas con DOM, sugiero que leas algun tutorial:
http://librosweb.es/javascript/capitulo5.html
http://librosweb.es/ajax/capitulo4.html
http://www.w3schools.com/htmldom/default.asp

o si de plano te resulta muy complicado, puedes utilizar la propiedad innerHTML del elemento donde se debe agregar el campo. a esta propiedad le asignas un codigo html tal como harias con document.write. sin embargo, tiene un pequeño problema. si se agrega varios campos y algunos de ellos contiene datos, estos datos se borran. el siguiente tema te podria ayudar, http://www.forosdelweb.com/showthread.php?t=776976.

[juanla]

Gracias, ya tengo para leer un rato :) Ni me sonaba, de echo nunca aantes había usado el document.write ni había programado nada en javascript, aver si me pongo las pilas un poco.

[juanla]

Bueno, consegui solucionarlo leyendo un poco, sobre todo me ayudo este ejemplo que ví :)
http://www.telefonica.net/web2/blas-mar/crear.html

Me resulto muy bien explicado y sencillo, Gracias a todos y espero que le sirva a alguien.