Button zum URL Aufruf
1 0 0 
Felix Riesterer
0 0 
Der Martin
2 0 Der Martin
Button zum URL Aufruf
Gunnar BittersmannHallo,
ich könnte bei folgendem Problem mal eure Hilfe benötigen: Mein Ziel ist es auf einer Seite ein Eingabefeld und ein Button zu setzen. Über das Eingabefeld soll der Nutzer einen beliebigen String eingeben können, der dann in einer Variable gespeichert werden soll. Über den Button soll dann eine URL aufgerufen werden mit der angehangengen Variable
Da ich leider nur rudimentäre Kenntnisse von HTML/Javascript habe, bin ich über folgenden Stand nicht hinweg gekommen:
<!DOCTYPE>
<html>
<head>
<title>
Willkommen
</title>
<script
type = "text/javascript">
function einlesen() {
var anhang = document.getElementById("Eingabe");
}
</script>
</head>
<body>
<form>
<input type = "text" id = "Eingabe">
<input type = "button" value = "Anhängsel" onClick = "einlesen()">
</form>
<br></br>
<br></br>
<br></br>
<form>
<input type = "button" name = "Weiterleitung" value = "Weiterleitung"
onclick="window.location.href = 'https://www.google.de/' + 'anhang'">
</form>
</body>
</html>
-
Moin,
Mein Ziel ist es auf einer Seite ein Eingabefeld und ein Button zu setzen. Über das Eingabefeld soll der Nutzer einen beliebigen String eingeben können, der dann in einer Variable gespeichert werden soll. Über den Button soll dann eine URL aufgerufen werden mit der angehangengen Variable
Hast du denn schon im Wiki über Formulare nachgelesen? Dort steht, wie Formulare aufgebaut sind und funktionieren. Eventuell brauchst du auch gar kein JavaScript für dein Anliegen (GET-Methode).
Viele Grüße Robert
-
Danke,
habe zwar eine kleine Änderung vorgenommen, aber mir fehlt dann trotz dessen die Möglichkeit an die URL etwas anzuhängen
-
Liebe(r) TXXK,
habe zwar eine kleine Änderung vorgenommen,
aha... aber welche, das verschweigst Du ... warum?
aber mir fehlt dann trotz dessen die Möglichkeit an die URL etwas anzuhängen
Willst Du nicht nachlesen wie Formulare funktionieren? Sonst hättest Du nämlich verstanden, wie Du das kannst.
Und dann kann man Dir mit JavaScript weiterhelfen.
Liebe Grüße,
Felix Riesterer.
-
Hey,
naja ich habe es ja auch hinbekommen, dass an der URL als Zusatz der Name der Variable hängt, mir geht es aber um dem Inhalt. >-<
Meine Änderung sah lediglich so aus:
<!DOCTYPE> <html> <head> <title> Willkommen </title> <script type="text/javascript"> function einlesen() { var fehler=document.getElementById("Eingabe"); } </script> </head> <body> <form action="https://www.google.de" method="get"> <input type="text" id="Eingabe"> <button type="submit" onClick="einlesen">Weiterleitung</button> </form> </body> </html>Nur damit bin ich dem Ziel nicht näher gekommen... Hoffe ich nerve Euch nicht allzu sehr mit einem solch einfachen Problem
-
Hallo,
naja ich habe es ja auch hinbekommen, dass an der URL als Zusatz der Name der Variable hängt, mir geht es aber um dem Inhalt. >-<
ja, der hängt auch noch hintendran. Nicht gesehen? Genau so funktionieren Formulare in HTML (zumindest mit der Methode GET): Beim Absenden werden alle Formularfelder in der Form name=wert an die URL des Formularziels angehängt.
<!DOCTYPE> <html> <head> <title> Willkommen </title> <script type="text/javascript"> function einlesen() { var fehler=document.getElementById("Eingabe"); } </script> </head> <body> <form action="https://www.google.de" method="get"> <input type="text" id="Eingabe"> <button type="submit" onClick="einlesen">Weiterleitung</button> </form> </body> </html>Schön. Wenn du dem Eingabefeld jetzt noch einen Namen gibst, würde beim Absenden des Formulars
https://www.google.de?name=eingabewert
aufgerufen. Javascript ist dafür überhaupt nicht nötig.Damit fängt Google allerdings nichts an. Wenn du den eingegebenen String wirklich als Suchbegriff an Google verfüttern willst, sollte das Formularziel https://www.google.de/search sein, und der Name des Eingabefelds einfach q lauten. Wenn das allerdings nur ein Beispiel sein soll, hättest du besser nicht Google genommen, sondern eine der für Beispiele vorgesehenen Domains wie example.org oder example.net.
Dein Javascript ist übrigens wirkungslos, denn ...
function einlesen() { var fehler=document.getElementById("Eingabe"); }... hier schreibst du die Eingabe in eine Variable, die sonst nirgends mehr verwendet wird. Kann sie auch nicht, sie ist nämlich innerhalb der Funktion lokal und wird beim Beenden der Funktion sofort wieder entsorgt.
Nur damit bin ich dem Ziel nicht näher gekommen...
Das ist schade. Und wir wissen immer noch nicht genau, was eigentlich genau dein Ziel ist.
So long,
Martin--
Logik ist die Theorie, Chaos die Praxis.-
Das das mit Google nicht funktioniert hat mir schon mal sehr geholfen :) 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
Das Javascript ist noch drin, weil ich annahm, man könnte bei formaction folgendes machen
<form action="beispiel.de" + fehler>-
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--
Logik ist die Theorie, Chaos die Praxis.
-
-
-
-
-
-
-
Copy:
<form> <button name="foo" value="bar">Klick mich!</button> </form>Paste: form.html
im Browser aufrufen, auf den Button klicken und guck mal in die Adresszeile was dann dort steht.
-
n'Abend,
mit der angehangengen Variable
So long,
Martin--
Logik ist die Theorie, Chaos die Praxis.-
Mir kams auch bekannt vor. Vermutlich Prüfungswiederholung ;)
-
@@Der Martin
mit der angehangengen Variable
Da hab ich was hinzugestanden. ;-)
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-