Ajax: Auswertung der Eingaben eines Formulars

[Lykkja]

Hallo!

ich stehe gerade leider sehr auf dem Schlauch und erhoffe mir etwas Hilfe.
Ich habe ein kleines Formular zusammengebaut, bei dem eine Antwort eingegeben wird und diese soll dann beim Klick auf "Absenden" durch ein PHP-Skript überprüft werden und die Ausgabe soll dann unter das Formular bzw. das Formular ersetzen.

Das Formular + Div für die Ausgabe:

 <form id="adventskalender">
        <table border="0">
        <tr>
        <td>Antwort:</td>
        <td><input type="text" name="antwort"></td>
        </tr>
        <tr>
        <td><input type="submit" value="Absenden!" onClick="abfrage_antwort('adventskalender')"></td>
        </tr>
        </table>
        </form>
    <div id="anzeige">
    </div>

JavaScript:

<script>
function abfrage_antwort(str) {
var strParam = document.getElementById(str).elements['antwort'].value;
  if (str=="") {
    document.getElementById("anzeige").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("anzeige").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","auswertung.php?antwort="+strParam,true);
  xmlhttp.send();
}
</script>

Mein Fehler ist, dass ich beim Klick auf "Absenden!" keine Ausgabe erhalte und sich der Link verändert in "adventskalender.php?antwort=eingegebene_Antwort
Die Antwort wird also richtig aus dem Formular ausgelesen, aber ich verstehe nicht, warum er den Link so zusammenbastelt, obwohl in dem open ein anderes PHP-File steht. Dies wertet übrigens die Antwort nur aus, ob sie richtig ist oder nicht.

Wäre um Hilfe echt dankbar!

lG

 

[SpiceLab]

Versuch es mal hiermit:

<form id="adventskalender" onsubmit="abfrage_antwort('adventskalender')">
        <table border="0">
        <tr>
        <td>Antwort:</td>
        <td><input type="text" name="antwort"></td>
        </tr>
        <tr>
        <td><input type="submit" value="Absenden!"></td>
        </tr>
        </table>
        </form>
    <div id="anzeige">
    </div>

 

[Lykkja]

Ändert leider nichts - der Link der geöffneten Seite ändert sich immernoch wie oben beschrieben. Danke trotzdem!

 

[merzi86]

Du müsstest das Event mittels preventDefault unterbrechen.

event.preventDefault();

Eine andere Möglichkeit wäre Anstelle für den Input ein Type Submit einfach nur ein Type Button zu nutzen und darauf das onClick-Event zu lassen.

<input type="button" value="Absenden!" onClick="abfrage_antwort('adventskalender')" />

 

[Lykkja]

Die zweite Lösung hat super funktioniert - vielen Dank!
Mir ist aber gerade noch aufgefallen, dass nichts aufgeführt wird, wenn man das Formular über die Enter-Taste beendet, da die Aktion ja an den Button gebunden ist. Muss ich mir da etwas anderes überlegen, oder gibt es dafür eine Idee?

 

[merzi86]

Wenn du das auch Abfangen willst, dann wirst du um das preventDefault nicht vorbeikommen.
Den JavaScript Code müsstest du dazu etwas anpassen und der Funktion 2 Parameter übergeben.

<script type="text/javascript">
function abfrage_antwort(str, event) {
event.preventDefault();
var strParam = document.getElementById(str).elements['antwort'].value;
  if (str=="") {
    document.getElementById("anzeige").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("anzeige").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","auswertung.php?antwort="+strParam,true);
  xmlhttp.send();
}
</script>

Deshalb würde ich auch das Html-Gerüst verwenden, wie es SpiceLab vorgeschlagen hat verwenden.
In dieser Variante muss dann das Input auch vom Typ Submit sein, oder du setzt auf den Input noch das onClick Event.

<form id="adventskalender" onsubmit="abfrage_antwort('adventskalender', event)">
    <table border="0">
        <tr>
            <td>Antwort:</td>
            <td><input type="text" name="antwort"></td>
        </tr>
        <tr>
            <td><input type="submit" value="Absenden!"></td>
        </tr>
    </table>
</form>
<div id="anzeige"></div>