link generierung aus formularelementen

[mimamo]

allo zuammen,

ich habe ein formular mit zwei datumsfeldern und einem radiobutton.

anhand dieser daten soll ein link erstellt werden, der dann auch aufgerufen wird. mein quellcode sieht aktuell so aus:

<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>
<input type="hidden" name="" value="?languageCode=de_DE">
</p>

der generierte link ist danach https://www.example.com/Search/Apartment/3320/160/?=2017-10-12&=2017-10-20&+=2&=%3FlanguageCode%3Dde_DE

er soll aber so aussehen: https://example.com/Search/Apartment/3320/160/2017-10-11/217-10-19/2?languageCode=de_DE

ich hoffe ihr koennt mir einen tipp geben, was ich aendern muss, damit das ende des links richtig erzeugt wird.

im voraus vielen herzlichen dank.

[MudGuard]

Hi,

ich habe ein formular mit zwei datumsfeldern und einem radiobutton.

anhand dieser daten soll ein link erstellt werden, der dann auch aufgerufen wird.

hm. Das, was Du weiter unten als Wunschergebnis zeigst, widerspricht dem aber - demnach sollen die Radiobuttons und Anreise/Abreise ignoriert werden.

<input type="hidden" name="" value="?languageCode=de_DE">

Warum läßt Du den Namen leer? Und warum ist im value etwas, was wie ein Querystring aussieht?

ich hoffe ihr koennt mir einen tipp geben, was ich aendern muss, damit das ende des links richtig erzeugt wird.

name vergeben, im value nur den Wert dazu angeben, keinen Querystring.

cu,
Andreas a/k/a MudGuard

[mimamo]

hallo mudguard,

2017-10-12 ist z.b. ein datumsfeld (an / abreise) die zahl "2" ist der wert aus dem radiobutton

wenn ich bei namen etwas reinschreibe, dann steht das auch in dem erzeugten link drin

<input class="w3-input w3-border w3-round-large w3-white" type="text" name="Anreise" id="Anreise" placeholder="Anreise">
</p>

<p>
<label>Abreise</label>
<input class="w3-input w3-border w3-round-large w3-white" type="text" name="Abreise" id="Abreise" placeholder="Abreise">
</p>

<p>
<label>Gäste</label><br>
		<input class="w3-radio" type="radio" name="Gaeste" value="1" id="Gaeste0">&nbsp;1<br>
		<input class="w3-radio" type="radio" name="Gaeste" value="2" id="Gaeste1">&nbsp;2<br>
		<input class="w3-radio" type="radio" name="Gaeste" value="3" id="Gaeste2">&nbsp;3<br>
		<input class="w3-radio" type="radio" name="Gaeste " value="4" id="Gaeste3">&nbsp;4<br>
</p>
<p>
<input type="hidden" name="" value="?languageCode=de_DE">

https://www.sunandsnow.pl/Search/Apartment/3320/160/?Anreise=07-03-2017&Abreise=2017-10-27&Gaeste=3&=%3FlanguageCode**%**3Dde_DE

der link muss jedoch so aussehen (mit dem ?vor dem languageCode): https://www.sunandsnow.pl/Search/Apartment/3320/160/07-03-2017/2017-10-27/3/?languageCode=de_DE

[Matthias Apsel]

Hallo mimamo,

ich hoffe ihr koennt mir einen tipp geben, was ich aendern muss, damit das ende des links richtig erzeugt wird.

Mit der Methode get lässt sich das nicht erreichen. Da werden die Parameter als Querystring einfach angehängt.

Aber du erzeugst keinen Link, du schickst Formulardaten an eine Adresse.

Dein HTML sollte verbessert werden

<label>Anreise</label>
<input class="w3-input w3-border w3-round-large w3-white" type="text" name="" id="Anreise" placeholder="Anreise">

• Das label-Element ist keinem Input-Element zugeordnet. Screenreadernutzer erkennen nicht, was sie eingeben sollen.
• Du möchtest ein Datum haben. Dafür gibt es type=date.
• Das placeholder-Attribut sollte im Zweifelsfall Beispieldaten enthalten, nicht das Label wiederholen.

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

• br-Elemente sind für den Zeilenumbruch bei Gedichten gedacht.
• Das label ist in dem Fall wohl eine Überschrift, fieldset bietet sich auch an.
• feste Leerzeichen sind dort nicht notwendig.
• den input-Elementen fehlt die Beschriftung z.B. <input ... id="Gaeste0"><label for="Gaeste0"> 1</label>

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Dein HTML sollte verbessert werden

<label>Anreise</label>
<input class="w3-input w3-border w3-round-large w3-white" type="text" name="" id="Anreise" placeholder="Anreise">

• Das label-Element ist keinem Input-Element zugeordnet. Screenreadernutzer erkennen nicht, was sie eingeben sollen.

Also mit for-Attribut, was sich auf die ID des Eingabefelds bezieht:

<label for="Anreise">Anreise</label>
<input class="w3-input w3-border w3-round-large w3-white" type="date" name="Anreise" id="Anreise">

• Du möchtest ein Datum haben. Dafür gibt es type=date.
• Das placeholder-Attribut sollte im Zweifelsfall Beispieldaten enthalten, nicht das Label wiederholen.

Meistens ist ein Placeholder eher schädlich als nützlich. Weglassen.

Die ganzen präsentationsbezogenen Klassennamen hab ich jetzt mal übersehen.

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

• br-Elemente sind für den Zeilenumbruch bei Gedichten gedacht.
• Das label ist in dem Fall wohl eine Überschrift, fieldset bietet sich auch an.

Wie meistens bei einer Gruppe von Radiobuttons:

<fieldset>
	<legend>Gäste</legend>
	<input …> …
</fieldset>

• den input-Elementen fehlt die Beschriftung

Auch der name. Sonst ist ja gar keine Gruppe von Radiobuttons.

z.B. <input ... id="Gaeste0"><label for="Gaeste0"> 1</label>

Oder auch <label><input ... id="Gaeste0"> 1</label>, wodurch man bei Radiobuttons (Checkboxen) auch auf den Leerraum zwischen Radiobutton (Checkbox) und Beschriftung clicken kann, um das Ding zu setzen. (Ansonsten müsste man da mit CSS ran: { margin-left: -1em; padding-left: 1em }.)

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Apsel

• Du möchtest ein Datum haben. Dafür gibt es type=date.

Mit besser werdender Browserunterstützung. In ein paar Wochen ist dann auch Firefox dabei. In der Developer Edition sieht’s schon mal gut aus.

Ansonsten ist in dem Zusammenhang Designing The Perfect Date And Time Picker interessant.

LLAP 🖖

[Rolf B]

Hallo mimamo,

ich hab versucht, das nachzustellen. Ich bekomme für die input-Elemente mit name="" keinen Eintrag in den Query-Parameter. Und so soll es auch eigentlich sein - ohne name kein value.

Was ohne weiteres nicht geht, ist dieser REST-artige Aufbau der URL. Mit Standardmitteln erzeugt ein Formular immer name=value Paare im Query-String.

Wenn Du das Form mit der von Dir gewünschten URL abschicken willst, musst Du mit JavaScript ins submit eingreifen und die Datumswerte in die action URL hineinschieben.

Das hidden Field funktioniert nicht, weil Du den name=value Eintrag selbst erzeugen willst. Der Browser codiert dann aber die URL-Steuerzeichen ? und =, damit sie nicht mit der eigenen URL Aufbereitung kollidieren. Was Du brauchst ist dies:

<input type="hidden" name="languageCode" value="de_DE">

dann kommt das ? und = automatisch.

Rolf

[Rolf B]

Hallo Rolf,

Beispiel zur action-Modifikation: https://jsfiddle.net/rf032zg8/

Die Hinweise zum besseren HTML sind nicht eingearbeitet, da ist noch Potenzial 😀

Rolf

[mimamo]

@Matthias Apsel OK "GET" geht also nicht.

@Rolf B hidden wert mit "name" und "value" - guter tipp

du schreibst, dass man per javascript "submit" aendern soll.

"submit" schickt doch eine e-mail ab? javascript habe ich mit noch nicht mit beschaeftigt. (das obige formular ist mit einem formulargenerator generiert und etwas abgeaendert.

habt ihr vielleicht einen tipp fuer javascript und linkgenerierung + automatischen aufruf des fertigen links?

[Rolf B]

Hallo mimamo,

nein, submit schickt das form ab. Das submit-Event im JavaScript erlaubt Dir, darauf zu reagieren. Ein Beispiel habe ich gemacht, bevor Du geantwortet hast :)

Aber guck Dir auch die Frage von Gunnar an: im Submit die Action zu patchen ist tatsächlich Gefummele. Muss es sein?

Rolf

[Gunnar Bittersmann]

@@mimamo

ich hoffe ihr koennt mir einen tipp geben, was ich aendern muss, damit das ende des links richtig erzeugt wird.

Geht die Abfrage an deinen Server oder an einen fremden?

Im ersten Fall wäre wohl der bessere Weg, nicht per JavaScript am URI zu frickeln, sondern das so abzuschicken, wie es eben aus dem Formular kommt, und serverseitig darauf zu reagieren, evtl. per serverseitigem Umschreiben mit mod_rewrite.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

ich bin mal davon ausgegangen, dass die/der OP sich nicht mit merkwürdigen URL Formaten abquälen würde, wenn er/sie eine Wahl hätte. Das sieht nach Fernbedienung einer fremden Seite aus.

Rolf

[mimamo]

@Gunnar Bittersmann

auf meiner website soll der gast anreise und abreise und anzahl der gaeste eintragen.

der link geht dann auf die website der agentur und nur wenn der link mit den daten der wohnung, an- und abreise und anzahl gaesten und dem language string aufgerufen wird, dann wird die seite auch in deutsch angezeigt und der gast landet automatisch bei unserer wohnung. andernfalls gibt es eine fehlermeldung.

also muss der link schon direkt bei mir erzeugt werden.

[Matthias Apsel]

Hallo mimamo,

und nur wenn der link mit den daten der wohnung, an- und abreise und anzahl gaesten und dem language string aufgerufen wird, dann wird die seite auch in deutsch angezeigt und der gast landet automatisch bei unserer wohnung.

Das verstehe ich nicht. Wo kann man sich das anschauen?

Bis demnächst
Matthias

[dedlfix]

Tach!

der link geht dann auf die website der agentur und nur wenn der link mit den daten der wohnung, an- und abreise und anzahl gaesten und dem language string aufgerufen wird, dann wird die seite auch in deutsch angezeigt und der gast landet automatisch bei unserer wohnung. andernfalls gibt es eine fehlermeldung.

Wie schon gesagt, es ist Mist, mit Javascript da was rumzubasteln, weil das nicht zuverlässig bei allen Besuchern funktionieren wird.

also muss der link schon direkt bei mir erzeugt werden.

Das ist der entscheidende Punkt. Aber das "bei dir" muss dein Server sein, nicht "beim Besucher" in seinem Browser.

Nimm das Formular entgegen, so wie die Browser das gern erzeugen möchten, also Name-Value-Pärchen. Serverseitig erzeugst du daraus die gewünschte URL und schickt den Browser des Besuchers per Redirect zu diesem Ziel. Dazu braucht es nur mod_rewrite auf dem Server. Aber eine Programmiersprache wie PHP kann das auch hinbekommen.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Nimm das Formular entgegen, so wie die Browser das gern erzeugen möchten, also Name-Value-Pärchen. Serverseitig erzeugst du daraus die gewünschte URL …

Guter Plan, um die Funktionalität allen zur Verfügung zu stellen.

… und schickt den Browser des Besuchers per Redirect zu diesem Ziel.

Und die Variante mit JavaScript kommt als progressive enhancement obendrauf, um genau das zu vermeiden und ohne Redirect gleich zum richtigen Server zu gelangen.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

hatte gerade einen Postwechsel mit mimamo, da wurde ich auf einen Defekt meines Fiddle aufmerksam gemacht: ich hatte den Radiobuttons keinen name gegeben und sie bildeten damit keine Radiogruppe.

Der name sorgt aber dafür, dass ein gaeste=N im Get-Request auftaucht, was ggf. zu Problemen führt. Kann man in der PE-Lösung einen solchen Eintrag unterdrücken? Ohne temporär die name-Attribute der Radiobuttons zu eliminieren - DAS würde ich für übelstes Gebastele halten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Kann man in der PE-Lösung einen solchen Eintrag unterdrücken?

Die PE-Lösung sieht wohl so aus, dass man gar kein Formular absendet, sondern den URI zusammenbaut und per location.href aufruft.

LLAP 🖖

[Rolf B]

Hallo dedlfix,

ok, sehe ich ein.

Aber wieso braucht man ein mod_rewrite, wenn man sich ganz normal die Antwort GETten oder POSTen lässt und eine - äh, grübel - am besten wohl http 303 Antwort erzeugt?

Rolf

[dedlfix]

Tach!

Aber wieso braucht man ein mod_rewrite, wenn man sich ganz normal die Antwort GETten oder POSTen lässt und eine - äh, grübel - am besten wohl http 303 Antwort erzeugt?

Weil man es damit ohne eine weitere Komponente (z.B. PHP) außer dem sowieso schon vorhandenem Webserver hinbekommt.

am besten wohl http 303 Antwort erzeugt?

Wenns kein 302 sein soll, dann eher 307. Wobei ... eigentlich stört es auch nicht, wenn der Browser das aus dem Cache heraus beantwortet, weil es ja sowieso immer dieselbe Umschribung ist.

dedlfix.

[Rolf B]

Hallo dedlfix,

Das mit mod_rewrite glaub ich jetzt einfach mal - dazu kenn ich mich im Apache zu wenig aus.

Aber, hm. Echt die 307?

303 See Other (Folge-Request ist IMMER ein GET)
307 Temporary Redirect (Folge-Request verwendet gleiches Verb wie Ursprungsrequest)

die 303 klingt plausibler.

Rolf

[Gunnar Bittersmann]

@@dedlfix

Dazu braucht es nur mod_rewrite auf dem Server.

Um das zu beurteilen, müsste man das API kennen – ob das Datum als JJJJ-MM-TT erwartet wird oder ob auch andere Formate entgegengenommen werden.

Die evtl. notwendige Konvertierung wird mit mod_rewrite wohl frickelig bis unmöglich(?), da ist man mit PHP besser dran.

LLAP 🖖

[Gunnar Bittersmann]

@@mimamo

ich habe ein formular mit zwei datumsfeldern und einem radiobutton.

Mehrere davon. Wie diese mit demselben name zu einer Gruppe werden, sagt ich ja schon.

Statt Radiobuttons könntest du übrigens auch andere Eingabemöglichkeiten in Erwägung ziehen:

• ein numerisches Eingabefeld <input type="number">
• oder einen Schieberegler <input type="range">

LLAP 🖖