✔ Formular per AJAX abschicken und Shadowbox öffnen

[DiDiJo]

Hi Leute,

ich hab eine Formular in meinem CMS-System, was den kompletten Content einer Seite verarbeitet. Nun möchte ich gerne eine Preview Funktion einbauen.

Das ganze hab ich mir inetwa so vorgestellt. Der User arbeitet im Formular und klickt anstatt auf "Speichern" auf "Preview anzeigen".

Nach dem Klick passiert folgendes:
1. Mein Aktuelles Formular soll per AJAX an die Seite _ajax.preview.php geschickt werden, welches die Daten aus dem Formular in eine temporäre DB speichert.
2. Wurden die Daten erfolgreich gespeichert, soll eine Shadowbox geöffnet werden, die die Homepage im 'Preview Modus' startet.

Ich hab folgendes AJAX Grundgerüst, was ich nicht nur für mein momentanes Anliegen nutze. Das sollte also nicht verändert werden:

// JavaScript Document
var http_request = false;

// Wir starten eine Postanfrage, die parameter wurden getMäßig zusammengesetzt

function makePOSTRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
	 http_request = new XMLHttpRequest();
	 if (http_request.overrideMimeType) {
		// set type accordingly to anticipated content type
		//http_request.overrideMimeType('text/xml');
		http_request.overrideMimeType('text/html');
	 }
  } else if (window.ActiveXObject) { // IE
	 try {
		http_request = new ActiveXObject("Msxml2.XMLHTTP");
	 } catch (e) {
		try {
		   http_request = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {}
	 }
  }
  if (!http_request) {
	 alert('Cannot create XMLHTTP instance');
	 return false;
  }
  
  http_request.onreadystatechange = alertContents;	//Funktion siehe unterhalv
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
}

//Hier läuft eine GET-Anfrage

function makeGETRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
	 http_request = new XMLHttpRequest();
	 if (http_request.overrideMimeType) {
		// set type accordingly to anticipated content type
		//http_request.overrideMimeType('text/xml');
		http_request.overrideMimeType('text/html');
	 }
  } else if (window.ActiveXObject) { // IE
	 try {
		http_request = new ActiveXObject("Msxml2.XMLHTTP");
	 } catch (e) {
		try {
		   http_request = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {}
	 }
  }
  if (!http_request) {
	 alert('Cannot create XMLHTTP instance');
	 return false;
  }
  http_request.onreadystatechange = alertContents;
  http_request.open('GET', url + parameters, true);
  http_request.send(null);
}

function alertContents() {
  if (http_request.readyState == 4) {
	 if (http_request.status == 200) {
		ajaxSuccess(http_request.responseText);
	 } else {
		ajaxError('Es gab ein Problem bei Ihrer Anfrage! Bitte versuchen Sie es erneut.');
	 }
  }
}

Leider muss ich zugeben, dass ich von AJAX keine Ahnung habe. Ich weiß wie ich kleinere GET Requests mit diesem "AJAX-Konstruktor" behandle. Wie ich aber damit mein Formular abschicke weiß ich auch net. Im moment habe ich folgendes:

function makePreview()
{
	ajaxSuccess = showPreview;
	makePOSTRequest('_ajax.preview.php', '');
}

function showPreview(text) {
	el = document.getElementById('preview');
		
	el.innerHTML = text; //sel.options.length = 0;	
}

Die Ajax Preview sieht im moment nur so aus.

<?php
var_dump($_REQUEST);
?>

was muss ich also tun, dass ich im var_dump die Daten von meinem Formular angezeigt kriege. Damit käme ich shconmal ein großen schritt weiter.

achja. wenn das geht würde ich natürlich die POST-paramter NICHT einzeln übertargen müssen. das soltle schon automatisch gehen, da ich sehr viele formularfolder in meinem formular habe

 

[Sven Mintel]

Moin,

was muss ich also tun, dass ich im var_dump die Daten von meinem Formular angezeigt kriege. Damit käme ich shconmal ein großen schritt weiter.

achja ... wenn das geht würde ich natürlich die POST-paramter NICHT einzeln übertargen müssen ... das soltle schon automatisch gehen, da ich sehr viele formularfolder in meinem formular habe

Du musst der Funktion makePOSTRequest() als 2.Argument die Inhalte der Formularfelder übergeben.
Das Format, in dem diese Argumente übergeben werden müssen, ist identisch mit dem, wie du die Parameter in der Adresszeile sehen würdest, wenn du das Formular per GET senden würdest.

 

[DiDiJo]

das heißt, egal wie ich es drehe. ich komm nicht drum herum die formularfelder "einzeln" als Pfad in meinen Request-String zu schreiben. Es gibt keine Möglichkeit per "Funktion" alle Formularfelder auf einmal zu verschicken?

Soweit war ich nämlich schon (das ich die einzelnen Felder in den Request-String schreibe), aber ich dachte es gäbe irgendeine Möglichkeit das Formular direkt per Befehel und Per ajax zu verschicken. Was würde ich beispielsweise machen, wenn ich in meinem Formular 200 Felder verarbeiten möchte. Da wäre es ja sinnvoll nicht alle Variabeln per Hand in den Requst-String zu schreiben.

 

[Sven Mintel]

das heißt, egal wie ich es drehe. ich komm nicht drum herum die formularfelder "einzeln" als Pfad in meinen Request-String zu schreiben. Es gibt keine Möglichkeit per "Funktion" alle Formularfelder auf einmal zu verschicken?

So ist es.

Diverse Frameworks haben dafür zwar Methoden, z.B. jQuery:$(form).serialize(), diese machen es aber auch nicht anders: sie durchlaufen alle Formularfelder und erstellen anhand der Inhalte einen String.

 

[DiDiJo]

alles klar. naja fürs erste reicht es mir, wenn ich Felder per Hand rein schreibe. sollte ich mal nen riesen formular verarbeiten weiß ich jetzt wie ich das anstellen könnte. diese Frameworks soltle ich mir mal anschauen.