Formulareinträge über Ajax auswerten lassen

Kai-Behncke

Erfahrenes Mitglied
Hallo liebes Forum,

ich stehe vor einer kniffeligen Frage.

In einer Anwendung (http://www.xyz.de/test.phtml) habe ich ein Formular ("suche.php").

Ich möchte nun, dass nach Absenden des Formulares über einen Ajax-Request das Suchergebnis (über ein Skript suche_auswerten.php) berechnet wird und dynamisch an die Seite zurückgeliefert wird.

Konkret:

suche.php (hier vereinfacht):

Code:
echo "<form>";
echo "Mindesgroesse";
echo "<input type='text' name='mindestgroesse' >";
echo "<a href='#'  onClick='sndReq()'>Suche über Ajax senden</a>";
echo "</form>";

In dem JavaScript/Ajax-File sieht es dann so aus:

Code:
var resObjekt;
if (navigator.appName.search("Microsoft") > -1) {

//resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resObjekt= new XMLHttpRequest();}

function sndReq() {

  alert ("Funktion ausgefuehrt");
resObjekt.open('get','suche_auswerten.php',true);
resObjekt.onreadystatechange = handleResponse;
resObjekt.send(null);
}

function handleResponse(){

if (resObjekt.readyState == 4){

document.getElementById("ausgabe_der_uebermittelten_variablen").innerHTML= resObjekt.responseText;
}
}


Die Funktion sndReq wird auch ausgeführt, aber ich weiß nicht wie ich die eigegebene Variable "mindestgroesse" elegant an das Formular "suche_ausqwerten.php" übergeben kann?

Heißt also: ich möchte gerne dass das Formular ausgeführt wird, aber nicht die ganze Seite neu geladen wird. Die Formulareinträge sollen also über eine Ajax-Funktion an ein Skript übermittelt werden und dann innerhalb eines definierten Bereiches der Seite ausgegeben werden.


Kann mir da bitte jemand einen Tipp geben?

Danke vielmals im Voraus, Kai
 
Hi,

du musst die gewünschten Formulardaten als Parameter an die URL anhängen.

Zunächst solltest du deinem Formular eine ID zuweisen. Diese wird der Funktion sndReq als Parameter übergeben. In der Routine selbst wird nun der Inhalt des gewünschten Feldes ausgelesen und mit übermittelt.

HTML:
Code:
<form id="formID">
  Mindesgroesse
  <input type="text" name="mindestgroesse">
  <a href="#" onClick="sndReq('formID'); return false;">Suche über Ajax senden</a>
</form>

Die geänderte Funktion:
Code:
function sndReq(strID) {
  alert ("Funktion ausgefuehrt");
  var strParam = "mindestgroesse="+document.getElementById(strID).elements['mindestgroesse'].value;
  resObjekt.open('get','suche_auswerten.php?'+strParam,true);
  resObjekt.onreadystatechange = handleResponse;
  resObjekt.send(null);
}

Ciao
Quaese
 
Zurück