Allgemeine "Ajax-Brücke" - einmal Ajax für jedes Formular??

The Scout · 17. Februar 2013

Heyho, ich hab mal wieder ne Frage:
Die Seite an der ich arbeite basiert bereits auf einem Ajax-Framework (Vorlage: Advitum-Tutorial, mit dem ich die Inhalte dynamisch ändere.

Nun mein Problem und die Frage dazu: Ich möchte im statischen Teil ein Ajax-Script einbinden, dass eventuelle Formularvalues aus dem dynamischen Teil entgegennimmt und asynchron an ein PHP-Skript leitet, die Antworten erhält und asynchron einbindet. Ich habe dazu das hier gefunden: Ajax/PHP, frage mich aber nun, wie ich das so einbinde, dass es auch bei Leuten funktioniert, die zB NoScript aktiviert haben.

Meine Idee: Das Formular aus Ajax/PHP so zu ändern:

HTML

<form action="ajaxdata.php" method="post">
<label>Name:</label>
<input name="vorname" id="vorname" type="text" />
<label>Vorname:</label>
<input name="nachname" id="nachname" type="text" />
<button onclick="galerypicture()" type="submit">Senden</button>
</form>
<div id="preloader" style="display:none"><img src="325.gif" width="20" height="20" /></div>

Würde das funktionieren? Mein Ziel ist es, dass die Seite NICHT neu lädt, wenn Ajax funktioniert, man das Formular aber durch Seite neu laden und PHP-Direktaufruf trotzdem nutzen kann, falls Ajax nicht geht.

Und könnte ich die Ajax/PHP-Vorlage so erweitern, dass man sie auf jedes Formular anwenden könnte? Dass Ajax quasi (zB per input type="hidden") "erkennt", an welches PHP-Skript die daten geleitet werden sollen?

Roland · 17. Februar 2013

das würde gehen...

The Scout · 17. Februar 2013

Also würde sich die Seite nicht neu laden, auch wenn man ein action mit submit dazuschreibt?

Und wie schreibe ich diese Funktion um, dass sie auf jedes Formular passt?

JavaScript

function galerypicture(){

    var preloader = document.getElementById("preloader");
    var value1 = document.getElementById("vorname").value;
    var value2 = document.getElementById("nachname").value;

    var parameter = 'vorname=' + value1 + '&nachname=' + value2;

    preloader.style.display = "block";

    SELFPHP.ajax.call('ajaxdata.php', parameter, 'true');




}

Alles anzeigen

Denn das ist ja die Funktion, die die Daten weiterleitet, oder irre ich mich da?
Ich denke, da bräuchte man (ein) Array(s), zB für die values, aber wie arbeite ich die dann in die Parameter ein?

Für die verschiedenen PHP-Skripts war meine Überlegung, dass so zu ändern:

JavaScript

function galerypicture(script){
[...]
SELFPHP.ajax.call(script, parameter, 'true');




}

Würde das funktionieren?

Roland · 17. Februar 2013

also erstmal wichtig ist das du noch etwas machst um das absenden des formulars zu verhindern.
am ende deiner galerypicture function:
return false;

The Scout · 17. Februar 2013

JavaScript

function sendData(script){
    var preloader = document.getElementById("preloader");
    values = new Array();




    var parameter = //???




    preloader.style.display = "block";




    SELFPHP.ajax.call(script, parameter, 'true');




    return false;
}

Alles anzeigen

So sieht die Funktion bisher aus (hab sie mal umbenannt )
Jetzt stellt sich allerdings immer noch die Frage: Wie kriege ich das values-Array in die Parameter? Mit while? Oder kann ich da direkt das Array einbauen und dann per PHP auslesen?
Das Problem ist ja, das Skript kennt die Anzahl an Parametern und ihre Aufgabe nicht. Aber ich muss ja jedes value einzeln zu einem Parameter formen, den ich dann Ajax mitgeben kann, oder?

Oder brauche ich diese parameter überhaupt, wenn ich die Daten per $_POST auslese? Die sind ja eher im Stil, wie er von $_GET ausgelesen wird?!

The Scout · 17. Februar 2013

JavaScript

FORMDATA={};




FORMDATA.ajax=function(){
    return{
        call:function(url,values,echo){




            var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
            x.onreadystatechange=function(){
                if(x.readyState==4&&x.status==200){
                    if(echo){
                        var k=new Function(giveAjaxResponse(x.responseText,true)); k()
                    }else{
                        var k=new Function(giveAjaxResponse(x.responseText,false)); k()
                    }
                }
            };




            if(values){
                x.open('POST',url,true);
                x.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                x.send(values)
            }else{
                x.open('GET',url,true);
                x.send(null)
            }
        }
    };
}();

Alles anzeigen

JavaScript

function giveAjaxResponse(response,write){
        var preloader = document.getElementById("preloader");
        preloader.style.display = "none";
        if(write){
            document.getElementById("response").write(response);
        }
    }




    function sendData(script,echo){
        var preloader = document.getElementById("preloader");
        values = newArray();




        for (i = 0; i < values.length; i++) {
            if (i == 0){
                var parameter = "value" + i + "=" +values[i];
            }else{
                parameter += "&value" + i + "=" + values[i];
            }
        }




        preloader.style.display = "inline-block";




        FORMDATA.ajax.call(script,parameter,echo);




        return false;
    }

Alles anzeigen

So weit stehen die beiden Skripts, die Daten der Formulare auswerten sollen. Ich habe jetzt noch folgendes Problem: Wie werden die Funktionen durch ein Formular angesprochen?
Vorgaben dabei:
- Es sollen die Daten sowohl durch JS, als auch direkt durch PHP verarbeitet werden können
- Wenn die JS-Funktion erfolgreich angesprochen wurde, soll die PHP-Funktion nicht mehr direkt vom Formular geladen werden, sondern per Ajax-JS im Hintergrund
- Falls JS nicht funktioniert, sollen die Daten direkt an die PHP-Funktion gesendet und von dieser verarbeitet werden
- Die PHP-Funktion ist dabei jedes Mal eine andere, welche, wird bei Aufruf des Formulars gesendet
- Es sind verschieden viele Werte, die von den Formularen übermitteltund in das Array value() geschrieben werden, bzw. vom jew. PHP verarbeitet

Das mit dem PHP direkt ist kein Problem, mein Problem ist das Zwischenschalten des JS, was nicht funktioniert.

The Scout · 19. Februar 2013

Kann mir keiner helfen? Ich komm grad echt nicht weiter

Roland · 19. Februar 2013

ne sry mir ist der code zu schwer.
bin nicht so der pro im objektorientierten programmieren.

aber ich würde irgentwie um das zu machen bei einer form das so machen.

irgendeineform.getElementsByTagName('*');
//dann hat man alle elemente die da drin sind innerhalb dieser form
//dann nehme ich jedes was einen als atribut name hat und mache daraus dann einen parameterstring
&name=value
// oder anstatt value vll auch innerHTML man denke an textarea.

Basi · 19. Februar 2013

Ich denke du musst dein Problem noch ein mal genauer beschreiben.

The Scout · 20. Februar 2013

Zitat von Basiii

Ich denke du musst dein Problem noch ein mal genauer beschreiben.

Der Hintergrund:
- Meine Website besteht aus einem statischen Grundgerüst, wo per Ajax der Inhalt eingesetzt wird (zur Vorlage), also auch die Formulare
- Nun möchte ich es deshalb so gestalten, dass die Formulareingaben aus unterschiedlichen Formularen auch per Ajax im Hintergrund ans PHP gesendet werden, damit auch hier die Seite nicht komplett neu laden muss (zur Vorlage

Meine Idee:
- ein einziges Ajax-Skript, welches so konzipiert ist, dass es aus allen Formularen die Daten auslesen kann und sie an das entsprechende PHP Skript weiterleitet
- Die Möglichkeit, die Daten direkt an das PHP-Skript zu leiten, falls Javascript deaktiviert sein sollte (hab da schon ne Idee)

Mein Problem:
- Ich krieg das Ajax-Skript nicht gebacken.
- Zum einen habe ich keine Idee, wie ich es schaffe, die variable Anzahl an values einzuarbeiten (Array hab ich überlegt, aber wie?)
- Wie verarbeite ich die Antwort des PHP-Skripts effizent?
- Wie schaffe ich es, dass eine Meldung ausgegeben wird, wenn es eine gibt und wenn nicht, dann nicht?
- Wie geht das mit dieser Ladeanzeige, die auftaucht und wieder verschwindet?

Ich habe zwar schon etwas in die Richtung gefunden (s.oben), aber diese Möglichkeit bräuchte ja eine individuelle Weiterleitung für jedes Formular.
Meine Idee für diese Skript-Weiche wäre es übrigens, zwei Buttons zu erstellen: einen normalen Submit-Button, in NoScript-Tags, und einen onclick-Button mit display: none, wobei der Stil per JS geändert wird. Hat wer was effizienteres??

Roland · 20. Februar 2013

hää???
zu den Javascript aktiviert oder deaktiviert.
mach doch einfach auf die form onsubmit sende ajax und return false (durch das return false wird doch das senden des Formulars abgebrochen und wenn kein JS aktiviert ist wird es auch nicht abgebrochen und normal gesendet).

bei den Rest vll setzte ich mich mal hin mal schauen um da was zu machen. anscheinend reichen meine hilfen nciht brauchst ne lösung^^

Roland · 20. Februar 2013

JavaScript

function FormsubmitWithAjax(form){	var xmlhttp = new XMLHttpRequest();	var action = form.getAttribute('action');	var method = form.getAttribute('method').toUpperCase();	var element = form.getElementsByTagName('*');	var parameterString = "";	for(var i = 0; element.lenght > i;i++){		var name = element.getAttribute('name');		var value = '';		if(name){			if(element.getAttribute('value')){				value = element.getAttribute('value');			}else if(element.innerHTML){				value = element.innerHTML;			}			parameterString += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';		}	}	if(method == 'GET'){		if(action.indexOf('?') == -1){			action += '?' + parameterString;		}else{			action += '&' + parameterString;		}		parameterString = null;	}else if(method == 'POST'){		parameterString = '?' + parameterString;		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");	}	xmlhttp.open(method, action, true);	xmlhttp.onreadystatechange = function() {		if(this.readyState == 4 && this.status == 200) {			alert(this.responseText);		}	}	xmlhttp.send(parameterString);}

~~So du darfst jetzt testen dazu habe ich keine lust mehr^^~~

~~so baust du das dann ein z.b.~~

HTML

<form action="eineurl.php" method="post" id="meineform" onsubmit="FormsubmitWithAjax(document.getElementById('meineform')); return false">  First name: <input type="text" name="fname"><br>  Last name: <input type="text" name="lname"><br>  <input type="submit" value="Submit"></form>

The Scout · 20. Februar 2013

DANKE!!!!11

Klappt schon recht gut, ich hab nur eine Frage: nach welchem Schema werden die Variablen benannt, die ans PHP gesendet werden?
Ich dachte nämlich eigentlich gesehen zu haben, dass sie die Namen aus <input name="" /> tragen sollen. Geht aber nicht.

HTML

<form action="scripts/test.php" method="post" id="gruss" onsubmit="FormsubmitWithAjax(document.getElementById('gruss')); return false">
    First name: <input type="text" name="vorname" /><br />
    Last name: <input type="text" name="nachname" /><br />
    <input type="submit" value="Submit" />
</form>

PHP

<?php
$vorname = $_POST["vorname"];
$nachname = $_POST["nachname"];




echo "Hallo " . $vorname . " " . $nachname;
?>

Code

<br />
<b>Notice</b>:  Undefined index: vorname in <b>C:\xampp\htdocs\SFD-OnePage\public\scripts\test.php</b> on line <b>2</b><br />
<br />
<b>Notice</b>:  Undefined index: nachname in <b>C:\xampp\htdocs\SFD-OnePage\public\scripts\test.php</b> on line <b>3</b><br />
Hallo

Der Quellcode wird so ausgegeben, ist direkt so sichtbar wie hier. Also, wie werden die Variablen benannt?

Roland · 20. Februar 2013

hm das dachte ich eigentlich auch... komsich??^^

du kannst ja mal bitte
alert(parameterString) machen? //diese zeile fügst du am besten in die letzte zeile der FormsubmitWithAjax function ein
möchte mal sehen was da drin steht

The Scout · 20. Februar 2013

Da steht ?

~~PS: Ich glaub ich habs: Beitrag 12, Code, Zeile 29:~~

JavaScript

parameterString = null;

~~Sieht in meinen Augen unnötig aus~~ Getestet, ist es nicht

Roland · 20. Februar 2013

HTML

<!DOCTYPE html>
<html>




<head>
	<title>test</title>




	<meta charset="UTF-8">
	<meta name="author" content="Roland Starke">

	<script>
function FormsubmitWithAjax(form){
	try{
		var xmlhttp = new XMLHttpRequest();
		var action = form.getAttribute('action');
		var method = form.getAttribute('method').toUpperCase();




		var element = form.getElementsByTagName('*');
		var parameterString = "";
		for(var i = 0; element.length > i;i++){
			var name = element[i].getAttribute('name');
			var value = '';
			if(name){
				if(element[i].value){
					value = element[i].value;
				}else if(element[i].innerHTML){
					value = element[i].innerHTML;
				}
				if(!((element[i].getAttribute('type') == 'checkbox' || element[i].getAttribute('type') == 'radio') && !element[i].checked)){
					parameterString += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
				}				
			}
		}

		if(method == 'GET'){
			if(action.indexOf('?') == -1){
				action += '?' + parameterString;
			}else{
				action += '&' + parameterString;
			}
			parameterString = null;
		}

		xmlhttp.open(method, action, true);

		if(method == 'POST'){
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		}
		xmlhttp.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200) {
				alert(this.responseText);
			}
		}




		xmlhttp.send(parameterString);
		return true
	}catch(err){
		return false
	}
}




	</script>




</head>




<body>




<form action="echoalldata.php" method="post" onsubmit="return !FormsubmitWithAjax(this)">
    vorname: <input type="text" name="vorname" /><br />
    nachname: <input type="text" name="nachname" /><br />
	text: <textarea type="text" name="text"></textarea><br />
	alter: <select name="alter">
		<option value="10">10</option>
		<option value="20">20</option>
		<option value="30">30</option>
		<option value="40">40</option>
	</select><br />




	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
	<input type="checkbox" name="vehicle" value="Car">I have a car<br />

	<input type="radio" name="sex" value="male">Male<br />
	<input type="radio" name="sex" value="female">Female<br />
    <input type="submit" value="Submit" />
</form>







</body>
</html>

Alles anzeigen

so jetzt geht aaallleeesss^^

The Scout · 20. Februar 2013

Stimmt, jetzt geht alles!

VVViiieeellleeennn Dank!!!!!111
Das Skript werde ich ausdrucken und goldgerahmt über mein Bett hängen

Basi · 20. Februar 2013

Ich habe jetzt nicht alle Codes von euch studiert aber ich denke du suchst so etwas:

JavaScript

function resolve_form(formular){
    var resolved_information = "";
    for(var i = 0; i < formular.length; i++){
      if(formular[i] && formular[i].name && formular[i].value){
        switch(formular[i].type){
          case 'radio':
            if(formular[i].checked)
              resolved_information += "[object]name="+ formular[i].name+",value="+formular[i].value+"[/object]";
          break;
          case 'checkbox':
            if(formular[i].checked)
              resolved_information += "[object]name="+ formular[i].name+",value="+formular[i].value+"[/object]";
          break;
          default:
            resolved_information += "[object]name="+ formular[i].name+",value="+formular[i].value+"[/object]";
          break;
        }
      }
    }
    send_formular(resolved_information)
  }




  function send_formular(content){
    if (window.XMLHttpRequest)
      var handler = new XMLHttpRequest();
    else
      var handler = new ActiveXObject("Microsoft.XMLHTTP");




    handler.open("POST", "formular_dynamic.php", true);
    handler.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    handler.send("content="+ content);




    handler.onreadystatechange = function(){
      if(handler.readyState == 4 && handler.status == 200)
        document.write(handler.responseText);
    }
  }

Alles anzeigen

PHP

<?php




  function resolve_content($content){
    preg_match_all("#\[object\]name\=([^\,VALUE]*)\,value\=([^\[\/]*)#", $content, $matches, PREG_SET_ORDER);
    foreach($matches as &$a)
      unset($a[0]);
    return $matches;
  }




  $content = resolve_content($_POST['content']);




  print '<pre>';
  print_r($content);




?>

Alles anzeigen

Bei folgendem Formular:

HTML

<form name="formular_01">
    <div>Vorname: <input type="text" name="vorname" /></div>
    <div>Alter:
      <select name="alter">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
      </select>
    </div>
    <div>
      M&auml;nnlich <input type="radio" name="geschlecht" value="m" />
      Weiblich <input type="radio" name="geschlecht" value="f" />
    </div>
    <div>
      &Uuml;ber mich: <textarea name="beschreibung"></textarea>
    </div>
    <input type="button" value="Senden" onclick="resolve_form(this.parentNode);" />
  </form>

Alles anzeigen

Erhalte ich folgende Ausgabe:

Code

Array
(
    [0] => Array
        (
            [1] => vorname
            [2] => Peter
        )




    [1] => Array
        (
            [1] => alter
            [2] => 20
        )




    [2] => Array
        (
            [1] => geschlecht
            [2] => m
        )




    [3] => Array
        (
            [1] => beschreibung
            [2] => HTML ist super!
        )




)

Alles anzeigen

Der Code ist an einigen Stellen ausbaubar, beispielsweise sollte man natürlich je nach erlaubten Eingaben [object] , [/object] , name= und value= entsprechend codieren um in der PHP RegExp korrekte Angaben filtern zu können.

Es wäre natürlich auch logisch leere Felder trotzdem mit zu versenden um mit PHP Fehler des Benutzers zu analysieren.

Mit dem Array kannst du dann in Ruhe deine Formulare auswerten, das solltest du zuerst alleine versuchen, wenn du dann Probleme hast deine Auswertung dynamisch zu halten kannst du dich gerne wieder melden, am Besten im PHP-Forenbereich.

Ich hoffe ich konnte helfen, bei Fragen zum Code nicht scheu sein

The Scout · 20. Februar 2013

Auch dir basii vielen Dank für deine Mühe, aber Rolands Skript klappt inzwischen und ist dementsprechend bereits in gebrauch.

Das werde ich nun auch nicht mehr umbauen, jetzt wo es funktioniert

The Scout · 21. Februar 2013

Zitat von Roland

so jetzt geht aaallleeesss^^

Nö, das meiste und bisher alles, was ich brauch, aber;
Ich hab mal geguckt, was bei anderen außer Text-Inputs passiert. Textarea klappt prima, radiobuttons auch, ABER bei Checkboxen wird nur die letzte und nicht alle Angaben übermittelt.

Allgemeine "Ajax-Brücke" - einmal Ajax für jedes Formular??

Jetzt mitmachen!

Teilen