Formularfelder an URL übergeben und mit Slash trennen

[Linkstar]

Hallo zusammen,

Ich bräuchte bitte mal Hilfe bei der Übergabe von Formularfeldern an eine URL. Dabei müssen die aber mit einem Slash getrennt werden, nicht wie üblich mit ?bla=blub&dings=bums Das schlimme ist: vor 15 Jahren konnte ich das alles. Aber man wird alt und vergisst ...

Worum geht es? Ich brauche ein Formular mit einem Textfeld und einer Choicebox (2 vorgegebene Inhalte zur Auswahl). Wenn ich auf Senden klicke, soll eine feste URL aufgerufen werden, an die die Inhalte des Formulars wie folgt angehängt werden müssen:

http://meine.definierte.adresse.de/inhalt_textfeld/wert_choicebox

Kann mir hier vielleicht jemand weiterhelfen?

[Gunnar Bittersmann]

@@Linkstar

http://meine.definierte.adresse.de/inhalt_textfeld/wert_choicebox

Für Beispieldomains bitte die gemäß BCP 32 dafür vorgesehenen verwenden.

Kann mir hier vielleicht jemand weiterhelfen?

„Weiter“ ist das Stichwort. Wie wär’s mit einer serverseitigen Weiterleitung von example.com?bla=(.*)&dings=(.*) nach example.com/$1/$2?

LLAP 🖖

[Linkstar]

Für Beispieldomains bitte die gemäß BCP 32 dafür vorgesehenen verwenden.

Dann eben http://example.example

„Weiter“ ist das Stichwort. Wie wär’s mit einer serverseitigen Weiterleitung von example.com?bla=(.*)&dings=(.*) nach example.com/$1/$2?

Leider keine Chance, da ich keinen Zugriff auf den Server habe. Daher wollte ich es per Javascript lösen.

[Gunnar Bittersmann]

@@Linkstar

Leider keine Chance, da ich keinen Zugriff auf den Server habe. Daher wollte ich es per Javascript lösen.

1. Auf click-Event lauschen

2. Werte der Eingabefelder auslesen (Was meinst du eigentlich mit „Choicebox“? select?)

3. URI zusammenbauen

4. neue Ressource anfragen

LLAP 🖖

[Linkstar]

(Was meinst du eigentlich mit „Choicebox“? select?)

Ja. Den Rest schau ich mir mal an, Danke für den Denkanstoß.

[Mitleser]

1. Auf click-Event lauschen

Oder... siehe unten...

2. Werte der Eingabefelder auslesen (Was meinst du eigentlich mit „Choicebox“? select?)

3. URI zusammenbauen

4. neue Ressource anfragen

Wäre es nicht viel stabiler und auch "progressiger", einfach das Submit des Forms abzufangen und das Action-Attribut umzubiegen? OK, dann müsste man die Form-Elemente noch irgendwie rauswerfen. Also doch location setzen.

[Gunnar Bittersmann]

@@Mitleser

Wäre es nicht viel stabiler und auch "progressiger", einfach das Submit des Forms abzufangen

Ja, das wäre es. Man möchte das Formular ja auch wie gewohnt per Enter-Taste abschicken können.

LLAP 🖖

[Linkstar]

Ja ne, verwirrt mich nur zusätzlich ;)

[Gunnar Bittersmann]

@@Linkstar

Ja ne, verwirrt mich nur zusätzlich ;)

Nicht auf click-Event beim Button lauschen, sondern aufs submit-Event beim Formular und das standardmäßige Absenden des Formulars unterbinden.

LLAP 🖖

[Linkstar]

Ich versuche erst mal Lösungsweg 1, damit ich es überhaupt kapiere. Und daran scheitert es noch. Mein Ansatz ist gerade wie folgt:

<form name="abfrage" method="post" action="">
Textfeld
<p></p>
<input type="text" name="textfeld" id="textfeld" value="1234567" />
<p></p>
Select
<p></p>
<select name="select" id="select">
<option value="eins">Eins</option>
<option value="zwei">Zwei</option>
</select>
<p></p>
<input type="submit" name="submit" id="submit" value="Abfragen" />
</form>

<script type="text/javascript">

window.addEventListener("load", start, false);

function start () {
   var abgeschickt = document.getElementById("submit");
   abgeschickt.addEventListener("click", klickverarbeitung, false);
}

function klickverarbeitung () {
   var zieladresse = "http://example.example/" + document.abfrage.textfeld.value + "/" + document.abfrage.select.value

window.location.href = zieladresse;
}
</script>

Aber wenn ich auf "Abfrage" klicke, passiert gar nichts.

[Gunnar Bittersmann]

@@Linkstar

Aber wenn ich auf "Abfrage" klicke, passiert gar nichts.

Doch, es passiert was: das Forumular wird abgeschickt. Wegen action="" wird dieselbe Seite wieder aufgerufen.

Abgeschickt wird es wegen <input type="submit">. Wenn du aus dem Submit-Button einen einfachen Button (type="button") machst …

Solltest du aber nicht. Zum einen sollte – wie gesagt – nicht nur ein Click auf den Button zum Abschicken des Formulars führen.

Zum anderen ist button das richtige HTML-Element für Buttons (wär hätte das gedacht? ;-)), nicht input. Also
<input type="submit" name="submit" id="submit" value="Abfragen" />
ersetzen durch
<button type="submit" name="submit" id="submit">Abfragen</button>

Und - wie auch gesagt – das standardmäßige Absenden des Formulars unterbinden:

function klickverarbeitung (e)
{
  e.preventDefault();
  ⋮
}

Und wenn du schon das sowieso schon hast, kannst du auch statt aufs click-Event beim Button aufs submit-Event beim Formular lauschen.

LLAP 🖖

[henman]

Servus Linkstar

Textfeld
<p></p>
<input type="text" name="textfeld" id="textfeld" value="1234567" />

Nur so am Rande, für Umbrüche wird (u.a.) <br> genutzt, nicht <p></p>.

Aber wenn ich auf "Abfrage" klicke, passiert gar nichts.

Der Knopf, mit der deine klickverarbeitung() ausgelöst wird, ist type="submit". Mit einem Klick darauf wird das Formular abgeschickt. Das ist das Standardverhalten, wenn du einen Knopf diesen Typs in ein Formular einfügst. Dass deine Methode trotzdem noch aufgerufen wird, interessiert dann nicht mehr wirklich, das Abschicken des Formulars hat Vorrang (wer es präziser erklären kann, ich bitte darum). Ändere type="submit" in type="button", damit wird das Formular nicht mehr abgeschickt wird, wenn du den Knopf klickst.

Oder, wie bereits in einem anderen Beitrag erwähnt, höre lieber auf das submit-Event des form-Elements. In der Methode submitverarbeitung (ich nenns jetzt mal so basierend auf deinem Code) musst dann am Ende noch false zurückgeben, damit das Formular nicht abgeschickt wird, sondern dein window.location.href greift. Vorteil dieses Weges ist, du kannst deine Routine mit einem Klick auf den Knopf auslösen oder gerne auch mit der Enter-Taste o.ä..

ciao

[marctrix]

Hej henman,

Nur so am Rande, für Umbrüche wird (u.a.) <br> genutzt, nicht <p></p>.

Nein <br>, wird genutzt um das Ende einer Zeile anzuzeigen.

Für Abstände nutzt man kein HTML, sondern CSS - in aller Regel margin oder padding

Wenn schon Korinthen kacken, dann auch richtig kleine! ;-)

Marc

[Linkstar]

Hat sich erledigt, ich habe es. Danke Euch allen für Eure Hilfe ;)

[Gunnar Bittersmann]

@@Linkstar

Zunächst zur Frage "Auslösung nur über Button oder auch über ENTER": Völlig latte. Button reicht.

Ist die Seite nur für dich oder auch für andere?

Generell frage ich mich, ob es nicht simpler und sinniger wäre, dem Formular hinter (oder anstatt?) action="" ein onSubmit="klickverarbeitung();" mitzugeben

Nein, JavaScript-Code sollte nicht im HTML-Code stehen.

und die Funktion "start" ganz rauszunehmen.

Das kannst du tun, wenn die Registrieung des Events erst erfolgt, wenn das betreffende Element schon im DOM ist. Also bspw. wenn das JavaScript am Ende des body steht.

So oder so passiert nichts. Ich habe den Submitt-Button in einen normalen Button verwandelt. Damit lädt sich das Formular schon mal nicht mehr selbst. Aber auch sonst passiert nichts.

Ging bei mir problemlos.

Online-Beispiel, bitte!

LLAP 🖖

[Linkstar]

Danke, da war ich zu langsam mit meinem Editieren. Ist erledigt und funktioniert.