link aus formularwerten erstellen

mimamo

hallo zusammen,

ich moechte aus formularwerten (zweimal datum und einmal radio box) einen link zusammen stellen, der dann auch aufgerufen wird.

mein quellcodeversuch sieht jetzt wie folgt aus:

HTML

<form class="w3-container" action="https://example.com/Search/Apartment/3320/160/" method="GET" name="DAFORM" onSubmit="SetCookies();return chkFormular();" target="_blank"><p><label>Anreise</label>        <input class="w3-input w3-border w3-round-large w3-white" type="text" name="" id="Anreise" placeholder="Anreise"></p><p><label>Abreise</label>        <input class="w3-input w3-border w3-round-large w3-white" type="text" name="" id="Abreise" placeholder="Abreise"></p><p><label>Gäste</label><br>        <input class="w3-radio" type="radio" name=" " value="1" id="Gaeste0">&nbsp;1<br>        <input class="w3-radio" type="radio" name=" " value="2" id="Gaeste1">&nbsp;2<br>        <input class="w3-radio" type="radio" name=" " value="3" id="Gaeste2">&nbsp;3<br>        <input class="w3-radio" type="radio" name=" " value="4" id="Gaeste3">&nbsp;4<br></p><p>        <input type="hidden" name="" value="?languageCode=de_DE"></p>

der generierte link, der auch aufgerufen wird ist danach: https://www.sunandsnow.pl/Search/Apartment/3320/160/?=2017-10-12&=2017-10-20&+=2&=%3FlanguageCode%3Dde_DE

er muss aber so aussehen:
https://sunandsnow.pl/Search/Apartment/3320/160/2017-10-12/2017-10-20/2?languageCode=de_DE

ich hoffe ihr habt einen tipp, was ich aendern muss, damit der link richtig zusammengebaut wird?

im voraus vielen herzlichen dank.

Sailor

Das wird so nicht gehen... die Methoden 'get' und 'post' lassen sich nicht so manipulieren. Sie dienen zur Übermittlung von Parametern und nicht zum Zusammenbasteln von Hyperlinks.
Du musst dann wohl auf der Seite, die du als 'action=" angegeben hast zunächst die übergebenen Parameter auslesen, dann den Link mit den ausgelesenen Parametern nach deinen Vorstellungen zusammenstellen und dann eine Weiterleitung an die zusammengestellte Adresse veranlassen.

Arne Drews

Das geht schon, Du müsstest nur ( bezogen auf Deine gepostete Konstellation ) das action-Attribut manipulieren und dann den Submit ausführen.
Eigentlich keine große Sache, nur stellen sich mir folgende Fragen:

Warum muss es GET sein?
Wie kannst Du gewährleisten, dass bei dem Datum das korrekte Format eingegeben wird, um es für den URI zu verwenden?

EDIT: Da ich davon ausgehe, dass Du mit den eingegebenen Daten auf eine Suchergebnisseite einer fremden Seite verlinken willst, hier mal ein Beispiel, wie es mit GET funktionieren würde.

HTML

<form action="https://example.com/Search/Apartment/3320/160/" method="GET" name="DAFORM">
    <p><input type="hidden" name="languageCode" value="de_DE"></p>
    <p>
        <label>Anreise</label>
        <input type="text" name="Anreise" placeholder="Anreise">
    </p>
    <p>
        <label>Abreise</label>
        <input type="text" name="Abreise" placeholder="Abreise">
    </p>
    <p>
        <label>Gäste</label><br>
        <input class="w3-radio" type="radio" name="guestcount" value="1">1<br>
        <input class="w3-radio" type="radio" name="guestcount" value="2">2<br>
        <input class="w3-radio" type="radio" name="guestcount" value="3">3<br>
        <input class="w3-radio" type="radio" name="guestcount" value="4">4<br>
    </p>
    <p><button type="submit" name="submit">Senden</button></p>
</form>

Alles anzeigen

Code

window.addEventListener( 'DOMContentLoaded', function() {


    document.querySelector( 'button[name='submit']' ).addEventListener(
            'click'
            , function (e) {
                e.preventDefault();


                _guests = document.querySelector( 'input[name='guestcount']:checked' ).value;
                _arrival = document.querySelector( 'input[name='Anreise']' ).value;
                _departure = document.querySelector( 'input[name='Abreise']' ).value;


                _actionURL = document.querySelector( 'form[name='DAFORM']' ).getAttribute( 'action' )
                    + _arrival + '/' + _departure + '/' + _guests + '?languageCode=' + document.querySelector( 'input[name='languageCode']' ).value;


                window.open( _actionURL, '_blank' );
            }
        );


});

Alles anzeigen

Ich empfehle Dir aber, wenn ich mir der Annahme richtig liege, dass Du Dir das Suchformular der Seite mal genauer ansiehst und Deine Daten entsprechend per POST ( was dort vermutlich genutzt wird ) an das gleiche action-Ziel zu leiten.
Die Verarbeitung der Daten ist dann auf Seiten des Betreibers.

Zusätzlich solltest Du klären, ob Du die Suche auf die Weise nutzen darfst, wie Du es tust.

Tags