{"id":1242,"date":"2018-03-02T16:29:26","date_gmt":"2018-03-02T14:29:26","guid":{"rendered":"http:\/\/technischeredaktion.com\/multimediaprojekte\/?p=1242"},"modified":"2018-03-02T17:06:26","modified_gmt":"2018-03-02T15:06:26","slug":"textfeld-pruefen","status":"publish","type":"post","link":"https:\/\/technischeredaktion.com\/multimediaprojekte\/textfeld-pruefen\/","title":{"rendered":"Textfeld pr\u00fcfen"},"content":{"rendered":"<p>In diesem Beispiel werden vier Textfelder und ein Button angelegt. Die Werte innerhalb der Textfelder werden mittels JavaScript ausgelesen und miteinander verrechnet. Das Ergebnis wird in einem Textfeld ausgegeben. Vor der Berechnung findet eine Pr\u00fcfung der Werte statt (Punkt als Dezimaltrenner, keine Buchstaben verwendet). Im Anschluss an die Berechnung werden die Werte kaufm\u00e4nnisch auf zwei Nachkommastellen gerundet.<\/p>\n<p>[jsfiddle url=&#8220;https:\/\/jsfiddle.net\/jr85Lck9\/4\/&#8220;]<\/p>\n<h3>Anleitung<\/h3>\n<h4>HTML<\/h4>\n<ul>\n<li>Formular mit name-Attribut vergeben: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;form name=\"formular&gt;...&lt;\/form&gt;<\/code><\/li>\n<li>4 Textfelder erstellen: <code class=\"EnlighterJSRAW\">&lt;input type=\"text\" name=\"betrag\" \/&gt;<\/code><\/li>\n<li>1 Button erstellen: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;button type=\"button\" onclick=\"rechnen()\"&gt;Berechnen&lt;\/button&gt;<\/code><\/li>\n<\/ul>\n<h4>JavaScript<\/h4>\n<ul>\n<li>Funktion anlegen: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function rechnen(){...}<\/code>\n<ul>\n<li>Funktionsaufruf: pruefen(document.formular.betrag.value);<\/li>\n<li>IF-Bedingung:\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">if (formular.mwstsatz.value &gt; 19) {\r\n    alert(\"Bitte geben Sie einen korrekten Mehrwertsteuersatz ein.\");\r\n}<\/pre>\n<p>Hier wird gepr\u00fcft, ob der Wert, der als Mehrwertsteuersatz eingetragen ist, kleiner ist als 19. Ist dies nicht der Fall, bekommt der Nutzer eine Meldung angezeigt.<\/li>\n<\/ul>\n<ul>\n<li>ELSE:\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">else {\r\n    mwstbetrag = formular.betrag.value * formular.mwstsatz.value \/ 100;\r\n    mwstbetrag = runden(mwstbetrag);\r\n    formular.mwsteuro.value = mwstbetrag;\r\n    gesamtbetrag = parseFloat(formular.betrag.value) + parseFloat(mwstbetrag);\r\n    formular.betragnetto.value = runden(gesamtbetrag);\r\n}<\/pre>\n<p>Ist die IF-Bedingung nicht erf\u00fcllt, d. h. der Wert ist kleiner als 19, wird die Berechnung ausgef\u00fchrt. Dazu wird zuerst der Mehrwertsteuerbetrag berechnet und auf zwei Nachkommastellen gerundet. Der gerundete Betrag wird dann in das entsprechende Textfeld geschrieben.<br \/>\nAnschlie\u00dfend wird der Gesamtbetrag (Betrag + Betrag Mehrwertsteuer) berechnet. Wichtig ist dabei, dass die Eingaben mittels <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">parseFloat<\/code> in Zahlen umgewandelt werden. Der Gesamtbetrag wird als gerundete Zahl in das entsprechende Textfeld geschrieben.<\/li>\n<\/ul>\n<\/li>\n<li>Funktion anlegen: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function runden(wert){...}<\/code>\n<ul>\n<li>Diese Funktion rundet die Werte, die \u00fcbergeben werden, kaufm\u00e4nnisch auf zwei Nachkommastellen.<\/li>\n<li>Dazu wird eine Variable angelegt: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">zahl = wert.toFixed(2);<\/code><\/li>\n<li>Der berechnete Wert wird von der Funktion an den Funktionsaufruf zur\u00fcckgegeben: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">return zahl;<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Funktion anlegen: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function pruefen(gleitkommazahl){...}<\/code>\n<ul>\n<li>Diese Funktion pr\u00fcft die Eingabe im Formularfeld f\u00fcr den Betrag.<\/li>\n<li>Pr\u00fcfen, ob ein Komma als Dezimaltrenner verwendet wurde\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var ergebnis = gleitkommazahl.match(\/\\b,\\b|\\b \\b\/);\r\n\r\nif ((ergebnis == \",\") || (ergebnis == \" \")) {\r\n    alert(\"Bitte verwenden Sie als Dezimaltrenner einen Punkt statt eines Kommas.\");\r\n}<\/pre>\n<\/li>\n<li>Pr\u00fcfen, ob Buchstaben eingegeben wurden:\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var buchstaben = \/([A-Za-z])\/;\r\n\r\nif (buchstaben.exec(gleitkommazahl)) {\r\n    alert(\"Bitte geben Sie keine Buchstaben ein.\");\r\n}<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beispiel werden vier Textfelder und ein Button angelegt. Die Werte innerhalb der Textfelder werden mittels JavaScript ausgelesen und miteinander verrechnet. Das Ergebnis wird<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63],"tags":[14,65,66,67],"class_list":["post-1242","post","type-post","status-publish","format-standard","hentry","category-my-little-javascript","tag-javascript","tag-textfeld","tag-werte-pruefen","tag-werte-runden"],"_links":{"self":[{"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/posts\/1242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/comments?post=1242"}],"version-history":[{"count":10,"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/posts\/1242\/revisions"}],"predecessor-version":[{"id":1392,"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/posts\/1242\/revisions\/1392"}],"wp:attachment":[{"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/media?parent=1242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/categories?post=1242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/technischeredaktion.com\/multimediaprojekte\/wp-json\/wp\/v2\/tags?post=1242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}