añadir un campo de texto con click del boton

viktoria · #1 (**permalink**) 27/05/2007, 15:56

Hola chicos.
Tengo boton "añadir autor" con el siguiente codigo

<input type='button' name='anadir' value='+ añadir autor' class='boton' OnClick='add_autor(this);'>

y esta funcion apra anadir 2 campos tipo text para untroducir unos datos

function add_autor(){
//recojemos valor del contador
var count=document.file_manage.contador_autores.value;
document.write('<p>Autor"+count"<br>Nombre y apellidos: <input type="text" size="25" name="autor"+count maxlength="100">Email: <input type="text" size="25" name="mail"+count maxlength="100"></p>');
count=coun+1;

document.file_manage.contador_autores.value=count;
}

La funcion me escribe lo que quiero pero no sale el resto de la pagina.
O sea solo hay 2 campos input type=text y esta.
Yo nesesito que se añade los campos tipo text en la pagina actual con todos los datos sin recargar.
No se como tengo que proceder en este caso.
Gracias a todos por ayuda.!

programeitor · #2 (**permalink**) 27/05/2007, 17:40

Hola viktoria. No debes utilizar document.write para modificar el contenido de una pagina, ya que esa instruccion borra todo lo que hubiera en la pagina antes de empezar a escribir.

Mejor utiliza innerHTML para crear nuevos tags, o tambien puedes utilizar document.createElement.

Cuentame a ver que te parece, saludos.

viktoria · #3 (**permalink**) 28/05/2007, 15:08

Gracias programeitor!
Encontre un ejemplo interesante

num=0;
function add_autor(obj){
num++;
fi = document.getElementById('fiel'); // 1
contenedor = document.createElement('div'); // 2
contenedor.id = 'div'+num; // 3
fi.appendChild(contenedor); // 4

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

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

ele = document.createElement('input'); // 5
ele.type = 'button'; // 6
ele.value = 'Borrar'; // 8
ele.name = 'div'+num; // 8
ele.onclick = function () {borrar(this.name)} // 9
contenedor.appendChild(ele); // 7
}
function borrar(obj) {
fi = document.getElementById('fiel'); // 1
fi.removeChild(document.getElementById(obj)); // 10
}

y funciona, y recojo variables bien desde un archivo php, lo que no se como aplcar estilos a estos campos tipo text que creo y como averiguar el count total de campos creados.

programeitor · #4 (**permalink**) 28/05/2007, 15:37

Estupendo, muy bien

Te puedo ayudar con lo de los estilos, haber si te vale esto:

el estilo se lo aplicas con

ele.style.color="white"

o aplicandole una clase ya creada

ele.className="blanco"

la cual debe haber sido creada en el head

<head>
<style>
.blanco{color:white}
</style>
</head>

o ahora bien, si los estilos los quieres tener en un archivo aparte, lo creas de esta forma

.blanco{color:white;background:gray}

y lo guardas como nombre.css

ahora ya lo puedes cargar desde el head de este modo

<link rel="stylesheet" href="nombre.css">

espero te sea de ayuda. Saludos.

viktoria · #5 (**permalink**) 28/05/2007, 15:58

estupendo!
Muchissimas gracias!

creo que lo de count debo preguntar en el foro php.
Yo recojo los variables de este modo

Código PHP:

  //recojemos los autores 
$i=0; 
while($i<10){ 
$autores.=$_POST['autor'.$i]."-".$_POST['mail'.$i]."<br>"; 
$i++; 
}

En lugar de 10 debo poner el numero de los campos creados y no se la verdad.

Sigo investigando ....

programeitor · #6 (**permalink**) 28/05/2007, 16:17

si no me equivoco la variable ·num· contiene lo que buscas.

buen probecho.