login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Toon formuliervelden afhankelijk van dropdown-keuze

Offline VincentG - 10/07/2005 16:35
Avatar van VincentGNieuw lid Hallo,

Ik heb een vraagje en lijkt me het best passen in dit gedeelte, aangezien er JavaScript voor nodig is.

Ik ben voor een site bezig een CMS te schrijven. Aangezien de site behoorlijk geavanceerd is en er ook steeds meer eisen komen aan het CMS, zat ik aan iets te bedenken om de gebruiksvriendelijkheid te bevorderen.

Zo kan men diverse soorten reviews plaatsen (hardware/films/games) en de invoervelden zijn per soort review verschillend.
In plaats van aparte pagina's voor elke type review leek het me het prettigst om eerst een dropdown-menu te geven met diverse opties. Vervolgens krijgt men de vraag om te kiezen hoeveel pagina's het artikel wordt. Afhankelijk van de keuze uit deze 2 dropdown-menu's wordt een stukje code (met een nieuw formulier en/of de gewenste invoervelden) getoond, zonder dat de pagina's vernieuwd hoeven te worden (en de keuze direct zichtbaar resultaat heeft).

Ik heb het weleens eerder gezien en JavaScript is (imo) zo uitgebreid dat het ongetwijfeld mogelijk is.

16 antwoorden

Gesponsorde links
Offline haytjes - 11/07/2005 22:21 (laatste wijziging 11/07/2005 22:29)
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>...</title>
  4. <script>
  5. function begin()
  6. {
  7.   document.getElementById('holder').innerHTML = "
  8.     <form>
  9.     soort review: <select name='review'>
  10.     <option value='hardware'>hardware</option>
  11.     <option value='films'>films</option>
  12.     ... // hier moet je maar meer opties of minder in zetten
  13.     </select>
  14.     <br>
  15.     aantal paginas: <input type='text' name='paginas'> // aantal paginas
  16.     <br>
  17.     <input type='button' onclick='volgende()'> // link naar volgende stukje
  18.     </form>  
  19.   ";
  20. }
  21. function volgende()
  22. {
  23.   var review = document.forms[0].review.options[document.forms[0].review.selectedIndex].value;
  24.   var paginas = document.forms[0].paginas.value;
  25.   document.getElementById('holder').innerHTML = "
  26.     <h1>"+review+"</h1>
  27.   ";
  28.   for(x=0;x<paginas;x++) // textareas aanmaken per pagina
  29.   {
  30.     document.getElementById('holder').innerHTML = document.getElementById('holder').innerHTML + "
  31.     pagina "+(x+1)+"
  32.     <textarea name='pag"+(x+1)+"'></textarea>
  33.      ";
  34.   }  
  35.  
  36. }
  37. </script>
  38. <body onload='begin()'>
  39. <div id='holder'>
  40. </div>
  41. </body>
  42. </html>


dit is al een goe beginnetje 
(er kunnen wel nog fouten in staan)
Offline VincentG - 11/07/2005 22:38
Avatar van VincentG Nieuw lid Hij weergeeeft een blanco pagina bij mij. 
Offline cracker - 12/07/2005 00:45 (laatste wijziging 12/07/2005 00:46)
Avatar van cracker Onbekend @ haytjes:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>

dit moet
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="Javascript" type="text/Javascript">
worden ;)

En
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <body onload='begin()'>
  2. <div id='holder'>

moet dit zijn:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <body onload="begin()">
  2. <div id="holder">
Offline Maarten - 12/07/2005 02:09
Avatar van Maarten Erelid cracker, dat eerste moet alleen voor valideit etc en dat tweede is gewoon properheid, maar geen van beide zal de werking bevorderen hoor.
Offline haytjes - 12/07/2005 10:06
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>...</title>
  4. <script language="Javascript" type="text/Javascript">
  5. var  tekst1 = "";
  6. tekst1 += "<form>";
  7. tekst1 += "soort review: <select name='review'>";
  8. tekst1 += "<option value='hardware'>hardware</option>";
  9. tekst1 += "<option value='films'>films</option>";
  10. tekst1 += "... ";
  11. tekst1 += "</select>";
  12. tekst1 += "<br>";
  13. tekst1 += "aantal paginas: <input type='text' name='paginas'> ";
  14. tekst1 += "<br>";
  15. tekst1 += "<input type='button' onclick='volgende()' value='submit'>";
  16. tekst1 += "</form> ";
  17.  
  18. function begin()
  19. {
  20.   document.getElementById('holder').innerHTML = tekst1;
  21. }
  22. function volgende()
  23. {
  24.   var review = document.forms[0].review.options[document.forms[0].review.selectedIndex].value;
  25.   var paginas = document.forms[0].paginas.value;
  26.   document.getElementById('holder').innerHTML = "<h1>"+review+"</h1>";
  27.   for(x=0;x<paginas;x++) // textareas aanmaken per pagina
  28.   {
  29.     document.getElementById('holder').innerHTML += 
  30.     	"pagina "+(x+1)+"<textarea name='pag"+(x+1)+"'></textarea><br>&nbsp;<br>";
  31.   }  
  32.  
  33. }
  34. </script>
  35. <body onload="begin()">
  36. <div id="holder">
  37. </div>
  38. </body>
  39. </html>

nu werkt het wel ,
't was een foutje in die 1ste tekst, dat het niet over verschillende \n heen mag lopen:s
Offline VincentG - 12/07/2005 17:18
Avatar van VincentG Nieuw lid Hij werkt, alleen jammer dat vrijwel alles in de header komt/staat.


Is het niet mogelijk om iets te doen met set tekst to layer, of toon <div id=selectedvalue>?
http://preorder.xbw.nl/ hier zie je bijv. rechts dat tekst weergeven wordt onclick, maar staat niet in tussen de <head>-tags en zal in mijn geval prettig zijn aangezien het een flinke formulier wordt met php erin.

http://www.e-pr...cc2429a47b
Hier staat iets wat goed werkt, maar ook weer met waarden tussen <head>-tags.

Nog even geprobeerd maar php in JavaScript stukje en tussen de <head>-tags vind ie niet erg fijn.
Offline haytjes - 12/07/2005 18:39 (laatste wijziging 12/07/2005 18:40)
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 anders steek je gewoon
script.js
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var  tekst1 = "";
  2. tekst1 += "<form>";
  3. tekst1 += "soort review: <select name='review'>";
  4. tekst1 += "<option value='hardware'>hardware</option>";
  5. tekst1 += "<option value='films'>films</option>";
  6. tekst1 += "... ";
  7. tekst1 += "</select>";
  8. tekst1 += "<br>";
  9. tekst1 += "aantal paginas: <input type='text' name='paginas'> ";
  10. tekst1 += "<br>";
  11. tekst1 += "<input type='button' onclick='volgende()' value='submit'>";
  12. tekst1 += "</form> ";
  13.  
  14. function begin()
  15. {
  16.   document.getElementById('holder').innerHTML = tekst1;
  17. }
  18. function volgende()
  19. {
  20.   var review = document.forms[0].review.options[document.forms[0].review.selectedIndex].value;
  21.   var paginas = document.forms[0].paginas.value;
  22.   document.getElementById('holder').innerHTML = "<h1>"+review+"</h1>";
  23.   for(x=0;x<paginas;x++) // textareas aanmaken per pagina
  24.   {
  25.     document.getElementById('holder').innerHTML +=
  26.         "pagina "+(x+1)+"<textarea name='pag"+(x+1)+"'></textarea><br>&nbsp;<br>";
  27.   }  
  28.  
  29. }

en rest:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>...</title>
  4. <script type="text/Javascript" src="script.js"></script>
  5. <body onload="begin()">
  6. <div id="holder">
  7. </div>
  8. </body>
  9. </html>
,

dit gaat hij wel slikken hoor
Offline VincentG - 12/07/2005 18:43 (laatste wijziging 12/07/2005 18:44)
Avatar van VincentG Nieuw lid alleen nog php erin zien te krijgen, dat pakt ie niet in js.

Aangezien er na het submitten van het formulier de gegevens in de database gezet moeten worden en in het formulier gegevens uit database getoond moeten worden (bij bijv editten).
Offline Maarten - 12/07/2005 18:47
Avatar van Maarten Erelid Dat kan je doen door de functie aan te passen met argumenten, zodat je bijvoorbeeld
begin(waardeformulierveld) kan gebruiken...
Offline Dolfje - 12/07/2005 19:33
Avatar van Dolfje Gouden medailleGouden medailleGouden medaille

PHP ver gevorderde		 met php - javascript gaat het gemakkelijk als je eerst je variabelen echo en daarna je js included


k'bedoel:
<script>
var tekst1 = "";
<?
$array = explode('\n', $tekst);
foreach( $array as $item)
{
echo "tekst1 += '".$item."';";
}
?>
</script>
<script type="text/Javascript" src="script.js"></script>


zoiets dan
Offline VincentG - 13/07/2005 13:12
Avatar van VincentG Nieuw lid En het werken met hide/show divjes?
Offline haytjes - 13/07/2005 13:30
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 bedoel je dit ???
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. document.getElementById('content1').style.display = 'none'; // content 1 is niet te zien
  3. document.getElementById('content2').style.display = 'block'; // content 2 is te zien
  4. </script>
  5. <div id='content1'>
  6. ....
  7. </div>
  8. <div id='content2'>
  9. ...
  10. </div>
Offline VincentG - 13/07/2005 13:45
Avatar van VincentG Nieuw lid Ja.
Dus als je zeg maar voor optie 2 kiest, dat div 2 getoond wordt, kies je niet voor optie 2 (bijv 1 of 3) dan wordt div 2 gehide en een andere div getoond.
Offline VincentG - 14/07/2005 18:04
Avatar van VincentG Nieuw lid En hoe moet ik daarmee werken, de actions in het formulier bedoel ik?
Offline BigBug - 14/07/2005 18:15
Avatar van BigBug PHP expert
Citaat:
En hoe moet ik daarmee werken, de actions in het formulier bedoel ik?


Kijk eens naar de edit knop 
Offline VincentG - 14/07/2005 18:19
Avatar van VincentG Nieuw lid Ja, maar dan zie niemand het. ;)
Heb nog even wat geprobeerd maar lukt me totaal niet.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.279s