Mostrar varios inputs con etiquetas

[marcospuig]

¡Hola!

Tengo otra dudilla...

Estoy creando un código donde se recogen los datos personales de un alumno, y ese alumno puede tener varios hermanos, entonces, cada vez que el usuario quiera añadir un hermano tendrá que pulsar en el botón 'Añadir hermano' y a continuación tendrán que aparecer los campos con los datos del hermano a rellenar.

Antes he tenido una situación similar y me he servido de un código de JavierB para solucionarla (muchas gracias) y esta es una situación similar, sólo que en vez de uno son varios campos a la vez los que tengo que recoger, y no consigo mostrar entre uno y otro el texto que informa al usuario de qué campo es, por ejemplo:

DNI: <input para recoger el DNI del hermano> Nombre del hermano: <input para recoger el nombre del hermano>
Estado civil: <input para recoger el estado civil del hermano>....

La función javascript que uso para crear los datos del hermano es (a modo de ejemplo sólo he copiado el DNI y el nombre):

Código:

function crear(obj) {
  num++;
  
  fi = document.getElementById('fiel'); // 1
  contenedor = document.createElement('div'); // 2
  contenedor.id = 'div'+num; // 3
  fi.appendChild(contenedor); // 4
	
  document.write('DNI: ') 	
  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'cDNIH'+num; // 6
  contenedor.appendChild(ele); // 7

  document.write('Nombre: ');
  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'cNombreH'+num; // 6
  ele.size = '40';
  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
}

Y en php lo llamo de la siguiente manera:

Código:

<h2>Nuevo hermano</h2>
<fieldset id="fiel">		
<input type="button" value="Añadir Hermano" onclick="crear(this)">
</fieldset>';

Y al final cuando pulso el botón 'Añadir Hermano' sólo me aparece

DNI: Nombre:

en una página en blanco. Si pudiérais ayudarme os lo agradecería.
Muchas gracias...

[JavierB]

Hola marcospuig

No puedes usar document.write después de que ya se ha cargado la página, porque, como ya has visto, se borrar todo.

He añadido un par de líneas al código:

Código:

 txt = document.createTextNode('DNI:');
  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  ele.name = 'cDNIH'+num; // 6
  contenedor.appendChild(txt);
  contenedor.appendChild(ele); // 7

Saludos,

[marcospuig]

Muchas gracias por tu ayuda Javier, pero ahora me encuentro otra piedra en el camino más, en vez de un input quiero poner un select (lista desplegable) y lo intento con esta sintaxis:

Código:

  txt = document.createTextNode(' Estado civil: ');			//Creamos el estado civil
  ele = document.createElement('select');  
  ele.name = 'cEstadoCivilH'+num; 
  ele.option='Soltero';
  ele.option='Casado';
  ele.option='Separado';
  ele.option='Viudo';
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);

Y con este otro:

Código:

 txt = document.createTextNode(' Estado civil: ');			//Creamos el estado civil
  ele = document.createElement('select');  
  ele.name = 'cEstadoCivilH'+num; 
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);
 

  ele = document.createElement('option');  
  ele.name = 'Soltero'; 
  ele.option = 'Soltero';
  contenedor.appendChild(ele);

Pero no funciona, y me preguntaba si me podrías ayudar... o decirme un link donde se explique esto, es que no encuentro nada para ver qué propiedades y métodos tienen los objetos javascript....

Muchas gracias

[JavierB]

Hola de nuevo.

En este tema preguntaron algo parecido. Échale un ojo:

http://www.forosdelweb.com/f13/anadir-opciones-valores-select-dinamico-478800/

Saludos,

[marcospuig]

OK muchas gracias, ya parece que va...