Linkstar: Formularfelder an URL übergeben und mit Slash trennen

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?

  1. @@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 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. 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.

      1. @@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 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
        1. (Was meinst du eigentlich mit „Choicebox“? select?)

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

          1. Auf click-Event lauschen

          Oder... siehe unten...

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

          2. URI zusammenbauen

          3. 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.

          1. @@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 🖖

            --
            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
            „Hat auf dem Forum herumgelungert …“
            (Wachen in Asterix 36: Der Papyrus des Cäsar)
            1. Ja ne, verwirrt mich nur zusätzlich ;)

              1. @@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 🖖

                --
                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                „Hat auf dem Forum herumgelungert …“
                (Wachen in Asterix 36: Der Papyrus des Cäsar)
                1. 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.

                  1. @@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 🖖

                    --
                    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                    „Hat auf dem Forum herumgelungert …“
                    (Wachen in Asterix 36: Der Papyrus des Cäsar)
                  2. 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

                    --
                    "Sir, we are surrounded!" - "Excellent! We can attack in any direction!"
                    1. 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

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

                      1. @@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 🖖

                        --
                        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                        „Hat auf dem Forum herumgelungert …“
                        (Wachen in Asterix 36: Der Papyrus des Cäsar)
                        1. Danke, da war ich zu langsam mit meinem Editieren. Ist erledigt und funktioniert.