Formular üer Javascript verarbeiten (POST) - Probs mit Firefox

[Benni]

Hallo.

Ich habe in einer AJAX-Seite folgendes Formular:

<form>   <select name="test" size="10" multiple>     <option value="1">Eins</option>     <option value="2">Zwei</option>     <option value="3">Drei</option>   </select> </form> <button onclick="func1();">KLICK MICH</button>

Diese Formular soll aber (wie gesagt AJAX) nicht normal abgesendet werden, sondern von einem JS verarbeitet und dann wieder an die Seite zurückgeliefert werden.

Das JS holt sich die Werte so:

var formValues = new Array(); for (var i=0; i<document.forms[0].elements[0].options.length; i++) with (document.forms[0].elements[0].options[i])     {      if (selected)      {       formValues.push(value);      }     }

Dann habe ich also die Werte der selektierten Options in einem Array mit Namen formValues. Diese sende ich dann (wohlgemerkt per POST!!!) mit

xmlHttpObj.open('post','formular.php',true); xmlHttpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpObj.onreadystatechange = handleResponse; xmlHttpObj.send("&test="+formValues);

wieder an das Script zurück, um dann eben was auch immer weiterzuarbeiten.

Soweit so gut. Im IE funktioniert das auch ohne Probleme. Alles bestens. Aber im Firefox habe ich folgendes seltsame Verhalten.

Wenn man im FF auf den Button klickt, dann wird die komplette Seite neu geladen und die URL wird (obwohl per POST versendet wurde) folgendermaßen manipuliert (wenn alle drei Options gewählt wurden z.B.):

formular.php?test=1&test=2&test=3

Das JA wird überhaupt nicht angesprochen. Es wurde keine Action im <form>-Tag definiert. Nirgendwo ist die Rede von GET...warum manipuliert er dann die URL?

Noch kurioser wird es, wenn ich im <form>-Tag folgendes notiere: <form onsubmit=alert("blabla");>

Wenn man dann auch den Button klickt, dann geht die MessageBox mit blabla auf und wenn man diese dann mit OK schließt, dann läuft das JS korrekt durch und die Daten werden (wie im IE auch) korrekt mit POST verarbeitet.

So und jetzt kommt ihr Experten...bitte helft mir, ich dreh schon fast durch...mache schon seit Stunden an diesem Problem rum.

Danke, Benni

[wahsaga]

hi,

xmlHttpObj.send("&test="+formValues);

Was käme denn heraus, wenn du dir mal
alert("&test="+formValues)
ausgeben liessest?

Wenn man im FF auf den Button klickt, dann wird die komplette Seite neu geladen und die URL wird (obwohl per POST versendet wurde) folgendermaßen manipuliert (wenn alle drei Options gewählt wurden z.B.):

formular.php?test=1&test=2&test=3

Das JA wird überhaupt nicht angesprochen. Es wurde keine Action im <form>-Tag definiert. Nirgendwo ist die Rede von GET...warum manipuliert er dann die URL?

Weil nirgends die Rede von POST ist, kommt die Defaultmethode zum Formulareversand zum tragen, wenn vorher ein Fehler in deinem Javascript auftrat - und die ist nun mal GET.

gruß,
wahsaga

[MudGuard]

Hi,

<form>
  <select name="test" size="10" multiple>
    <option value="1">Eins</option>
    <option value="2">Zwei</option>
    <option value="3">Drei</option>
  </select>
</form>
<button onclick="func1();">KLICK MICH</button>

Sitzt der Button wirklich außerhalb des Formulars?

Wenn er doch innerhalb des Formulars sitzen würde, wäre das Verhalten verständlich:
Default-method ist GET, für die action wird "", also die aktuelle Seite genommen.
button ist per default ein submit-Button.
Es geschieht dann folgendes:
Der onclick-Handler wird aufgerufen, der erzeugt den Request und schickt ihn ab. Damit ist die Funktion beendet - da kein return false notiert ist, wird die Default-Action des submit-Buttons ausgeführt, nämlich das Abschicken des Formulars (womit die Scripts auf der alten Seite beendet werden).
Wenn dann irgendwann der Server auf den XMLHttpRequest antwortet, ist nichts mehr da, was darauf lauscht.
Und wenn dann irgendwann der Server auf den normalen Submit antwortet, wird eben die Antwort angezeigt.
(wobei die beiden letzten Schritte natürlich auch in umgekehrter Reihenfolge geschehen können)

Aber das sollte nur geschehen, wenn, wie bereits gesagt, der Submit-Button innerhalb des form-Elements steht.

cu,
Andreas