Select-Box bei Änderung automatisch via GET verarbeiten

[hlkrskltr]

Ahoi!

Ich bin noch recht unerfahren mit Formularen...

<form name="peter" method="GET">
    <select>
        <option>Eins</option>
        <option>Zwei</option>
        <option>Drei</option>
        <option>Vier</option>
    </select>
</form>

Ich möchte nun, dass sobald der User etwas anderes in der Select-Box auswählt, die Auswahl sofort via GET weitergeben wird.
Also ohne Submit-Button oder ähnliches, sondern einfach nur durch die Auswahl.

Wenn der User also Eins auswählt, soll in der URI dann so etwas wie ...?option=Eins stehen.

Kann mir jemand weiterhelfen und/oder ein Ansatz liefern? Über nützliche Links wäre ich ebenfalls dankbar! :mrgreen:

 

[threadi]

Stichwort JavaScript-Eventhandler onchange. Abschicken geht dann ebenfalls per JavaScript mit submit().

 

[hlkrskltr]

Danke für die schnelle Antwort! Werde ich mir gleich mal anschauen.

Ganz ohne JavaScript gehts demzufolge also gar nicht?
Was mache ich, wenn der User kein JS aktiviert hat? Einfach 'nen alternativen Submit-Button zur Verfüung stellen?

 

[hlkrskltr]

Also, ich bin jetzt so weit:

<form name="form1" id="form1" target="_self" method="GET" action="index.php"
    <select onChange="javascript:document.form1.submit();">
        <option value="eins">Eins</option>
        <option value="zwei">Zwei</option>
        <option value="drei">Drei</option>
    </select>
</form>

Von Haus aus steht die Select-Box jetzt auf Eins. Wenn man jetzt Zwei oder Drei auswählt, wird das Dokument zwar neugeladen, jedoch steht die Select-Box wieder bei Eins.

Außerdem steht auch nichts in der URL... Da fehlt doch bestimmt noch etwas, oder?

EDIT: Habe das Name-Attribut im Select-Tag vergessen.

<form name="form1" id="form1" target="_self" method="GET" action="index.php"
    <select name="option" onChange="javascript:document.form1.submit();">
        <option value="eins">Eins</option>
        <option value="zwei">Zwei</option>
        <option value="drei">Drei</option>
    </select>
</form>

Es funktioniert. :)

 

[threadi]

Prima. Und für die Nutzer ohne JavaScript könntest Du mit <noscript> auch einen Button einbinden der nur für Nutzer ohne JavaScript zu sehen ist. Alternativ: Button normal einbinden und per JavaScript ausblenden. Besucher ohne JavaScript bekommen den Button dann nicht ausgeblendet.

 

[hlkrskltr]

Danke für die Hinweise!

Ich habe noch ein Problem. Wenn der User in der Select-Box nun eine andere Option ausgewählt hat und das auch alles Prima via GET funktioniert, also Seite wird neu geladen und in der URL steht nun ?option=eins usw, dann ist jedoch leider wieder die erste Option in der Select-Box ausgewählt. Wie kann ich denn nun die jeweilige Option (die der User aktuell ausgewählt hat) vorselektieren? :shock:

 

[NetAktiv]

Dann musst vom Server das Formular so zurücksenden, dass die beim Submit gewählte Option als Selected markiert ist.