Formbuilder / Ajax Submit / jQuery Form Plugin

antiheld2000 · 18. Oktober 2012 16:27

Hi,

hat schon mal jemand erfolgreich ein Formbuilder Formular via jQuery versandt? Ich würde mich über Tipps freuen, da mein erster Versuch zwar klappt, aber das Ergebnis nicht in dem definierten DIV angezeigt wird, sondern auf eine neue Seite geleitet wird.

Als Formular habe ich einfach das Standard Kontaktformular genommen und die Anleitung hier befolgt:
Ajax Form Submission with Formbuilder

Mein JS im Template sieht dann wie folgt aus:

Hier klicken, um den Code zum Kopieren zu markieren

…
{literal}
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
		var contact_form = $('#ajax_form_wrap form');
		function formValidate(formData, jqForm, options) {
			// var queryString = $.param(formData);
			// var formElement = jqForm[0];
			// alert('About to submit: \n\n' + queryString);
			contact_form.fadeOut("slow", function(){
				$(".throbber").fadeIn("slow")});
				return true;
				};
				// Prepare form
				var options = {
						target: '#ajax_form_wrap'
					, beforeSubmit: formValidate
					, type: 'post'
				};
				$('#ajax_form_wrap form input[name*=returnid]').attr('value','57');
				$('#ajax_form_wrap form input[name=page]').attr('value','blog');
				contact_form.attr('action','{/literal}{$cgsimple->self_url()}{literal}}?showtemplate=false').ajaxForm(options);
			}); </script> 
{/literal}
…

Jemand eine Idee oder ein funktionierendes Beispiel?

Dank und Gruß
anti

NaN · 18. Oktober 2012 19:14

Ändere mal das return true; in return false;.

antiheld2000 · 19. Oktober 2012 07:54

Das return true wird benötigt, damit es nach dem fadeIn weitergeht. Es fehlte lediglich die submit Funktion. Dachte ich bis eben zumindest… Zwischenzeitlich funktionierte es bei mir. Nur hab ich es irgenwie wieder verbockt und auf einmal funzt es nicht mehr…

{literal}
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var contact_form = $('#ajax_form_wrap form');
function formValidate(formData, jqForm, options) {
var queryString = $.param(formData);
//var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
contact_form.fadeOut("slow", function(){
$(".throbber").fadeIn("slow")});
return true;
};
// Prepare form
var options = {
target: '#ajax_form_wrap'
, beforeSubmit: formValidate
, type: 'post'
};
$('#ajax_form_wrap form input[name=returnid]').attr('value','57');
$('#ajax_form_wrap form input[name=page]').attr('value','blog');
contact_form.attr('action','{/literal}{$cgsimple->self_url()}{literal}}?showtemplate=false').ajaxForm(options);
// Submit form
$('#ajax_form_wrap form').submit(function() {
$(this).ajaxSubmit();
return false;
});
});
</script>
{/literal}

NaN · 19. Oktober 2012 08:41

Gibt es eine Fehlermeldung im Firebug? Im Tab "Konsole" und "Netzwerk" mal die Option "Dauerhaft" aktivieren.

antiheld2000 · 19. Oktober 2012 09:07

Kurze Info:
ReferenceError: jQuery is not defined… Grad keine Zeit zum troubleshooten…

fotografitti · 20. April 2013 11:28

hi, bei mir funktioniert es.
Die submit Funktion darfst du nicht verwenden. Entweder die ajax form options oder die submitform, aber nicht beide. siehe in der doku zur jquery.form.js!
"Showtemplate" muss kleingeschrieben werden und dann ging es bei mir erst, als ich den Action-Aufruf als relativen Pfad angab. Warum, weiß ich nicht.
Hier mein Javascript:

Hier klicken, um den Code zum Kopieren zu markieren

jQuery(document).ready(function(){
var contact_form = $('#ajax_form_wrap form');
function formValidate(formData, jqForm, options) {
contact_form.fadeOut("slow", function(){
//$(".throbber").fadeIn("slow");
});
return true; 
};
// Prepare form
var options = {
target: '#ajax_form_wrap',
//beforeSubmit: formValidate,
};

contact_form.attr('action','ueber-Fotografitti/kontakt.html?showtemplate=false').ajaxForm(options);
});

Aber was nicht funktioniert, und das ist was, was mich nervt, ist das Captcha-Modul. Es validiert nicht, wenn die Form so übermittelt wird. Nur wenn ich bei Captch das unschöne GD-Captcha verwende, funktioniert es! Weiß jemand etwas darüber?
Siehe hier: http://www.fotografitti.de/testkontakt.html

Gruß,

Klaus

Forum für CMS/made simple

#1 18. Oktober 2012 16:27

Formbuilder / Ajax Submit / jQuery Form Plugin

#2 18. Oktober 2012 19:14

Re: Formbuilder / Ajax Submit / jQuery Form Plugin

#3 19. Oktober 2012 07:54

Re: Formbuilder / Ajax Submit / jQuery Form Plugin

#4 19. Oktober 2012 08:41

Re: Formbuilder / Ajax Submit / jQuery Form Plugin

#5 19. Oktober 2012 09:07

Re: Formbuilder / Ajax Submit / jQuery Form Plugin

#6 20. April 2013 11:28

Re: Formbuilder / Ajax Submit / jQuery Form Plugin

Fußzeile des Forums