login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Ander object bij verandering in form (Opgelost)

Offline Waflix - 20/08/2011 17:24
Avatar van WaflixLid Ik twijfelde of ik dit bij HTML & CSS of bij JavaScript moest plaatsen, maar uiteindelijk heb ik toch gekozen voor HTML & CSS.

De bedoeling van mijn script is dat, wanneer er een verandering is in mijn dropdown box, het bestand dat wordt weergegeven veranderd. Dus wanneer je gaat naar '3' in plaats van '1' wordt het bestand 'yo.php' weergegeven in plaats van 'teletubbies.php'. Dit alles moet gebeuren op dezelfde pagina, en tot nu toe is het nog niet gelukt met het gebruik van JavaScript.

4 antwoorden

Gesponsorde links
Offline vinTage - 20/08/2011 17:33 (laatste wijziging 20/08/2011 17:36)
Avatar van vinTage Nieuw lid Dit moet toch echt met ajax...
Roep middels een onchange in je select een ajax functie aan die het content van de 'te laden' pagina ophaalt en weergeeft..


edit:
Of wil je dat alles al op de pagina staat, maar dat er maar 'een' pagina zichtbaar is (die je al dan niet met een include in je pagina zet)?
Offline Waflix - 20/08/2011 17:35
Avatar van Waflix Lid Ik heb totaal geen ervaring met Ajax. Ik heb het nog nooit gebruikt, ik heb er alleen meerdere malen van gehoort. Zou dit verder kunnen worden uitgelegd?
Offline vinTage - 20/08/2011 17:44 (laatste wijziging 20/08/2011 17:45)
Avatar van vinTage Nieuw lid copy/paste en klaar 

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6.  
  7. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  8. <script>
  9. function inladen(url)
  10. {
  11. $.ajax({
  12.   url: url,
  13.   success: function(data) {
  14.     $('#result').html(data);
  15.   }
  16. });
  17. }
  18. </script>
  19. </head>
  20.  
  21. <body>
  22. <select name="selecteer" onchange="inladen(this.value)">
  23. <option value="">kies</option>
  24. <option value="test.php">test</option>
  25. <option value="test1.php">test1</option>
  26. <option value="test2.php">test2</option>
  27. </select>
  28. <div id="result"><!--hier wordt het content ingeladen--></div>
  29.  
  30. </body>
  31. </html>
Bedankt door: Waflix
Offline Dlol - 03/09/2011 01:53
Avatar van Dlol Lid Nog mooier is in principe:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6.  
  7. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  8. <script>
  9. function inladen(url)
  10. {
  11. $('#result').load(url);
  12. }
  13. </script>
  14. </head>
  15.  
  16. <body>
  17. <select name="selecteer" onchange="inladen(this.value)">
  18. <option value="">kies</option>
  19. <option value="test.php">test</option>
  20. <option value="test1.php">test1</option>
  21. <option value="test2.php">test2</option>
  22. </select>
  23. <div id="result"><!--hier wordt het content ingeladen--></div>
  24.  
  25. </body>
  26. </html>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.167s