Ocultar un textarea

[Briss]

Hola a todos estoy haciendo una encuesta... con la opción de contestar si (y especificar el porque en un textarea el cual esta oculto se activa al dar click en si) o no (el textarea sigue oculto)

Por ejemplo tiene dudas
Si... aparece el txtarea para contestar en donde...


Tengo el siguiente código el cual funciona bien

Código HTML:

 <input type="radio" value="No" name="adjuntar" onclick = "javascript: var ch=document.getElementById('acta');ch.style.display='none' ; " checked />

<input type="radio" value="Si" name="adjuntar" onclick = "javascript: var ch=document.getElementById('acta');ch.style.display='inline' ; ">
<textarea cols="40" rows="10" id="acta" name="acta" style=" display:none";/></textarea> 

Para el primer reactivo...
Para el segundo solo cambio los id o nombres

Código HTML:

<input type="radio" value="No" name="adjuntar1" onclick = "javascript: var ch=document.getElementById('acta1');ch.style.display='none' ; " checked />
 <input type="radio" value="Si" name="adjuntar1" onclick = "javascript: var ch=document.getElementById('acta1');ch.style.display='inline' ; ">


<textarea cols="40" rows="10" id="acta1" name="acta1" style=" display:none";/></textarea> 

Lo que hago hasta ahora es si en el primer reactivo doy click en si... se muestra el textarea para especificar el porque...
si en el dos doy click en si... se muestra OTRO textarea para especificar el porque...

Lo que quiero hacer es...
si en el 1 doy click en si... escribir el porque en el textarea...
si en el 2 doy click en si tambien... ocultar el primer textarea (acta) sin perder la información escrita en él...

Ya que considero que para 10 preguntas estar mostrando un text area al activar si en cada una de ellas... haría muy extensa la página

GRACIAS DE ANTEMANO

[emprear]

En primer lugar te diría de pasar todo eso a una función, despues usar este esquema

2 radios (si-no) por pregunta
un textarea que aparece y desaparece
Y por comodidad (aunque podria ser solo con los radio) un boton para contestar esa pregunta.

ademas por cada una de las preguntas un campo hidden que guarde el valor del textarea.
Aunque visualmente me parece que el usuario debería ver en pantalla las respuestas para el caso que haya sido si.
Hay muchas variantes que se pueden hacer, pero eso ya es otra cosa
Saludos

[Briss]

De hecho tengo los dos radios por pregunta y el textarea tambien... lo que quiero es q al dar click en la primera respuesta afirmativa... me muestre el textarea (ya lo hace)
al dar click en la segunda respuesta en si... oculte el primer textarea y muestre otro ...
en el tercero si se da click en si... oculte el textarea del 2 y muestre el que le corresponde....


osea lo q no sé como se hace es lo siguien...

como en un radiobutton hago q muestre un textarea (ya esta) pero también q oculte otro

[Briss]

Si es posible mostrar un textarea y ocultar otro con un mismo radiobutton...????

[Briss]

Hola logre hacer lo que pretendía en un inicio...

pero yo creo que sera mucho código así que espero alguien me oriente para ver como podría crear la función que realice lo mismo por fis...


Bueno como decía en primer pregunta tengo esto...

Código HTML:

<input type="radio" value="No" name="adjuntar" onclick = "javascript: var ch=document.getElementById('acta');ch.style.display='none' ; " checked />

<input type="radio" value="Si" name="adjuntar" onclick = "javascript: var ch=document.getElementById('acta');ch.style.display='inline' ; ">
<textarea cols="40" rows="10" id="acta" name="acta" style=" display:none";/></textarea> 

Para el primer reactivo...
Para el segundo solo cambio los id o nombres

Código HTML:

<input type="radio" value="No" name="adjuntar1" onclick = "javascript: var ch=document.getElementById('acta1');ch.style.display='none' ; " checked />
 <input type="radio" value="Si" name="adjuntar1" onclick = "javascript: var ch=document.getElementById('acta1');ch.style.display='inline' ; ">


<textarea cols="40" rows="10" id="acta1" name="acta1" style=" display:none";/></textarea> 

Lo que hacia este código es que si en el primer reactivo doy click en si... se muestra el textarea para especificar el porque...
si en el dos doy click en si... se muestra OTRO textarea para especificar el porque...

lo que quería hacer
si en el 1 doy click en si... escribir el porque en el textarea...
si en el 2 doy click en si tambien... ocultar el primer textarea (acta) sin perder la información escrita en él...

lo que hice para lograrlo fue lo siguiente

Código HTML:

<input type="radio" value="Si" name="adjuntar1" onclick = "javascript: var ch=document.getElementById('acta1');ch.style.display='inline' ; ch=document.getElementById('acta');ch.style.display='none' ; "> 

jeje bueno use la lógica y copie el código que ocultaba a mi textarea

Lo cual funciona... si doy clic en a si en la pregunta uno
sale mi textarea pongo el porque...
si doy clic en si en la dos... sale el textarea q corresponde y se oculta el primero...

ya hice mis pruebas al insertar y no tengo ningún problema...
PERO me gustaría hacer una función ya que agregar esa línea que oculta 9 veces (para cada textarea) creo q va a ser mucho... se puedE pero me gustaría me orientarán para trabajar más limpio

GRACIAS OTRA VEZ

[furoya]

Hola Briss.

Soy medio conspiranóico; y no entiendo por qué no te ponen un ejemplo de algo tan pavo.
Debe ser porque ya lo repetimos mil veces por todo el foro, y no porque tengan algo en tu contra.

La aclaración que te hace emprear es muy acertada. Hay mejores formas de presentar esto que buscas. Pero si estás encaprichado en que sea así, me puse a ver dónde estaba la dificultad. Y francamente no la encontré.

Te dejo una manera de hacerlo, aunque no me di cuenta que pedías un radio, y le puse un check. Ya me parece demasiado antojo ponerle dos controles a algo que se puede hacer sólo con uno.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">

function displeiPorQue(T,I) {
var todosTXTACHKB = 4; //CANTIDAD DE textareaS Y checkboxSES
//alert(todosTXTACHKB)

 if (T.checked){
//alert("check "+T)

  for (x=0; x<todosTXTACHKB; x++) {
  var esteTXTA = document.FRM.getElementsByTagName("textarea")[x];
  var esteCHKB = document.FRM.getElementsByTagName("input")[x];
//alert(esteTXTA.id+" "+esteCHKB.checked)
  
   if (esteTXTA.id == I){ 
// alert(esteTXTA.id); 
   esteTXTA.className = "muestra"; 

// alert(esteTXTA.className); 
   }
   else { 
// alert(esteTXTA.id); 
   esteTXTA.className = "oculta"; 
// alert(esteTXTA.className);
   esteCHKB.checked = false; 
   }
  }
 }

 else {
 document.getElementById(I).className = "oculta";
 }
}
</script>
<style type="text/css">
.oculta {display: none;}
.muestra {display: inline;}
</style>
</head>
<body>

<form name=FRM>
<input type=checkbox onclick=displeiPorQue(this,"alfa")> ¿Por qué?.<br>

<textarea class=oculta id=alfa> Alfa.</textarea><br>

<input type=checkbox onclick=displeiPorQue(this,"bravo")> ¿Por qué?.<br>

<textarea class=oculta id=bravo> Bravo.</textarea><br>

<input type=checkbox onclick=displeiPorQue(this,"charly")> ¿Por qué?.<br>

<textarea class=oculta id=charly> Charly.</textarea><br>

<input type=checkbox onclick=displeiPorQue(this,"delta")> ¿Por qué?.<br>

<textarea class=oculta id=delta> Delta.</textarea><br>
</form>

<h3>Algunos elementos de formulario que no ve el escript.</h3>

¿Qué dice el <code>textarea</code> con <code>id</code> <input id=foxtrot>? 
<input type=checkbox id=golf onclick="document.getElementById('eco').value = 
document.getElementById(document.getElementById('foxtrot').value).value" 
onblur="this.checked = false"><br>

<textarea id=eco></textarea>

</body>
</html>

Un detalle con los input type=hidden (y con los otros tipos también) : no estoy seguro de que guarden los saltos de línea que tiene un textarea. Recuerdo que alguna vez un navegador (ya no sé cuál) no sólo no me los guardaba como caracteres, sino que bajo alguna circunstancia no me aceptaba más de la primer línea. Pero fue hace mucho, puede que ya lo hayan arreglado.

[Briss]

Gracias por responder... bueno en realidad no se mucho de javascript, por eso no es capricho jejeje más bien se me hizo más sencillo...
checo tu código gracias mil por tu respuesta

[Briss]

He cambiado el código para implementarlo en radio button solo que no me queda la parte de cuando dan clic en NO q esta por defecto (para q la caja q corresponda por ejemplo Alfa se oculte)

Perdón por tanta ignorancia estoy comenzando en esto

[emprear]

Amiga, creo que te estás complicando la vida, lo que te puso furoya cumple con los objetivos.
De todas maneras, visualmente creo que es un error ocultar los detalles en caso de que haya hecho click en "SI", suponiendo por supuesto, que si elije "NO", no sea necesario que justifique, creo que visualmente esto sería mejor

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>encuesta más detalles</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos */ 
.oculta{
display: none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function ocultar(ele){
var tarea = document.getElementById('detalles_'+ele);
tarea.style.display = 'none';
tarea.value = '';
}
function mostrar(nele){
var tarea = document.getElementById('detalles_'+nele);
tarea.style.display = 'block';
}
 
function verificar(){
var d1= document.getElementById('detalles_p1').value;   
var d2= document.getElementById('detalles_p2').value;       
alert('Detalles pregunta 1:\n ' + d1 +'\nDetalles pregunta 2: \n' + d2 );
}
//]]>
</script>
</head>
<body>
<form action="#">
<p>¿Está de acuerdo con la ley SOPA? --> <label for="p1">NO</label><input type="radio" value="no" id="p1" name="p1" onclick="ocultar(this.id)"/> 
<label for="p1_s">SI</label><input type="radio" value="si" id="p1_s" name="p1" onclick="mostrar(this.name);" /> <br />
<textarea name="detalles_p1"  id="detalles_p1" rows="2" cols="40" class="oculta"></textarea>
</p>
<p>¿Cree que los juegos olímpicos van a tener éxito? --> <label for="p2">NO</label><input type="radio" value="no" id="p2" name="p2" onclick="ocultar(this.id)"/> 
<label for="p2_s">SI</label><input type="radio" value="si" id="p2_s" name="p2" onclick="mostrar(this.name);" /> <br />
<textarea name="detalles_p2"  id="detalles_p2" rows="2" cols="40" class="oculta"></textarea>
</p>
<p>
<input type="button" value="procesar encuesta" name="procesar" onclick="verificar();"/>
</p>
</form>
</body>
</html>
 

Si se agregan preguntas, basta utilizar 3, 4, 5 etc como substitución en los id y names de los elementos

Saludos

[Briss]

Iniciado por emprear

Amiga, creo que te estás complicando la vida, lo que te puso furoya cumple con los objetivos.
De todas maneras, visualmente creo que es un error ocultar los detalles en caso de que haya hecho click en "SI", suponiendo por supuesto, que si elije "NO", no sea necesario que justifique, creo que visualmente esto sería mejor

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>encuesta más detalles</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos */ 
.oculta{
display: none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function ocultar(ele){
var tarea = document.getElementById('detalles_'+ele);
tarea.style.display = 'none';
tarea.value = '';
}
function mostrar(nele){
var tarea = document.getElementById('detalles_'+nele);
tarea.style.display = 'block';
}
 
function verificar(){
var d1= document.getElementById('detalles_p1').value;   
var d2= document.getElementById('detalles_p2').value;       
alert('Detalles pregunta 1:\n ' + d1 +'\nDetalles pregunta 2: \n' + d2 );
}
//]]>
</script>
</head>
<body>
<form action="#">
<p>¿Está de acuerdo con la ley SOPA? --> <label for="p1">NO</label><input type="radio" value="no" id="p1" name="p1" onclick="ocultar(this.id)"/> 
<label for="p1_s">SI</label><input type="radio" value="si" id="p1_s" name="p1" onclick="mostrar(this.name);" /> <br />
<textarea name="detalles_p1"  id="detalles_p1" rows="2" cols="40" class="oculta"></textarea>
</p>
<p>¿Cree que los juegos olímpicos van a tener éxito? --> <label for="p2">NO</label><input type="radio" value="no" id="p2" name="p2" onclick="ocultar(this.id)"/> 
<label for="p2_s">SI</label><input type="radio" value="si" id="p2_s" name="p2" onclick="mostrar(this.name);" /> <br />
<textarea name="detalles_p2"  id="detalles_p2" rows="2" cols="40" class="oculta"></textarea>
</p>
<p>
<input type="button" value="procesar encuesta" name="procesar" onclick="verificar();"/>
</p>
</form>
</body>
</html>
 

Si se agregan preguntas, basta utilizar 3, 4, 5 etc como substitución en los id y names de los elementos

Saludos

Gracias por la ayuda

[furoya]

Iniciado por emprear

Amiga, creo que ...

¿Cómo que "amiga"? ¿Y cómo saben en este foro si alguien es varón o mujer? ¡Yo me la paso haciendo papelones todos los días por confusión de género.!

En fin, debe ser mi problema. Hace mucho pedí en FdW que aprovecharan toda la información que recolectan sobre nosotros, y le agregasen al lado del avatar un color rosa para las nenas y un celeste para los nenes, así no hay confusiones. En la versión PDA o imprimible no va a aparecer, pero entonces se puede reemplazar por ♂ o ♀.

Es cierto que en el español castellano para el género neutro-abarcativo se usa lo mismo que para el masculino ( 'inclusionistas' abstenerse de cualquier comentario, es así y punto ), pero al dirigirse a alguien (o algo) de manera específica, hay que respetar el género inherente a su condición.

Bien, ahora que sé como dirigirme a ti, vamos a ver un poco el código de nuevo, Briss.

Ese ejemplo que puso emprear me dejó a mi las cosas un poco más claras. No te había entendido que los radiobuttons eran para la respuesta, y que el campo para la aclaración se abría como consecuencia del "Sí". Ese metodo es muy ingenioso, porque de la manera más simple resuelve que el cuestionado decida si quiere seguir viendo o no sus desarrollos anteriores, ya que repitiendo el "Sí" no cambia su respuesta y reaparece el textarea en caso de recargar la página.

Y si aún estás encaprichada (ahora lo escribí bien) en que desaparezcan los que ya pasó, supongo que no te hace falta un nuevo ejemplo porque entre los dós que tienes puedes combinar uno.

Aunque si son muchas respuestas, casi me sumo a lo de usar un sólo textarea para todos, y guardar los comentarios en otro campo oculto, numerándolos para saber cuál es pascual en el servidor. Porque cada vez se lo va a mostrar limpio.

De esa forma, en un input type=hidden podría quedar

Código:

1☻ Citando a la gran Mafalda : "¡PUAJ!".☺2☻Después del spot que Y&R hizo para el gobierno de Argentina, va a ser divertido ver la cara con que los ingleses reciban a los atletas argentos.☺

Usando cualquier método para delimitar los comentarios, éste es sólo un ejemplo.

Si tienes ya una versión definitiva, nos gustaría verla, y si hay que inventar algo nuevo lo trabajamos sobre ella.

[emprear]

Si de esto

+ Briss, resulta no ser una fémina... entónces renuncio a todas mís técnicas analítico-deductivas

<offtopic>


Mi mejor de los recuerdos para


y su papá

1948-CALOI-2012

</offtopic>

Saludos

[furoya]

<offtopic>

Un golpe. Recién me enteré cuando vi tu mensaje.

Algún comentario van a hacer en el Foro de Diseño.

</offtopic>

Iniciado por emprear

entónces renuncio a todas mís técnicas analítico-deductivas

Sí, claro. Porque según tus "técnicas" debes ser un gato ,
KarlanKas y C2am son marcianos,
y seguramente Daniel Ulczyk es un Tesseract .

Y lo del nombre ... puede ser un acrónimo de Barrabrava Rebelde e Insubordinado Sediento de Sangre, así que tampoco dice nada.


Por otro lado, y siguiéndote el juego de la foto ... ¡uno se lleva cada sorpresa.!
Pero a mí no me pasó, me lo contó un amigo.