Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Formulario con opción de añadir más campos en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/11/2010, 16:10
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 9 años, 4 meses
Puntos: 1
Formulario con opción de añadir más campos

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:
Ver original
  1. <script language="JavaScript" type="text/javascript">
  2. var direccion = 1;
  3. function input_direccion(){
  4.     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>");
  5. }
  6. </script>

La cuestión es que tengo el input original así:
Código Javascript:
Ver original
  1. <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 ^^

Última edición por juanla; 10/11/2010 a las 17:18
  #2 (permalink)  
Antiguo 10/11/2010, 18:58
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 9 años, 7 meses
Puntos: 1485
Respuesta: Formulario con opción de añadir más campos

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 11/11/2010, 09:27
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Formulario con opción de añadir más campos

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.
  #4 (permalink)  
Antiguo 11/11/2010, 17:36
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Formulario con opción de añadir más campos

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.

Etiquetas: campos, duplicar, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:45.