login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Textarea tonen door checkbox

Offline Mythix - 03/10/2005 23:18 (laatste wijziging 03/10/2005 23:26)
Avatar van MythixNieuw lid Ik zou graag doormiddel van een druk op een checkbox een textarea laten verschijnen, maar de vorige textarea mag niet leeg zijn. bij dit laatste loopt het fout, ik heb het volgende in elkaar geknutselt.

  1. function toonVerberg(box,area,vorige){
  2. var leeg = document.review.vorige.value;
  3. if(leeg == "" || leeg == null){
  4. alert("Je hebt nog niets in je vorige pagina geschreven");
  5. }else{
  6. if(box.checked){
  7. document.getElementById(area).style.display='block';
  8. }else{
  9. document.getElementById(area).style.display='none';
  10. }
  11. }
  12. }
  13.  
  14. <form name="review" method="post">
  15.  
  16. <p id="area_none"><textarea name="pagina1"></textarea></p>
  17.  
  18. <input type="checkbox" name="pagina2" onClick="toonVerberg(this,'textarea','pagina1')">
  19. <p id=id="textarea"><textarea></textarea></p>
  20. </form>
  21.  
  22. #textarea {
  23. display: none;
  24. }


hij doet het niet meer sinds ik de check om te kijken of de vorige leeg is toe gevoegt heb, dit is een van de weinige keren dat ik met javascript bezig ben dus zie ik niet direct de fout...

kan iemand me hierin helpen?

7 antwoorden

Gesponsorde links
Offline Thomas - 04/10/2005 07:39
Avatar van Thomas Moderator Er staat "<p id=id="textarea">", dat lijkt me niet kloppen.

Ook weet ik niet of je inline-elementen (de <p>-tag) kunt gebruiken voor het tonen / verbergen van blokken, ik denk dat je hiervoor een block-level element (bijvoorbeeld <div>) moet gebruiken, en ook (naast het display-attribuut) moet werken met visibility.
Offline stenno - 04/10/2005 07:46 (laatste wijziging 04/10/2005 16:51)
Avatar van stenno PHP interesse Het klopte voor geen ene fuck maar hij doet het nu:

  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. </head>
  5. <script language="JavaScript" type="text/javascript">
  6. <!--
  7. function a()
  8. {
  9. {
  10. if((document.review.pagina2.checked = true)&&(document.review.area0.value!==""))
  11.  
  12. {document.getElementById('area2').style.display ='block';}
  13.  
  14. else
  15. {
  16. if ((document.review.pagina2.checked == true)&&(document.review.area0.value==""))
  17.  
  18. {alert("Je hebt nog niets in je vorige pagina geschreven"); document.getElementById('area2').style.display ='none';}
  19. }
  20. }
  21. }
  22. </script>
  23. </head>
  24. <body>
  25. <form name="review" method="post">
  26.  
  27. <p id="area_none"><textarea name="area0"></textarea></p>
  28. <input type="checkbox" name="pagina2" onClick="a()">
  29. <p id="textarea"><textarea id="area2" style='display:none'></textarea></p>
  30. </form>
  31. <body>
  32. </body>
  33. </html>


wel heel veel aangepast hoor. Zat vol fouten !!!

Het belangrijkste is dat je of box.checked je box een variable moet geven en het is checked = true en niet gewoon checked ^^ 

edit1: werkt nog niet helemaal zie ik, de alert doet het niet !! maak ik vanmidddag af 

edit2: Het goede script je kan ook maken dat de checkbox pas ingedrukt kan worden (enabled is) wanneer er iets is ingevuld in je textarea1. Maar dat is misschien maar een ideetje ;-)

@ fangorn: als het goed is kan je alle atributen verbergen. tenminste ik weet dat je tables, div's, afbeeldingen, textareas en spans zowieso kan verbergen. Dus zal het wel bij alles kunnen
Offline Mythix - 04/10/2005 17:29
Avatar van Mythix Nieuw lid Ok het werkt ook prima bij mij bedankt voor al je hulp!
nu zou ik enkel het script meerdere keren achter elkaar willen gebruiken, en dus moet het met parameters werken. Ik heb al probere knutselen maar het loopt weer van de eerste keer mis 

de funtie zou zo moeten komen: a('checkboxNaam','vorigeTekstveldNaam','teTonenVeldNaam')

ik dacht ik zet de parameters in de functie en ik verrander de namen door de namen van de variabelen maar het deed niet veel meer 

kan je me nog een keer helpen?
Offline stenno - 04/10/2005 18:02 (laatste wijziging 04/10/2005 18:08)
Avatar van stenno PHP interesse Lijkt mij meer iets voor een for lus maar parameters kan ook.

edit ik heb het even met een for lus gedaan ;-)

  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. </head>
  5. <script language="JavaScript" type="text/javascript">
  6. <!--
  7. function a()
  8. {
  9. var aa = Array('p1','p2','p3','p4'); <!-- voeg hier je even en oneven id's van je checkboxen in !!! -->
  10. var ab = Array('area1','area3','area5','area7'); <!-- // voeg hier je oneven textarea id's in !!! -->
  11. var ac = Array('area2','area4','area6','area8'); <!-- // voeg hier je even textarea id's in !!! -->
  12. var y = ab.length;
  13. for(x=0; x<y; x++)
  14. {
  15. {
  16. if((document.getElementById(aa[x]).checked == true)&&(document.getElementById(ab[x]).value!==""))
  17.  
  18. {document.getElementById(ac[x]).style.display ='block';}
  19.  
  20. else
  21. {
  22. if((document.getElementById(aa[x]).checked == true)&&(document.getElementById(ab[x]).value==""))
  23.  
  24. {alert("Je hebt nog niets in je vorige pagina geschreven"); document.getElementById(ac[x]).style.display ='none';}
  25. }
  26. }
  27. }
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <form name="review" method="post">
  33.  
  34. <p id="area_none"><textarea id="area1"></textarea></p>
  35. <input type="checkbox" id="p1" onClick="a()">
  36. <p id="textarea"><textarea id="area2" style='display:none'></textarea></p>
  37.  
  38. <p id="area_none"><textarea id="area3"></textarea></p>
  39. <input type="checkbox" id="p2" onClick="a()">
  40. <p id="textarea"><textarea id="area4" style='display:none'></textarea></p>
  41.  
  42. <p id="area_none"><textarea id="area5"></textarea></p>
  43. <input type="checkbox" id="p3" onClick="a()">
  44. <p id="textarea"><textarea id="area6" style='display:none'></textarea></p>
  45.  
  46. <p id="area_none"><textarea id="area7"></textarea></p>
  47. <input type="checkbox" id="p4" onClick="a()">
  48. <p id="textarea"><textarea id="area8" style='display:none'></textarea></p>
  49.  
  50. <!-- voeg hier eventueel nog meer van deze stukken toe !!
  51. let op als je hier iets toe voegt moet je dat in de array in de functie ook doen !!! -->
  52. </form>
  53. <body>
  54. </body>
  55. </html>
Offline Mythix - 04/10/2005 18:14
Avatar van Mythix Nieuw lid Ok ik snap niets van de code maar ik denk niet dat het juist in elkaar zit, het algoritme gaat zo:

als er in de eerste textarea iets ingevult is kan je nog een textarea toevoegen door de checkbox te gebruiken, als er in die 2de textarea iets geschreven is heb je de mogelijkheid nog een derde toe te voegen enzovoort ....
Offline stenno - 04/10/2005 18:25 (laatste wijziging 04/10/2005 21:34)
Avatar van stenno PHP interesse ohw inderdaad je hebt helemaal gelijk  

Gun me een momentje ^^ 

hier is hij dan:
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. </head>
  5. <script language="JavaScript" type="text/javascript">
  6. <!--
  7. function a()
  8. {
  9. var aa = Array('p1','p2','p3','p4'); <!-- voeg hier je even en oneven id's van je checkboxen in !!! -->
  10. var ab = Array('area1','area2','area3','area4','area5','area6');
  11. var y = aa.length;
  12. for(x=0; x<y; x++)
  13. {
  14. {
  15. if((document.getElementById(aa[x]).checked == true)&&(document.getElementById(ab[x]).value!==""))
  16.  
  17. {document.getElementById(ab[x+1]).style.display ='block';
  18. document.getElementById(aa[x+1]).style.display ='block';}
  19.  
  20. else
  21. {
  22. if((document.getElementById(aa[x]).checked == true)&&(document.getElementById(ab[x]).value==""))
  23.  
  24. {alert("Je hebt nog niets in je vorige pagina geschreven"); document.getElementById(ab[x+1]).style.display ='none';}
  25. }
  26. }
  27. }
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <form name="review" method="post">
  33.  
  34. <p id="area_none"><textarea id="area1"></textarea></p>
  35. <input type="checkbox" id="p1" onClick="a()">
  36. <p id="textarea"><textarea id="area2" style='display:none'></textarea></p>
  37. <input type="checkbox" id="p2" onClick="a()" style='display:none'>
  38. <p id="area_none"><textarea id="area3" style='display:none'></textarea></p>
  39. <input type="checkbox" id="p3" onClick="a()" style='display:none'>
  40. <p id="textarea"><textarea id="area4" style='display:none'></textarea></p>
  41. <input type="checkbox" id="p4" onClick="a()" style='display:none'>
  42. </form>
  43. <body>
  44. </body>
  45. </html>


edit 1: Vebeterd en Getest script !!! werkt 
Offline Mythix - 05/10/2005 12:34
Avatar van Mythix Nieuw lid Ok top! bedankt voor je hulp , het script werkt perfect !
ookal snap ik er niet veel van 

ik heb alleen na de alert nog een kleine regel toegevoegt om de checkbox terug op false te zetten.

I O U 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.261s