campos text dinámicos

ostayde · #1 (**permalink**) 07/03/2006, 16:20

Necesito desarrollar una página con campos tipo:text

Esta página comprende un formulario con diversos objetos un de ellos es un campo tipo:text y un boton.

La idea es, que cada vez que el usuario le de al boton aparezca debajo del campo tipo:text otro campo tipo:text.

La página se inicia con un solo campo tipo:text pero si el boton es presionado 10 veces la página mostrara 10 campos.

Agradecería su ayuda

Hereje · #2 (**permalink**) 07/03/2006, 16:46

Algo "al vuelo":

Código PHP:

  <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Agregador de inputs ;)</title> 
    <script type="text/javascript"> 
        window.onload = function() { generar_formulario(); } 
        var form; //el formulario 
        var boton; //el submit 
         
        function generar_formulario() { 
            form = document.createElement('form'); 
             
            //propiedades del formulario 
            form.method = 'post'; 
            form.action = 'pagina_que_recibe.ext'; 
             
            //boton para agregar 
            boton = document.createElement('input'); 
            boton.type = 'button'; 
            boton.value = 'Agregar'; 
            boton.onclick = function() { agregar_input(); } 
             
            form.appendChild(boton); 
            document.getElementsByTagName('body')[0].appendChild(form); 
             
            //agregar el primero 
            agregar_input(); 
        } 
         
        function agregar_input() { 
            var input = document.createElement('input'); 
            input.type = 'text'; 
            input.name = 'input[]'; 
             
            var br = document.createElement('br'); 
 
            form.insertBefore(input, boton); 
            form.insertBefore(br, boton); 
        } 
    </script> 
</head> 
 
<body> 
</body> 
</html>

Probalo a ver que pasa! Saludos.

ostayde · #3 (**permalink**) 08/03/2006, 11:26

realmente no entiendo el código que me mandaste. yo tengo el formulario hecho en html. solo quiero que al presionar un boton se despliegue tantos campos tipo:text como veces se presiono el boton.

pinchoso · #4 (**permalink**) 08/03/2006, 11:40

Pues es lo que hace ese codigo...no entiendo que es lo que no entiendes!

ostayde · #5 (**permalink**) 08/03/2006, 11:43

Lo que necesito es lo siguiente:

en la página www.gmail.com - en el apartado de contacto - opcion Añadir contacto.

Aparece un formulario a través de cual añadimos un nuevo contacto en nuestro directorio de contacto. En ese mismo formulario se encuentra un boton que dice añadir otro campo. Aqui el usuario puede añadir 100 campos si lo desea. Yo quisiera saber como puedo hacer ese script.

Agradecería su ayuda Gracias..

pinchoso · #6 (**permalink**) 08/03/2006, 12:00

No es por ser pesado, pero con el código de Hereje podrias hacer lo que dices, si no lo entiendes muy bien estudiatelo, pero tampoco puedes esperar que la gente te de el codigo mascado.

Lo digo de buen rollo sin querer crear malas interpretaciones ya que creo que la solución de Hereje es buena

Saludos.

ostayde · #7 (**permalink**) 08/03/2006, 12:08

disculpa si te moleste pinchoso.

Me equivoque al anexar el código propuesto "por hereje" dentro de la página que estoy desarrollando.

pinchoso · #8 (**permalink**) 08/03/2006, 12:11

No, no me he molestado, de verdad...debe ser la hora y las ganas de salir del trabajo que me nublan la mente, jejej.

Suerte!

caricatos · #9 (**permalink**) 08/03/2006, 12:32

Hola:

La verdad es que crear nuevos elementos con DOM es algo bastante complejo, y si quieres hacerlo con algo ya empezado, peor...

En las FAQs hay un par de ejemplos para añadir y eliminar elementos dinámicamente (aconsejo verlos)

Teniendo un form de este tipo:

<form name=formulario ...>

Se puede crear un nuevo campo de texto de nombre "nuevoTexto" así:

var nuevoInput = document.createElement("input");
nuevoInput.type = "text";
nuevoInput.NAME = "nuevoTexto";
document.forms.formulario.appendChild(nuevoInput);

Fíjate en la forma de añadir saltos de línea que propuso Hereje (¡Hola

!)

Saludos

ostayde · #10 (**permalink**) 08/03/2006, 15:47

Hola caricatos!!!

Como me recomendarias entonces????

Tambien aparte de añadir los campos requiero poderlos quitar a través de un boton

caricatos · #11 (**permalink**) 08/03/2006, 16:27

Hola:

No puedo recomendarte otra cosa que revises el código de Hereje y el mio... mi código puede tenr errores porque no lo he comprobado (hay momentos que el tiempo no lo permite).

Para quitar nodos el código es bastante sencillo... solo hay que saber referenciar el nodo...

elNodo.parentNode.removeChild(elNodo)...

Saludos