{"id":224,"date":"2018-03-18T18:55:21","date_gmt":"2018-03-18T17:55:21","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=224"},"modified":"2020-11-07T19:58:47","modified_gmt":"2020-11-07T18:58:47","slug":"dynamische-url-aus-formular-mit-java-script-generieren","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/224\/dynamische-url-aus-formular-mit-java-script-generieren\/","title":{"rendered":"Dynamische URL aus Formular mit Java-Script generieren"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/224\/dynamische-url-aus-formular-mit-java-script-generieren\/#Videoanleitung\" >Videoanleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/224\/dynamische-url-aus-formular-mit-java-script-generieren\/#Anleitung\" >Anleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/224\/dynamische-url-aus-formular-mit-java-script-generieren\/#Download\" >Download<\/a><\/li><\/ul><\/nav><\/div>\n<p>In diesem Tutorial soll es darum gehen, wie wir auf Basis von Formulareingaben eine bestimmte URL aufrufen. Das Beispiel gibt es am Ende auch als Download.<\/p>\n<p><!--more--><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/SkDvE9D0fjE\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anleitung\"><\/span>Anleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Unser Beispielformular ist einfach gestrickt. Es gibt ein Eingabefeld und ein Auswahlfeld. Im ersten Feld gibt der Benutzer einen Suchbegriff ein, im zweiten w\u00e4hlt er die gew\u00fcnschte Suchmaschine aus.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-225\" src=\"\/wp-content\/uploads\/2018\/03\/dyn_url1.png\" alt=\"\" width=\"331\" height=\"256\" srcset=\"\/wp-content\/uploads\/2018\/03\/dyn_url1.png 331w, \/wp-content\/uploads\/2018\/03\/dyn_url1-300x232.png 300w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/p>\n<p>Schauen wir zuerst den Quelltext des <a title=\"create online form\" href=\"https:\/\/da-software.net\/en\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Formulars<\/a> an:<\/p>\n<pre>&lt;form action=\"#\" method=\"post\" name=\"FORM\"&gt;<\/pre>\n<p>Das Formular hat den Namen &#8222;<code>FORM<\/code>&#8222;, diesen Namen ben\u00f6tigen wir sp\u00e4ter f\u00fcr den Zugriff auf die Formularelemente. Die Action ist leer, da wir das Formular nicht an ein Script \u00fcbergeben wollen.<\/p>\n<p>Den Inhalt des Formulars definieren zwei Eingabefelder:<\/p>\n<pre>&lt;p&gt;Suchbegriff:&lt;\/p&gt;\r\n&lt;p&gt;\r\n  &lt;input name=\"suchtext\" id=\"suchtext\" type=\"text\" size=\"30\" maxlength=\"50\" value=\"ekiwi\"&gt;\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n  &lt;select name=\"suchDienst\" size=\"0\"&gt;\r\n   &lt;option value=\"https:\/\/www.google.de\/search?q=\"&gt;Google&lt;\/option&gt;\r\n   &lt;option value=\"https:\/\/duckduckgo.com\/?q=\"&gt;DuckDuckGo&lt;\/option&gt;\r\n   &lt;option value=\"http:\/\/www.suchnase.de\/cgi-bin\/search.cgi?query=\" selected=\"selected\"&gt;Suchnase&lt;\/option&gt;\r\n   &lt;option value=\"http:\/\/www.bing.com\/search?q=\"&gt;Bing&lt;\/option&gt;\r\n  &lt;\/select&gt;\r\n &lt;\/p&gt;\r\n<\/pre>\n<p>Wichtig ist hier, neben dem Inhalt, nur der Name des jeweiligen Elements, dieser wird ebenfalls f\u00fcr den Zugriff \u00fcber Java-Script ben\u00f6tigt. In diesem Fall haben die beiden Felder die Namen <code>suchtext<\/code> und <code>suchDienst<\/code>.<\/p>\n<p>Es folgt ein Button, welcher die Java-Script-Aktion aufruft:<\/p>\n<pre>&lt;input type=\"button\" name=\"buttonSuche\" value=\"Suchen\" onclick=\"openUrl();\"&gt;\r\n<\/pre>\n<p>Der Event-Handler ruft die Java-Script-Methode &#8222;<code>openUrl()<\/code>&#8220; auf. Diese wird als n\u00e4chstes implementiert.<\/p>\n<pre>&lt;script type=\"text\/javascript\"&gt;\r\nfunction openUrl()\r\n{\r\n\t\/\/Formulardaten auslesen und in Variablen speichern\r\n\tvar suche = document.FORM.suchtext.value;\r\n\tvar url = document.FORM.suchDienst.value;\r\n\r\n\t\/\/Suchdienst URL und Suchbegriff zusammen bringen\r\n\turl += suche;\t\t\r\n\r\n\t\/\/Such URL aufrufen\r\n\twindow.location = url;\r\n}\t\t\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Der erste Schritt ist das Auslesen der Formularfelder mittels Java-Script. Zum Auslesen verweisen wir auf den Namen des <a title=\"order form\" href=\"https:\/\/da-software.net\/en\/software\/da-orderform\/\" target=\"_blank\" rel=\"noopener noreferrer\">Formulars<\/a> und auf den Namen des Eingabefeldes:<\/p>\n<pre>var suche = document.FORM.suchtext.value;<\/pre>\n<p>Sind beide Variablen auslesen, wird die neue URL zusammengebaut. In unserem Fall ist das einfach. An die URL des Suchdienstes wird einfach der Suchtext drangeh\u00e4ngt. Im letzten Schritt wird die URL nun einfach aufgerufen:<\/p>\n<pre>window.location = url;<\/pre>\n<p>Fertig. Beim Test des Formulars kann der Anwender nun seinen Suchbegriff eingeben und den Suchdienst ausw\u00e4hlen. Sobald er auch den Button klickt wird die URL dynamisch auf den Eingaben basierend aufgerufen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download\"><\/span>Download<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"\/wp-content\/uploads\/2018\/03\/beispiel.zip\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In diesem Tutorial soll es darum gehen, wie wir auf Basis von Formulareingaben eine bestimmte URL aufrufen. Das Beispiel gibt<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[18,44],"class_list":["post-224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-formular","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=224"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/224\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/217"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}