Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: http://redaxo.org/slack/
bdiekert
Beiträge: 9
Registriert: 25. Mai 2013, 13:00

XForm - Formular per AJAX übergeben

4. Jun 2013, 02:53

Hallo Ihr Lieben –

ich bastel grade ein wenig mit XForm rum und würde das Formular (in meinem Fall ein Kontaktformular) gerne per AJAX an den PHP-Teil übergeben, mir dort die Fehler– oder Erfolgsmeldung abholen und diese dann dynamisch in ein DIV einbinden.

In der Vergangenheit habe ich das ganze über einen kleinen JS unter dem Formular gemacht und einem PHP-File, das auf dem Server lag. Der JS-Teil sah etwa so aus:

Code: Alles auswählen

<script type="text/javascript">
	
	$('#formular').submit(function(){

			var action = $(this).attr('action');

			$("#message").slideUp(500,function() {
			$('#message').hide();

			$.post(action, {
				name: $('#name').val(),
				email: $('#email').val(),
				comments: $('#comments').val()
			},
				function(data){
					document.getElementById('message').innerHTML = data;
					$('#message').slideDown('slow');
					if(data.match('success') != null) $('#formular').slideUp('slow');
				}
			);

			});

			return false;

		});
	
</script>
Im PHP-Teil habe ich dann einfach die Errors in eine Variable geschrieben und per Echo ausgegeben.

Gibt es die Möglichkeit eine solche Funktionalität mit XForm zu realisieren? Wenn ja: wie?

Benutzeravatar
Xong
Beiträge: 2081
Registriert: 5. Jun 2008, 08:30
Wohnort: Halle (Saale)

Re: XForm - Formular per AJAX übergeben

4. Jun 2013, 15:19

bdiekert hat geschrieben:Gibt es die Möglichkeit eine solche Funktionalität mit XForm zu realisieren? Wenn ja: wie?
Klar, das ist sogar recht einfach.
Du brauchst dafür nur das jQuery-Form-Plugin und folgenden Code:

Code: Alles auswählen

$(document).on('submit', '#rex-xform form', function()
{
  $(this).ajaxSubmit({
    clearForm: true,
    success: function(responseText, statusText, xhr, $form)
    {
      $('#rex-xform').replaceWith($('#rex-xform', responseText));
      $('input[type=submit]', this).removeClass('loading').removeAttr('disabled');
    }
  });
  
  $('input[type=submit]', this).attr('disabled','disabled').addClass('loading');
  
  return false;
});
Beispielseite: http://www.identcenter.de/ (einfach mal auf Absenden klicken, ohne was einzugeben)
Zuletzt geändert von Xong am 5. Jun 2013, 10:57, insgesamt 1-mal geändert.
LG,
Xong

Bild Määääääääääääääääääääääääh!

Benutzeravatar
Cheffchen
Beiträge: 1809
Registriert: 3. Mär 2009, 13:51
Wohnort: Berlin
Kontaktdaten: Website

Re: XForm - Formular per AJAX übergeben

4. Jun 2013, 23:05

Hallo,

kann ich als unwissender mal rein hauen?
Genau nach so was suche ich schon ewig und habe sogar umständlich sachen mit ajax und eigenen template gepastelt was nicht gerade einfach zu pfelgen ist.

Jetzt lese ich hier
Klar, das ist sogar recht einfach.
Du brauchst dafür nur das jQuery-Form-Plugin und folgenden Code:
habe mir extra xForm reingezogen und funzt ja auch super da recht einfach aber das mit dem jquery Plugin funzt nicht da ich nicht so richtig weiss wie ich das anstellen soll.

was passiert, der submit wird deaktiviert und die inhalt der felder beim ersten klick gelöscht und das wars, keine Fehlerausgabe vom Formular oder fehlerkonsole.

Kann bitte einer mal ein kleine beschreibung machen wie mann die xForm validierung auch per jquery bekommt ohne neuladen der ganzen seiten?
Oder ist das doch zu umständlich?

Cheffchen

Benutzeravatar
Xong
Beiträge: 2081
Registriert: 5. Jun 2008, 08:30
Wohnort: Halle (Saale)

Re: XForm - Formular per AJAX übergeben

5. Jun 2013, 00:27

Cheffchen hat geschrieben:Kann bitte einer mal ein kleine beschreibung machen wie mann die xForm validierung auch per jquery bekommt ohne neuladen der ganzen seiten?
Wenn das Formular funktioniert, sollte es eigentlich keine Probleme geben.
Du solltest also erstmal das Formular aufsetzen und den Javascript-Code danach einbinden.
LG,
Xong

Bild Määääääääääääääääääääääääh!

Benutzeravatar
Cheffchen
Beiträge: 1809
Registriert: 3. Mär 2009, 13:51
Wohnort: Berlin
Kontaktdaten: Website

Re: XForm - Formular per AJAX übergeben

5. Jun 2013, 10:47

Hallo,

das Formular und die validate Prüfungen sind kein Problem, Formular funktioniert.

Wenn ich jetzt den code Block von oben einfüge funktioniert es nicht mehr und kommt auch keine Fehlermeldungen, natürlich inkl. des plugin.

Hier mal in Aktion bzw nicht :O): Test Formular

kann mal einer drüber schauen, was ich wieder falsch mache.

Seit knädig, mein ersten XForm Formular :O)

Cheffchen

Benutzeravatar
Xong
Beiträge: 2081
Registriert: 5. Jun 2008, 08:30
Wohnort: Halle (Saale)

Re: XForm - Formular per AJAX übergeben

5. Jun 2013, 10:58

Hi,

ich hab den Beispielcode nochmal geändert. Statt #form muss der Selektor #rex-xform lauten.
LG,
Xong

Bild Määääääääääääääääääääääääh!

Benutzeravatar
Cheffchen
Beiträge: 1809
Registriert: 3. Mär 2009, 13:51
Wohnort: Berlin
Kontaktdaten: Website

Re: XForm - Formular per AJAX übergeben

5. Jun 2013, 11:21

Hallo,

oh da hätte ich auch drauf können einfach mal die id´s und classen checken.

Mit dem richtigen Code ist das echt super einfach.

Funktioniert Super, das ist echt ein Wiki wert, was ich da schon rum gemacht habe und andere aber auch von den ich gehört haben. wäre schade wenn das im forum nirvana verschwindet.

Besten Super Dupa Danke,

Cheffchen

bdiekert
Beiträge: 9
Registriert: 25. Mai 2013, 13:00

Re: XForm - Formular per AJAX übergeben

5. Jun 2013, 15:51

Hey –

vielen Dank für diesen tollen Lösungsweg.

Meine Problematik ist, das die Erfolgsnachricht nicht angezeigt wird.

EDIT: Habe den Fehler gefunden. Wenn ich ein DIV drum mache und die ID dann im Plugin eingebe funktionierts. In Meinem Fall #formular_xy

Code: Alles auswählen

<script type="text/javascript">
	
	$(document).on('submit', '#rex-xform form', function(){
		$(this).ajaxSubmit({
		clearForm: true,
		success: function(responseText, statusText, xhr, $form) {
			$('#formular_xy').replaceWith($('#formular_xy', responseText));
			$('input[type=submit]', this).removeClass('loading').removeAttr('disabled');
		}
	});

	$('input[type=submit]', this).attr('disabled','disabled').addClass('loading');

	return false;
	});
	
</script>

Edit – Finale Lösung:

Mein X-Form-Modul habe ich jetzt so aufgebaut in der Ausgabe:

Code: Alles auswählen

<div id="xform_wrapper"><div id="message"><div id="message_inner"></div></div><div id="my_xform">

### MODUL AUSGABE VON XFORM ###

</div></div>
und mein Javascript-Code sieht so aus:

Code: Alles auswählen

$(document).on('submit', '#form_formular', function(){
	$(this).ajaxSubmit({
		success: function(responseText) {
			var temp = responseText;
			$('#message').slideUp('slow',function(){

				if(temp.match('rex-message') !== null) {
					$('#message_inner').html($('#my_xform > .rex-message', temp));
					$('#form_formular').slideUp('slow');
					$('#message').slideDown('slow');
				}
				else {
					$('#message_inner').html($('#my_xform > #rex-xform > ul', temp));
					$('#message').slideDown('slow',function(){
						$('input[type=submit].submit_loading').removeClass('submit_loading').removeAttr('disabled');
					});
				}
				
			});
		}
	});

	$('input[type=submit]', this).attr('disabled','disabled').addClass('submit_loading');
	return false;
});
Mein Ziel war es das gespringe weg zu bekommen und es insgesamt ansehnlicher zu machen. Für mein Projekt ist es mir damit gelungen.

Ob der Code wirklich die "Best-Practice" darstellt kann ich nicht sagen. Vielleicht hat jemand von euch noch einen besseren Ansatz.

Liebe Grüße
Björn

tombaer
Beiträge: 154
Registriert: 30. Mär 2008, 00:41
Kontaktdaten: ICQ

Re: XForm - Formular per AJAX übergeben

22. Jan 2016, 20:05

Hallo zusammen!

Auch wenn dieser Thread schon einige Zeit alt ist, habe ich doch hier einen Teil der Lösung
für mein Problem gefunden. Nur nicht ganz :-) Kann mir hier noch jemand helfen?

Ich baue gerade die folgende Seite: http://cms.serius-strassenkappen.de/pro ... 581-s.html

Unter dem Produkt ist ein blauer Balken mit einem Button "Anfragen". Ein Klick darauf öffnet ein
Panel, dort ist ein Artikel eingebunden, der das mit der xform erstellt Formular enthält.
Ich habe das xform-Modul bereits wie in diesem Thread beschrieben, abgeändert und das Formular
wird auch abgesendet, allerdings werden keine Fehler und kein Dankestext ausgegeben.

Bin dankbar für jeden Tipp dazu, danke schonmal!

Liebe Grüsse

Tom
------------------------------------------------
rotzek - Werbung, Hosting und IT
www.rotzek.de
------------------------------------------------

Zurück zu „Allgemeines [R4]“