Actuar según SELECT

[robandrox]

Hola,que tal??

Quiero hacer una pagina web en la que aprezcan distintos campos de un formulario según lo que se elija en un campo SELECT de HTML,es decir,si por ejemplo el campo select tiene como opciones los numeros 3,4,5;pues que aparezcan 3,4 o 5 campos respectivamente al pulsar sobre uno de ellos.Cómo podría hacerlo??

Gracias

[JavierB]

Hola robandrox

Este mensaje te puede ayudar:

http://www.forosdelweb.com/f13/agregar-texboxs-254300/

Saludos,

[robandrox]

La verdad es que no tengo mucha idea de Javascript asi que si pudieran ser más específicos se lo agradecería.Yo lo que he hecho es lo siguiente:
<script>
num=0;
function agregar(fil) {
obj=fil.form;
num++;

elem=document.createElement('input');

elem.type='text';

elem.name='opcion'+num;

elem.value=fil.value;

obj.appendChild(elem);
}
</script>

y luego en el formulario he puesto:

<select onchange="agregar(this)">

pero no me funciona.Además quiero que cada campo se añada en una columna de una tabla.

Gracias

[robandrox]

El codigo anterior lo que hace es añadir un campo text cada vez que selecciono una de las tres opciones(independientemente de la que seleccione) y yo lo que quiero es que cree 3,4 ó 5 según la opción seleccionada(por defecto que imprima tres).A alguien se le ocurre cómo hacerlo??

[caricatos]

Hola:

Se me ocurre que también pases el valor numérico que quires que se repita la inserción (que podría tratarse del value del select) y hacer un bucle...

<select onchange="agregar(this)">
function agregar(fil) {
n = fil.value;
obj=fil.form;
//num++;
for (var i = 0; i < n; i++) {
elem=document.createElement('input');
elem.type='text';
num++;
elem.name='opcion' + num;
elem.value=fil.value;
obj.appendChild(elem);
}
}

[robandrox]

Muchas gracias Caricatos por la ayuda prestada,pero he probado el código y no hace na de na.

[caricatos]

¿Cómo tienes definidos los options...?

<option value="3" > agregar 3 </option>
<option value="4" > agregar 4 </option>
...

[robandrox]

Los tenia asi:

<option value="tres">3

y ya lo he cambiado a como me has puesto.el problema es que sigue sin hacer lo que yo quiero,porque cada vez que elijo una opcion del select los campos que crea los suma a los anteriores,es decir,si tenia 3 campos y elijo la opcion 4 pues aparecerán 7.Yo lo que quiero es que aparezcan sólo 3,4 ó 5 según la opción que elija.

[caricatos]

Hola otra vez:

Estás pidiendo algo más complejo de lo que era la pregunta inicial... No creo que sean necesarios campos creados con DOM, me parece que solo necesitas que se oculten y deshabiliten los sobrantes de 5 campos...

Es que si se pasa de 5 a 3 lo que tendrías que hacer luego es eliminarlos...
O es que estoy aún más confundido

Saludos

[robandrox]

Si,eso es justo lo que quiero hacer.Si elijo la opcion 3,que me aparezcan tres campos,si elijo la opción 4 que me aparezcan 4 campos y lo mismo con 5,pero que no se sumen.Es muy dificil implementar esto??Es que estoy un poco perdido

[caricatos]

Ahora creo que te podremos ayudar mejor...

<select onchange="mostrar(this)" >
<option value="3" > 3 </option>
<option value="4" > 4 </option>
<option value="5" > 5 </option>
</select>

<input type="text" name="v1" />
<input type="text" name="v2" />
<input type="text" name="v3" />
<input type="text" name="v4" disabled style="display: none "/>
<input type="text" name="v5" disabled style="display: none "/>

... A partir de una definición más o menos así, puedes crear la función mostrar:

function mostrar(yo) {
var f = yo.form;
var cuantos = yo.value;
if (cuantos == 5) {
f.v5.disabled = false;
f.v5.style.display = "inline";
}
if (cuantos > 3) {
f.v4.disabled = false;
f.v4.style.display = "inline";
}
else {
f.v4.disabled = true;
f.v4.style.display = "none";
f.v5.disabled = true;
f.v5.style.display = "none";
}
}

Lo puse "a capella" así que puede tener errores pero espero que hayas entendido la idea.

Saludos

[robandrox]

Realmente maravilloso!!No se como agradecertelo.Ahora solo me queda que me aparezcan dentro de una tabla bien ordenados.Haber si puedo conseguirlo

Muchas gracias

[robandrox]

Y como lo hago si los campos los tengo dentro de una tabla talq ue asi??

Código HTML:

<table>
<tr>
    	<td align="left">Opción a</td><td><textarea name="v1"> </textarea> </td>
    </tr>
    <tr>
    	<td align="left">Opción b</td><td><textarea name="v2" ></textarea></td>
    </tr>
    <tr>
    	<td align="left">Opción c</td><td><textarea name="v3"><textarea></td>
    </tr>
    <tr >
    	<td  align="left">Opción d</td><td><textarea name="v4" disabled style="display: none "></textarea></td>
    </tr>
    <tr >
    	<td  align="left">Opción e</td><td><textarea name="v5" disabled style="display: none "></textarea></td>
    </tr>
</table> 

He intentado hacerlo pero como las etiquetas td y tr no pueden llevar el atributo name no se cómo referenciarlos para activarlos o desactivarlos.

Gracias

[caricatos]

Hola:

No pueden usar el atributo name... (Si que pueden, pero no es cuestión de liarte ) pero se puede usar un id en las filas...

<tr id="v4">
<td align="left">
Opción d
</td>
<td>
<textarea name="v4" disabled style="display: none ">
</textarea>
</td>
</tr>
...

if (cuantos > 3) {
f.v4.disabled = false;
document.getElementById("v4").style.display = "inline";
}
else {....

Saludos

[robandrox]

Muchisimas gracias Caricatos por tu ayuda!!Ya te mandaré un jamoncito....como agradecimiento,je,je.

Por si a alguien le interesa aquí pongo el código final ya que tiene alguna modificación:

<script language="javascript">
<!--
function mostrar(yo) {
var f = yo.form;
var cuantos = yo.value;
if (cuantos == 5) {
f.v4.disabled = false;
f.v4.style.display = "inline";
f.v5.disabled = false;
f.v5.style.display = "inline";
document.getElementById("v4").style.display = "inline";
document.getElementById("v5").style.display = "inline";


}
if (cuantos==4) {
f.v4.disabled = false;
f.v4.style.display = "inline";
f.v5.disabled = true;
document.getElementById("v4").style.display = "inline";
document.getElementById("v5").style.display = "none";
}
else if(cuantos==3) {
f.v4.disabled = true;
f.v4.style.display = "none";
f.v5.disabled = true;
f.v5.style.display = "none";
document.getElementById("v4").style.display = "none";
document.getElementById("v5").style.display = "none";
}
}

//-->
</script>

Código HTML:

<form name="f">
<table align="center">
	<tr>
    	<td align="right">Código del curso</td><td><input type="text" name="codigo_curso">
        &nbsp;Nº de opciones<select  onchange="mostrar(this)">
        <option value="3" >3<option value="4" >4<option value="5">5</select>
    </tr>
    <tr>
    	<td align="left">Código del tema</td><td><input type="text" name="codigo_tema"></td>
    </tr>
    <tr>
    	<td align="left" valign="top">Pregunta</td><td><textarea name="campo1" style="width:600px; height:150px;"></textarea></td>
			<!--<div align="center"><font color="#0000FF" size=5>Centrado</font></div>-->
    </tr>
    <tr>
    	<td align="left">Opción a</td><td><textarea name="v1" style="width:600px; height:75px;  border: 1px solid #ff6676" ></textarea></td>
    </tr>
    <tr>
    	<td align="left">Opción b</td><td><textarea name="v2" style="width:600px; height:75px;border: 1px solid #ff6676"></textarea></td>
    </tr>
    <tr>
    	<td align="left">Opción c</td><td><textarea name="v3" style="width:600px; height:75px; border: 1px solid #ff6676"></textarea></td>
    </tr>
    <tr id="v4" style="display: none">
    	<td align="left">Opción d</td><td><textarea name="v4" disabled style="display: none ;width:600px; height:75px; border: 1px solid #ff6676"></textarea></td>
    </tr>
    <tr id="v5" style="display: none">
    	<td align="left">Opción e</td><td><textarea name="v5" disabled style="display: none ;width:600px; height:75px; border: 1px solid #ff6676"></textarea></td>
    </tr>
    <tr>
    	<td></td><td align="center"><input type="submit" value="guardar"><input type="reset" value="Borrar"></td>
    </tr>
</table> 

[uamistad]

Hola, vi tu pregunta y me interesó, igual que tú apenas ando aprendiendo (aunque ya tenía callo en otro lenguaje) y agarré tu problem de ejercicio, modifiqué algo el código, la tabla se genera dinámicamente. La tabla está en bruto, pero con una hoja de estilos te queda bien chula. Espero sirva.

Código PHP:

  //

<html>
<head><title>Ejercicio de JavaScript</title>

<script>
function cuantosInput()
    {
        //asignación de variables
        var selectItem = document.getElementById("opciones");
        var cuantos = parseInt(selectItem.options[selectItem.selectedIndex].value);
        var tablaD = document.getElementById("tablaDinamica");

        //este es el array de tus preguntas
        var preg = new Array("Nombre","Edad","Sexo","Ciudad","Pais");

        //llenando la tabla dinámica
        var almacenaTabla = '';
        if(cuantos>0){
            almacenaTabla = '<table><tr>';
            for(var i=0;i<cuantos;i++)
                almacenaTabla += '<td>'+preg[i]+'</td><td><input type="text"></td></tr><tr>';
            almacenaTabla += '<td><input type="submit"></td></tr></table>';
        }//end if cuantos
        tablaD.innerHTML = almacenaTabla;
    }//end function cuantosInput
</script>

</head>
<body>
    <form action="#" onSubmit="alert('Información enviada, ¡Gracias!')">
        ¿Cuántos campos quieres?
        <select id="opciones" onChange="cuantosInput()" selected>
            <option value="0">- Elige una Opción -
            <option value="3">Tres Campos
            <option value="4">Cuatro Campos
            <option value="5">Cinco Campos
        </select>
         <div id="tablaDinamica"></div>
    </form>
</body>
</html> 
  

[robandrox]

Hola a todos!!
Vuelvo a retomar este tema porque hoy probando el ejemplo en Opera me di cuenta de un problema.La cosa es que cuando elijo 4 o 5 opciones,pues el cuarto campo o el cuarto y el quinto salen descuadrados,es decir,no salen debajo del tercero sino a la izda.¿Como puedo solucionar esto??

Gracias

[robandrox]

¿alguna idea??

[rasomu]

no se mucho del tema, pero igual si cambias el display "inline", por "block", se soluciona el problema.