Witam!

Mam problem z wysłaniem danych z formularza do mootools'a. Chodzi o moduł Accordion (demo - http://mootools.net/demos/?demo=Accordion). Chciałbym dodawać nowe zakładki wraz z tekstami przez formularz. Dodałem do index.html podkreśleniem fragment JS, który pobiera te pola i przekazuje do frameworka, dodaje nową zakładkę, ale gdy chcę dodać kolejną dodaje się kopia poprzedniej. Dlatego proszę o poradę, bo pewnie robie to źle...

index.html:

[HTML] pobierz, plaintext 
  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" xml:lang="en" lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<link rel="stylesheet" href="demo.css" type="text/css" />
  6. 	<script type="text/javascript" src="../mootools.js"></script>
  7. 	<script type="text/javascript" src="demo.js"></script>
  8. 	<title>Accordion Demo</title>
  9. </head>
  10. <body>
  11. 	<h1>Accordion</h1>
  12. 	<p>
  13. 		<form action="index.html" name="form" method="post">
  14. 		   Podaj tytuł paragrafu: <input type="text" name="title" id="title"><br />
  15. 		   Wpisz zawartośc paragrafu...:<br />
  16. 		   <textarea name="text" id="text" rows="4" cols="60"></textarea><br />
  17. 		   <button id="add">Dodaj!</button>
  18. 		</form>
  19. 	<script type="text/javascript">
  20. 	   var title = document.forms['form'].elements['title'].value;
  21. 	   var text = "<p>"+document.forms['form'].elements['text'].value+"</p>";
  22. 	</script>
  23. 	</p>
  24. 	<hr />
  25. 	<div>
  26. 	</div>
  27. 	<div id="accordion">
  28. 		<h3 class="toggler">History</h3>
  29. 		<div class="element">
  30. 			<h4>Common ancestor</h4>
  31. 			<p>texttt</p>
  32. 		</div>
  33.  
  34. 		<h3 class="toggler">Evidence of universal common descent</h3>
  35. 		<div class="element">
  36. 			<h4>Common biochemistry and genetic code</h4>
  37. 			<p>text</p>
  38. 			<img src="images/phylogenetic_tree.png" width="340" height="230" align="right" alt="" />
  39. 			<p>The universality of many aspects of cellular life is often pointed to as supportive evidence to the more compelling evidence listed above. These similarities include the energy carrier ATP, and the fact that all amino acids found in proteins are left-handed. It is possible that these similarities resulted because of the laws of physics and chemistry, rather than universal common descent and therefore resulted in convergent evolution.</p>
  40. 			<h4>Phylogenetic trees</h4>
  41. 			<p>text1</p>
  42. 		</div>
  43.  
  44. 		<h3 class="toggler">Examples of common descent</h3>
  45. 		<div class="element">
  46. 			<h4>Artificial selection</h4>
  47. 			<p>text2</p>
  48. 			<img src="images/biglittledog.jpg" width="180" height="151" align="right" alt="" />
  49. 			<h4>Dog breeding</h4>
  50. 			<p>text3</p>
  51. 		</div>
  52. 	</div>
  53. </body>
  54. </html>
[HTML] pobierz, plaintext


demo.js :

[HTML] pobierz, plaintext 
  1. window.addEvent('domready', function() {
  2.  
  3.         // var title2 = ${'title'};    
  4. 	// var text2 = ${'text'};   Probowałem też tak, ale to w ogóle nie działa...
  5.  
  6. 	//create our Accordion instance
  7. 	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
  8. 		opacity: false,
  9. 		onActive: function(toggler, element){
  10. 			toggler.setStyle('color', '#41464D');
  11. 		},
  12. 		onBackground: function(toggler, element){
  13. 			toggler.setStyle('color', '#528CE0');
  14. 		}
  15. 	});
  16.  
  17. 	//add click event to the "add section" link
  18. 	$('add').addEvent('click', function(event) {
  19. 		event.stop();
  20.  
  21. 		// create toggler
  22. 		var toggler = new Element('h3', {
  23. 			'class': 'toggler',
  24. 			'html': title
  25. 		});
  26.  
  27. 		// create content
  28. 		var content = new Element('div', {
  29. 			'class': title,
  30. 			'html': text
  31. 		});
  32.  
  33. 		// position for the new section
  34. 		var position = 0;
  35.  
  36. 		// add the section to our myAccordion using the addSection method
  37. 		myAccordion.addSection(toggler, content, position);
  38. 	});
  39. });
[HTML] pobierz, plaintext