Zobrazení textarea po vybrání položky ve formuláři

Ahoj,
on na to bude jednoduchý javascript (asi/doufám/snad). Dělám formulář, kde je u každé otázky třeba 5 radiobutonů a zdůvodnění "proč právě tato volba". Dělat pod každou položkou viditelnou textareu je blbost. Avšak script, aby se to po vybrání "rozjelo" a zviditelnila se textarea neumím.

head

<style type="text/css">
.skryte {display: none}
</style>

body

<b>Jakou zeleninu máte nejraději?</b><br><br>

<input type="radio" name="zelenina" value="zeli"> zelí<br><br>
<div class="skryte">
napište prosím proč<br>
<textarea name="proczeli" cols="40" rows="3">
</textarea>
</div>

<input type="radio" name="zelenina" value="mrkev"> mrkev<br><br>
<div class="skryte">
napište prosím proč<br>
<textarea name="procmrkev" cols="40" rows="3">
</textarea>
</div>

<input type="radio" name="zelenina" value="celer"> celer<br><br>
<div class="skryte">
napište prosím proč<br>
<textarea name="procceler" cols="40" rows="3">
</textarea>
</div>

Nevíte to někdo z hlavy, abych to nemusel hledat? Asi to bude chtít dát oněm textarea id co?

Předmět	Autor	Datum
Ano, každému textarea dáš jednoznačné id a style=' visibility : hidden ; ' . Pak na radio button :… hynajs 04.12.2010 15:06	hynajs	04.12.2010 15:06
Bůůůů já jsem střevo! <head> <style type="text/css"> .skryte {display: none} </style> <script type=… Kráťa 04.12.2010 15:35	Kráťa	04.12.2010 15:35
Do argumentu funkce musíme dát konkrétní id, zkusme tohle : onchange="zmen_viditelnost(this,'zeli')… hynajs 04.12.2010 15:49	hynajs	04.12.2010 15:49
No nejde mi to... <style type="text/css"> .skryte {display: none} </style> <script type="text/javas… Kráťa 04.12.2010 16:06	Kráťa	04.12.2010 16:06
To id musíš přiřadit tomu divu, který skrýváš ( nebo skrývat textarea). Zkrátka class="skryte" a id… hynajs 04.12.2010 16:13	hynajs	04.12.2010 16:13
A ještě jsem si všimnul, že používáš display místo visibility. To je potřeba taky sjednotit. Neumím… hynajs 04.12.2010 15:57	hynajs	04.12.2010 15:57
Yuhů píše tohle 2. hodnota CSS vlastnosti visibility. Např. <p style="visibility: hidden"> způsobí… Kráťa 04.12.2010 16:11	Kráťa	04.12.2010 16:11
jQuery and Google are your friends slideDown Edit: A tady to máš předpřipravený, jen copy/paste ht… marekdrtic 04.12.2010 16:14	marekdrtic	04.12.2010 16:14
Nevím, co se rozumí prázdným místem. Visibility používám na mnoha místech, třeba zde : www.psivino.… hynajs 04.12.2010 16:19	hynajs	04.12.2010 16:19
Jo tohle bude asi s pozicováním (nestudoval jsem) na to pak ještě asi budu dělat nápovědu k formulář… Kráťa 04.12.2010 16:27	Kráťa	04.12.2010 16:27
Dopracoval jsem se k tomuto, ale stejně se to po "zaškrtnutí" radia nezobrazí <style type="text/css… Kráťa 04.12.2010 17:03	Kráťa	04.12.2010 17:03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-tran… Flash_Gordon 04.12.2010 17:45	Flash_Gordon	04.12.2010 17:45
To jsem blázen... Mě asi stávkuje PSPad. V něm se mi to nezobrazuje a když jsem to otevřel v Opeře,… Kráťa 04.12.2010 22:14	Kráťa	04.12.2010 22:14
Aha, on to neumí IE a proto ani PSPad. Kráťa 04.12.2010 22:19	Kráťa	04.12.2010 22:19
IE8 to bez problému umí (alespoň mě to funguje + v mozille co jsem zkoušel). Nejprve ale musíš odkle… Flash_Gordon 04.12.2010 22:32	Flash_Gordon	04.12.2010 22:32
Zkusím to hodit na web. Nicméně asi to tak udělám, i když to nebude chodit v ie6. Kráťa 04.12.2010 23:00	Kráťa	04.12.2010 23:00
Jupí dal jsem to na http://krata.bubakov.net/www/pokusy/skryte-textare a/skryte-textarea.html a chod… Kráťa 04.12.2010 23:09	Kráťa	04.12.2010 23:09
Tak. Tohle už je docela prima, jen nechápu, proč to nechodí v IE 6. V IE 8 to mělo kecy, že zabezpeč… Kráťa 04.12.2010 22:58	Kráťa	04.12.2010 22:58
Dotazník začínám vyrábět tady. Má to však jednu velmi podstatnou vadu. Radio zůstane zaškrtlé, takže… Kráťa 05.12.2010 01:01	Kráťa	05.12.2010 01:01
Nechcu ti do toho moc kecat, ale nechceš si tu problematiku nejdřív nastudovat? Metoda pokus-omyl to… JoDiK 05.12.2010 11:12	JoDiK	05.12.2010 11:12
Radiobuton, který se chová jako checkbox se tak chová ve všech prohlížečích co tu mám a choval se ta… Kráťa 05.12.2010 11:37	Kráťa	05.12.2010 11:37
Mi to nedalo a zkusil jsem jak by se to mohlo... Mimochodem, funkce mají i parametry, tak nemusíš dě… JoDiK 05.12.2010 12:01	JoDiK	05.12.2010 12:01
Pěkné, dík. Schoval jsem si oboje, určitě to budu někdy potřebovat. U té "písanky" vpravo - to jde u… poslední Kráťa 06.12.2010 09:51	Kráťa	06.12.2010 09:51

Ano, každému textarea dáš jednoznačné id a style=' visibility : hidden ; ' .

Pak na radio button :

onchange=' zmen_viditelnost(this,id_textarea) ; '

A potom nadefinuješ funkci

function  zmen_viditelnost(tis,id_textarea)   {
   var viditelnost=( tis.value ) ? 'visible' : 'hidden' ;
   document.getElementById(id_textarea).style.visibility=viditelnost ;
}

Bůůůů já jsem střevo!

<head>
<style type="text/css">
.skryte {display: none}
</style>

<script type="text/javascript">
function  zmen_viditelnost(tis,id_textarea)   {
   var viditelnost=( tis.value ) ? 'visible' : 'hidden' ;
   document.getElementById(id_textarea).style.visibility=viditelnost ;
}
</script>

</head>

<body>

<form action="post.php">

<b>Jakou zeleninu máte nejraději?</b><br><br>

<input onclick='zmen_viditelnost(this,id_textarea);' type="radio" name="zelenina" value="zeli"> zelí<br><br>
<div class="skryte">
napište prosím proč<br>
<textarea id="zeli" name="proczeli" cols="40" rows="3">
</textarea>
</div>

skryté to je. Kliknu na radio a nic...

Do argumentu funkce musíme dát konkrétní id, zkusme tohle :

onchange="zmen_viditelnost(this,'zeli');"

Případně by šlo nějak sepnout id buttonů a příslušných textarea , a potom příslušné id_textarea vypočítat z this.id.

A velmi se přimlouvám za onchange, nikoli onclick.

No nejde mi to...

<style type="text/css">
.skryte {display: none}
</style>

<script type="text/javascript">
function  zmen_viditelnost(tis,zeli)   {
   var viditelnost=( tis.value ) ? 'visible' : 'hidden' ;
   document.getElementById(zeli).style.visibility=viditelnost ;
}
</script>

</head>

<body>

<form action="post.php">

<b>Jakou zeleninu máte nejraději?</b><br><br>

<input onchange="zmen_viditelnost(this,'zeli');" type="radio" name="zelenina" value="zeli"> zelí<br><br>
<div class="skryte">
napište prosím proč<br>
<textarea id="zeli" name="proczeli" cols="40" rows="3">
</textarea>

Jo to získávání ID textarea (nemělo by to být ID celého divu v němž je?) co se má zobrazit by bylo fajn, aby to nemělo 3000 řádků kódu Těch otázek je 12 a u každé asi 7 možností.

To id musíš přiřadit tomu divu, který skrýváš ( nebo skrývat textarea).
Zkrátka class="skryte" a id si musí odpovídat. A taky je třeba se rozhodnout mezi display a visibility, jak píšu dole. Já používám visibility, už si nepamatuji proč.

A ještě jsem si všimnul, že používáš display místo visibility.
To je potřeba taky sjednotit. Neumím teď z hlavy přesně charakterizovat rozdíly, ale Yuhů je v www.jakpsatweb.cz někde uvedl.

Yuhů píše tohle

2. hodnota CSS vlastnosti visibility. Např. <p style="visibility: hidden"> způsobí skrytí celého odstavce. Na stránce ale zůstane vymezené místo, kde nic nebude (na rozdíl od display: none, která element jakoby zcela odstraní)

Marek umí, že se to po kliknutí pěkně rozjede dolu.
Markůůůůůůůůůůůůůůůůůůůůůůůůůůůůůů

jQuery and Google are your friends

slideDown

Edit: A tady to máš předpřipravený, jen copy/paste
http://www.dynamicdrive.com/dynamicindex17/animate dcollapse.htm

A jestli jsem dobře pochopil tvůj dotaz, tak to bude tak, že místo tlačítek a popisků "Zobrazit" a "Skrýt" vezmeš Example 4 (aby byly prvky jakoby v "závislé" skupině) a dáš proceduru do onClick u checkboxu/radiobuttonu:

PS: Ale mysli taky na lidi co mají zakázanej javascript, tudíž div s velkým nadpisem "Máte vypnutý Javascript a odkaz na alternativní ne-JS stránku", kterému dá vlastnost display:none; javascript hned po spuštění stránky.

Nevím, co se rozumí prázdným místem.
Visibility používám na mnoha místech, třeba zde :

www.psivino.cz

když si klikneš na Medailónek nebo Zde mu můžete napsat.

Jo tohle bude asi s pozicováním (nestudoval jsem) na to pak ještě asi budu dělat nápovědu k formuláři. Pozicování vlastně udělá jakousi vrstvu myslím.
Jinak se domnívám, že prázdné místo je s vynecháním místa na tu textarea,

radio zelí

radio mrkev

radio celer

kdežto "neprázdné"

radio zelí
radio mrkev
radio celer

Dopracoval jsem se k tomuto, ale stejně se to po "zaškrtnutí" radia nezobrazí

<style type="text/css">
.skryte {display: none}
</style>

<script type="text/javascript">
function  zmen_viditelnost(tis,zeli)   {
   var viditelnost=( tis.value ) ? 'visible' : 'hidden' ;
   document.getElementById(zeli).style.visibility=viditelnost ;
}
</script>

</head>

<body>

<form action="post.php">

<b>Jakou zeleninu máte nejraději?</b><br><br>

<input onclick="zmen_viditelnost(this,'zeli');" type="radio" name="zelenina" value="zeli"> zelí<br><br>
<div id="zeli" class="skryte">
napište prosím proč<br>
<textarea  name="proczeli" cols="40" rows="3">
</textarea>
</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>New document</title>
</head>
<body>
<style type="text/css">
.skryte {display: none}
.odkryte {
	display: }
	
}
</style>

<script type="text/javascript">
function  zmen_viditelnost()   {
	 document.getElementById("zeli").style.display = "";

}
</script>



<form action="post.php">

<b>Jakou zeleninu máte nejraději?</b><br><br>

<input onclick="zmen_viditelnost();" type="radio" name="zelenina" value="zeli"> zelí<br><br>
<div id="zeli" style="display:none;">
napište prosím proč<br>
<textarea  name="proczeli" id="zeli2" cols="40" rows="3">
</textarea>
</div>
</form>



</body>
</html>

Případně přes třídy:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>New document</title>
</head>
<body>
<style type="text/css">
.skryte {display: none}
.odkryte {
	display: }
	
}
</style>

<script type="text/javascript">
function  zmen_viditelnost()   {
	 document.getElementById("zeli").className = "odkryte";

}
</script>



<form action="post.php">

<b>Jakou zeleninu máte nejraději?</b><br><br>

<input onclick="zmen_viditelnost();" type="radio" name="zelenina" value="zeli"> zelí<br><br>
<div id="zeli" class="skryte">
napište prosím proč<br>
<textarea  name="proczeli" id="zeli2" cols="40" rows="3">
</textarea>
</div>
</form>



</body>
</html>

To jsem blázen... Mě asi stávkuje PSPad. V něm se mi to nezobrazuje a když jsem to otevřel v Opeře, tak ano.
Jdu vyzkoušet přidat položky, děkuji ti 548x.

Aha, on to neumí IE a proto ani PSPad.

IE8 to bez problému umí (alespoň mě to funguje + v mozille co jsem zkoušel).
Nejprve ale musíš odklepnout povolení pro skripty, protože java-skripty z disku mají zakázanou funkčnost (pro IE).

Zkusím to hodit na web. Nicméně asi to tak udělám, i když to nebude chodit v ie6.

Jupí dal jsem to na
http://krata.bubakov.net/www/pokusy/skryte-textare a/skryte-textarea.html
a chodí to i v ie6.
Něco takového jednoduchého jsem si představoval. Ale ty scripty asi budu dávat před inputy, aby se to nenačítalo sto let. Když se načtou první dva hned a může se vyplňovat, než se vyplní, donačte se to.

Ale nechápu to. Dřív mi v PSPadu ty scripty z disku chodily. Že by to bylo přechodem z XP na win 7?

Tak. Tohle už je docela prima, jen nechápu, proč to nechodí v IE 6. V IE 8 to mělo kecy, že zabezpečení blokuje obsah a musel jsem 2x odkliknout "povolit", tak že by proto?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>skryte textarea</title>
</head>
<body>
<style type="text/css">
.skryte {display: none}
.odkryte {display: block}
</style>

<script type="text/javascript">
function  zmen_viditelnost_zeli()   {
	 document.getElementById("zeli").className = "odkryte";

}
</script>

<script type="text/javascript">
function  zmen_viditelnost_celer()   {
	 document.getElementById("celer").className = "odkryte";

}
</script>



<form action="post.php">

<b>Jakou zeleninu máte raději?</b><br><br>

<input onclick="zmen_viditelnost_zeli();" type="radio" name="zelenina" value="zeli"> zelí<br><br>
<div id="zeli" class="skryte">
napište prosím proč<br>
<textarea  name="proczeli" id="zeli2" cols="40" rows="3">
</textarea>
</div>

<input onclick="zmen_viditelnost_celer();" type="radio" name="zelenina" value="celer"> celer<br><br>
<div id="celer" class="skryte">
napište prosím proč<br>
<textarea  name="procceler" id="celer2" cols="40" rows="3">
</textarea>
</div>
</form>



</body>
</html>

Dotazník začínám vyrábět tady. Má to však jednu velmi podstatnou vadu. Radio zůstane zaškrtlé, takže jdou rozkliknout všechny co tam jsou. Ono by nevadilo, že jdou rozkliknout, ale že jdou "označit" všechny jako checkboxy vadí.
http://krata.bubakov.net/www/skrytetitulky/dotazni ky/en/

Nechcu ti do toho moc kecat, ale nechceš si tu problematiku nejdřív nastudovat? Metoda pokus-omyl totiž u JavaScriptu není zrovna nejefektivnější (vlastní zkušenost).
Mimochodem, v IE6 nelze změnit styl přiřazený nějakému prvku na jiný takto snadno. Kdysi jsem to potřeboval a našel na internetu řešení docela složitou funkcí. Je dobře, že nové prohlížeče už to umí přímo...

Radiobuton, který se chová jako checkbox se tak chová ve všech prohlížečích co tu mám a choval se tak i v případě, kdy jsem vyndal ono onklik na input a udělal to jako odkaz viz
http://krata.bubakov.net/www/skrytetitulky/dotazni ky/en/index-odkazy.php

Mi to nedalo a zkusil jsem jak by se to mohlo...
Mimochodem, funkce mají i parametry, tak nemusíš dělat funkci pro každý prvek zvlášť...
Viz upravený tvůj první pokus...

Edit: nebylo by to vůbec lepší třeba takhle?

Pěkné, dík. Schoval jsem si oboje, určitě to budu někdy potřebovat. U té "písanky" vpravo - to jde udělat, když jsou možnosti s krátkým textem. Ale u toho, co dělám budou dlouhé a nevešlo by se to.
No a stejně to bude všechno jinak, jelikož bude pouze jedna písanka pro jednu otázku, ať vybere cokoli viz
http://krata.bubakov.net/www/skrytetitulky/dotazni ky/en/index.jedna-pisanka.php .
Z kódu jsem vyhodil snad 50 řádků a to je jedna otázka z dvanácti.

Zpět do poradny Odpovědět na původní otázku Nahoru