Button zum URL Aufruf

[Der Martin]

Hi,

Das das mit Google nicht funktioniert hat mir schon mal sehr geholfen :)

hmm, das verblüfft mich jetzt. .oO(?)

An sich war der Plan, dass ich was in das Eingabefeld schreibe und den Button klicke. Der Inhalt des Feldes soll dann, wenn möglich, ohne zusätzliche Zeichen die URL erweitern. Also quasi:

Ziel-URL = hinterlegte URL + Inhalt des Eingabefeldes

Aha. Ohne weitere Struktur, nicht als gewöhnliche URL-Parameter wie beim Formularversand. Okay, dann muss man tatsächlich nachhelfen.

Das Javascript ist noch drin, weil ich annahm, man könnte bei formaction folgendes machen

<form action="beispiel.de" + fehler>

Das geht natürlich nicht; an der Stelle ist HTML, kein Javascript. Aber da mir nun so langsam klar wird, was du eigentlich willst (aber noch nicht, wozu eigentlich), ein paar Hinweise dazu.

• Javascript scheint mir zwingend erforderlich zu sein, eine Lösung, die das Gewünschte ohne JS erreicht, fällt mir auf die Schnelle nicht ein.
• Ich würde nicht das click-Event des Absendebuttons abfangen, sondern das submit-Event des Formulars. Dann kann man das nämlich auch auf normale Weise bedienen, also durch Drücken der Enter-Taste.
• Das Auslesen des Feldes in der Eventhandler-Funktion hast du ja schon realisiert, aber etwas umständlich. Jedes Formularelement ist über seinen Namen innerhalb des Formulars direkt ansprechbar, es ist also nicht nötig, mit getElementById() das ganze Dokument danach abzusuchen.
• Was deiner Eventhandler-Funktion noch fehlt, ist eine Aktion - sie muss mit der Eingabe auch irgendwas tun.
• Den eingegebenen String einfach an eine Basis-URL anzuhängen, mag im Einzelfall okay sein; wichtig ist hier aber, wie so oft, die Beachtung des Kontextwechsels. Du bringst hier einen String in den Kontext "URL" und musst ihn dafür passend maskieren, weil viele Zeichen in URLs nicht unmaskiert vorkommen dürfen. Dafür hat Javascript die Funktion encodeURIComponent().
• Damit der normale, im Browser verankerte Mechanismus für den Formularversand nicht doch noch die typischen name/value-Paare ergänzt, muss die normale Event-Verarbeitung unterbunden werden. Stattdessen wird die neu ermittelte URL an href des Standardobjekts location zugewiesen. Das bewirkt ein Laden der angeforderten Ressource.

In Kurzform könnte das also ungefähr so aussehen:

<form method="get" action="http://www.example.org/" onsubmit="DoSubmit(this)">
 <input type="text" name="q">
 <button type="submit">Go!</button>
</form>

<script type="text/javascript">
function DoSubmit(f)
 { var input = f.elements['q'].value;
   location.href = f.action + encodeURIComponent(input);
   return false;                  // normalen Formularversand unterbinden
 }
</script>

Das kann man nun noch aufhübschen - ich habe beispielsweise noch die Oldschool-Methode zur Notation von Eventhandlern gewählt, vielleicht mag jemand das Beispiel auf die modernere Form mit addEventListener() umbauen.

So long,
 Martin