Hallo Zusammen,

ich habe schon gesucht aber nichts zu diesem Thema hier gefunden. Im Netz habe ich auch schon gesucht, aber da lässt sich so ein individuelles Problem nicht lösen.

Ich habe ein Problem mit dem Motools Form Tool. Ich will eine Form ausfüllen und dann möchte ich, das <form> Element per Ajax ersetzen.

Das ganze sieht bei mir so aus:

HTML-Code:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<!-- [...] -->
<div id="result">
	<form class="contact" id="contactForm" action="ajax/kontakt.php" method="post">
		<label for="name">Name:</label>
		<input tabindex="1" class="required" type="text" name="name" size="40" maxlength="85" /><br />
		<label for="mail">Email:</label>
		<input tabindex="2" class="required email" type="text" name="mail" size="40" maxlength="85" /><br />
		<label for="text">Text:</label>
		<textarea class="required"  tabindex="3" name="text" cols="50" rows="7"></textarea><br />
		<input  tabindex="4" type="submit" name="button" class="submit" value="Senden">
	</form>
</div>
<!-- [...] -->

Die test.js sieht folgender maßen aus:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

window.addEvent('domready', function() {       // Kontaktformular senden         $('contactForm').addEvent('submit', function(e) {             e.stop();             var result = $('result').empty().addClass('ajax-loading');             this.set ('send', {                 onComplete : function(response) {                     method: 'post';                     result.removeClass('ajax-loading');                     result.set('html', response);                 }             });             this.send();         });     });

Folgendes wird gemacht: Er ersetzt den result-div und setzt die ajax/kontakt.php in das div. Eigentlich genau das was ich will. Aber irgendwie kommt bei der php kein POST an und ich habe keine Ahnung warum!

Hier ist ein funktionierendes Beispiel von Mootools: http://demos.mootools.net/Form.Send

Ich hoffe einer kann mir helfen

gruß

Moin,

das Problem ist dies hier:

Code :

1	var result = $('result').[B]empty()[/B].addClass('ajax-loading');

empty() entfernt all Kindknoten aus #result, es gibt daher nichts mehr zu senden, weil es kein Formular mehr gibt.

Lösung: verschiebe diese Zeile hinter this.send()

danke für die antwort

klappt perfekt

Falls es jemand jetzt noch interessiert, ich habe hierfür mal eine allgemeine Mootools Lösung erstellt.
Ich hatte das Problem auch schon mal und ich denke viele Webmaster würden gerne möglichst einfach ihre Formulare mit Mootools und Ajax senden.
Aus diesem Grund habe ich eine kleine Klasse erstellt die das abnimmt.

http://mootools.net/forge/p/smartajaxform

Einzubinden mit

Code :

1 2 3 4 5 6 7 8 9

<script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="SmartAjaxForm.js"></script> <script> <!-- window.addEvent('domready', function() {     var mySmartFormObj = new SmartAjaxForm(); }); --> </script>

im head.

Im Body, im Form-Tag einfach die Css-Klasse: class='ajaxForm' ergänzen und schon wird das Formular automatisch in ein Ajax-Formular umgewandelt.

z.B.:>

Code :

1	<form id="myForm" class="ajaxForm" action="demo.php" method="post">

Wichtig ist noch, dass ihr kein Cross-Domain Request betreibt. also die URL im action-Attribut des Formulars sollte relativ angegeben werden und nicht mit http://....
beginnen.

Viel Erfolg damit!