Rechnen im Formular mit Kommas

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Rechnen im Formular mit Kommas

    Hallo zusammen,

    ich habe eine Formular wo mit JavaScript Felder berechnet werden z.B.

    Feld A * Feld B = Feld C

    Nun möchte ich wenn man 4,5 eingibt das er nicht mit 4 rechnet. Wenn man 4.5 eingibt geht es.

    Wie kann man mit Javascript das realisieren?

    Anbei meine Javascript was Rechnet und auf Zahlen Wert überprüft!

    Gruß
    Stephan

    Source Code

    1. function numerisch(feld)
    2. {
    3. if(feld.value == "")
    4. return
    5. // Feld analysieren
    6. var test = parseFloat(feld.value)
    7. // OK? Dann zurueck!
    8. if(!isNaN(test))
    9. {
    10. // Ergebnis darstellen
    11. feld.value = test
    12. return
    13. }
    14. // Fehlermeldung
    15. alert("Bitte nur numerische Angaben!")
    16. // Eingabe selektieren und Eingabefokus setzen
    17. feld.select()
    18. feld.focus()
    19. }
    20. function rechne(feld, eingabe1, eingabe2, ausgabe)
    21. {
    22. with(feld.form)
    23. {
    24. var wert1 = parseFloat(eingabe1.value)
    25. var wert2 = parseFloat(eingabe2.value)
    26. // Werte in Feld1 und Feld2 numerisch?
    27. if(isNaN(wert1) || isNaN(wert2))
    28. return
    29. // Ergebnis berechnen, wenn beide Felder gefuellt sind
    30. ausgabe.value = (eingabe1.value == "" ||
    31. eingabe2.value == "") ?
    32. "" :
    33. wert1 * wert2
    34. }
    35. }
    Display All
  • Soweit ich weis, gehen Kommazahlen in JavaScript nur mit mit einem Punkt.
    Deshalb folgende Möglichkeit, das Komma einfach durch einen Punkt zu ersetzen:

    Source Code

    1. var zahl_nacher = zahl_vorher.replace(/,/, ".");


    Habs bereits ausgetestet. Findet diese Umwandlung an der richtigen Stelle statt, sollte sie auch bei dir einwandfrei funktionieren.
  • Jo Danke, das hatte ich in zwischen auch gefunden und habe es auch versucht in das Skipt einzubauen, leider ohne erfolfg :(

    Da ich noch nicht so fit in sachen Javascript bin, habe ich erstmal diesen Ansatz gewählt!

    Gruß
    Stephan

    Source Code

    1. function rechne(feld, eingabe1, eingabe2, ausgabe)
    2. {
    3. with(feld.form)
    4. {
    5. var eingabe_cach1 = eingabe1.replace(/,/, ".");
    6. eingabe2 = eingabe_cach1;
    7. var eingabe_cach2 = eingabe2.replace(/,/, ".");
    8. eingabe2 = eingabe_cach2;
    9. var wert1 = parseFloat(eingabe1.value)
    10. var wert2 = parseFloat(eingabe2.value)
    11. // Werte in Feld1 und Feld2 numerisch?
    12. if(isNaN(wert1) || isNaN(wert2))
    13. return
    14. // Ergebnis berechnen, wenn beide Felder gefuellt sind
    15. ausgabe.value = (eingabe1.value == "" ||
    16. eingabe2.value == "") ?
    17. "" :
    18. wert1 * wert2
    19. }
    20. }
    Display All
  • Probier mal folgendes:

    Source Code

    1. <html><head><title>Test</title></head><body>
    2. <script type="text/javascript">
    3. function rechne(feld)
    4. {
    5. with(document.getElementById(feld))
    6. {
    7. var wert1 = eingabe1.value;
    8. var wert2 = eingabe2.value;
    9. wert1 = wert1.replace(/,/, ".");
    10. wert2 = wert2.replace(/,/, ".");
    11. // Werte in Feld1 und Feld2 numerisch?
    12. if(isNaN(wert1) || isNaN(wert2)) return ausgabe.value = "Fehler";
    13. // Ergebnis berechnen, wenn beide Felder gefuellt sind
    14. ausgabe.value = wert1 * wert2;
    15. }
    16. }
    17. </script>
    18. <form id="form" onsubmit="rechne(this.id); return false;">
    19. <input id="eingabe1" /><br />
    20. <input id="eingabe2" /><br />
    21. <input id="ausgabe" /><br />
    22. <br />
    23. <input type="submit" />
    24. </form>
    25. </body></html>
    Display All


    Wenn du noch Fragen zum Code haben solltest, frag ruhig.
  • Source Code

    1. var eingabe_cach1 = eingabe1.value.replace(/,/, "."); // value fehlt
    2. eingabe1 = eingabe_cach1; // Copy/Paste FEHLER in dieser LINE!
    3. var eingabe_cach2 = eingabe2.value.replace(/,/, "."); // value fehlt
    4. eingabe2 = eingabe_cach2;
    5. var wert1 = parseFloat(eingabe1) // .value muss weg - glaub ich
    6. var wert2 = parseFloat(eingabe2) // .value muss weg - glaub ich


    hth
  • Hallo zusammen,

    die Lösung von Baby Herman sieht ja schon gut aus. Nur soll es wärend der Benutzer es ausfüllt zusammen Rechnen werden. Ich habe es mal so umgeändert mit den Vorschlägen von euch, leider bin ich dabei noch nicht an mein Ziel gekommen!!

    Was mache ich Falsch?

    Gruß
    Stephan

    Source Code

    1. <html><head><title>Test</title></head><body>
    2. <script type="text/javascript">
    3. function rechne(feld)
    4. {
    5. with(feld.form)
    6. {
    7. var eingabe_cach1 = meinFeld1.value.replace(/,/, ".");
    8. wert1 = eingabe_cach1;
    9. var eingabe_cach2 = meinFeld2.value.replace(/,/, ".");
    10. wert2 = eingabe_cach2;
    11. var wert3 = parseFloat(wert1)
    12. var wert4 = parseFloat(wert2)
    13. // Werte in Feld1 und Feld2 numerisch?
    14. if(isNaN(wert4) || isNaN(wert3))
    15. return
    16. // Ergebnis berechnen, wenn beide Felder gefuellt sind
    17. meinFeld3.value = (meinFeld1.value == "" ||
    18. meinFeld2.value == "") ?
    19. "" :
    20. wert3 * wert4
    21. }
    22. }
    23. </script>
    24. <form id="form" onSubmit="rechne(this.id); return false;">
    25. <input type="text" name="meinFeld1"
    26. onChange="rechne(this)">
    27. <input type="text" name="meinFeld2"
    28. onChange="rechne(this)">
    29. <input type="text" name="meinFeld3" readonly>
    30. <br />
    31. <input type="submit" />
    32. </form>
    33. </body></html>
    Display All
  • du musst den eventhandler von onchange auf onkeyup ändern um auf jede Eingabe reagieren zu können.

    Hier mal der komplette Code.
    Als kleinen Bonus habe ich eingebaut, dass Buchstaben automatisch aus dem Eingabefeld entfernt werden.

    Source Code

    1. <html><head>
    2. <script type="text/javascript">
    3. <!--
    4. var sum = new Array(0,0);
    5. function rechne(column, ob) {
    6. if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
    7. ob.value = ob.value.replace(/[a-zA-Z]/, "");
    8. }
    9. v = ob.value=="" ? "0" : ob.value;
    10. sum[column] = parseFloat(v.replace(/,/, "."));
    11. document.foo.meinFeld3.value = sum[0]+sum[1];
    12. }
    13. //-->
    14. </script>
    15. </head><body>
    16. <form name="foo" onsubmit="index.php">
    17. <input type="text" name="meinFeld1" onkeyup="rechne(0, this)" />
    18. <input type="text" name="meinFeld2" onkeyup="rechne(1, this)" />
    19. <input type="text" name="meinFeld3" readonly="readonly" />
    20. <input type="submit" />
    21. </form>
    22. </body></html>
    Display All
  • Da ich mehre Felder habe, muss die Function auch die Ausgabe veränderbar sein. Ich habe mal versucht die einfachen weg zugehen, aber leider geht das nicht. So langsam merke ich ich sollte mich mal mehr mit JavaScript auseinander setzten, ist ja schon Peinliche das ich das nicht alleine hinbekomme so eine kleineigkeit :(

    Gruß
    Stephan

    Source Code

    1. <html><head>
    2. <script type="text/javascript">
    3. <!--
    4. var sum = new Array(0,0);
    5. function rechne(column, ob, ausgabe) {
    6. if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
    7. ob.value = ob.value.replace(/[a-zA-Z]/, "");
    8. }
    9. v = ob.value=="" ? "0" : ob.value;
    10. sum[column] = parseFloat(v.replace(/,/, "."));
    11. document.foo.ausgabe.value = sum[0]+sum[1];
    12. }
    13. //-->
    14. </script>
    15. </head><body>
    16. <form name="foo" onsubmit="index.php">
    17. <input type="text" name="meinFeld1" onkeyup="rechne(0, this, meinFeld3)" />
    18. <input type="text" name="meinFeld2" onkeyup="rechne(1, this, meinFeld3)" />
    19. <input type="text" name="meinFeld3" readonly="readonly" />
    20. <br>
    21. <input type="text" name="meinFeld4" onkeyup="rechne(0, this, meinFeld6)" />
    22. <input type="text" name="meinFeld5" onkeyup="rechne(1, this, meinFeld6)" />
    23. <input type="text" name="meinFeld6" readonly="readonly" />
    24. <input type="submit" />
    25. </form>
    26. </body></html>
    27. </body>
    28. </html>
    Display All
  • Ich würde ein 2 dimensionales Array erstellen und so Gruppen bilden.
    Das einzig ungewohnte ist vielleicht die Fragezeichen Syntax
    http://de.php.net/manual/de/control-structures.alternative-syntax.php

    Source Code

    1. <html><head>
    2. <script type="text/javascript">
    3. <!--
    4. var sum = new Array(new Array(0,0),new Array(0,0));
    5. function rechne(group, column, ob) {
    6. if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
    7. ob.value = ob.value.replace(/[a-zA-Z]/, "");
    8. }
    9. v = ob.value=="" ? "0" : ob.value;
    10. sum[group][column] = parseFloat(v.replace(/,/, "."));
    11. output = group ? document.foo.meinFeld6 : document.foo.meinFeld3
    12. output.value = sum[group][0]+sum[group][1];
    13. }
    14. //-->
    15. </script>
    16. </head><body>
    17. <form name="foo" onsubmit="index.php">
    18. <input type="text" name="meinFeld1" onkeyup="rechne(0, 0, this)" />
    19. <input type="text" name="meinFeld2" onkeyup="rechne(0, 1, this)" />
    20. <input type="text" name="meinFeld3" readonly="readonly" />
    21. <br>
    22. <input type="text" name="meinFeld4" onkeyup="rechne(1, 0, this)" />
    23. <input type="text" name="meinFeld5" onkeyup="rechne(1, 1, this)" />
    24. <input type="text" name="meinFeld6" readonly="readonly" />
    25. <input type="submit" />
    26. </form>
    27. </body></html>
    28. </body>
    29. </html>
    Display All
  • Hallo,

    Nun gibt es dabei noch eine Problem, ich weiß am Anfang nicht viele Felder es werden , da sie Dynamisch erzeugt werden.Dem entsprechent kenne ich meinFeldx für die Ausgabe erst wenn die Daten aus der Datenbank gelesen wurden.

    Deswegen möchte ich ja gerne das Ausgabefeld der Funktion übergeben

    Source Code

    1. function rechne(group, column, ob, ausgabe)
    2. output = group ? document.foo.meinFeld6 : document.foo.meinFeld3
    3. output = group ? document.foo.ausgabe


    So das die Funktion unabhängig eingesetzt werden kann.

    Gruß
    Stephan
  • das Summen array kannst du jederzeit erweitern.
    sum.push(new Array(0,0));

    Die Addition musst du dann mit einer Schleife realisieren

    Source Code

    1. for(var s in sum) {
    2. summe += s;
    3. }


    dann musst du nur noch das Ergebnisfeld dynamisch machen. Das kriegst du mit den namen leider schlecht hin. Nimm also eine ID:

    Source Code

    1. <input type="text" id="gruppenergebnis1" readonly="readonly" />


    Source Code

    1. function rechne(group, column, ob, ausgabe) {
    2. //...
    3. document.getElementById('gruppenergebnis'+group).value = summe;
    4. //...
    5. }
  • Ich glaube wir haben uns da etwas missverstanden, oder ich verstehe grade was nicht :)

    Im Bild siehst du wie die Anwendung aussieht. Es gibt zwei Felder vorne ANZ oder STD. eines von beiden ist nur Aktiv. Das kann er Benutzer festlegen. Was man bei Anz oder Std eingibt wird mit den Einzelpreis multipliziert. Daraus entsteht dann der Gesamt Preis.

    Dazu mal eine alte HTML Zeile wie es momentan mit den alten JavaScipt gelöst ist. Die Daten weitergabe habe ich mit Arrays gelost um die Daten später besser auslesen zu können.

    Gruß
    Stephan

    Source Code

    1. <tr class='posten_tabelle'>
    2. <td>1 <input name='zeile[]' type='hidden' value='1'></td>
    3. <td><input name='textfield[1][1]' value='' onChange="numerisch(this); rechne(this,this.form['textfield[1][1]'],this.form['textfield[1][3]'],this.form['textfield[1][4]'])" type='text' size='6' ></td>
    4. <td><input name='textfield[1][2]'readonly value='' onChange="numerisch(this); rechne(this,this.form['textfield[1][2]'],this.form['textfield[1][3]'],this.form['textfield[1][4]'])" type='text' size='6' ></td>
    5. <td>Motor lt. Auftrag</td>
    6. <td><input name='textfield[1][3]' type='text' size='6' value='0'></td>
    7. <td><input name='textfield[1][4]' value='' type='text' size='6'></td>
    8. </tr>
    Images
    • Unbenannt-1.gif

      6.89 kB, 920×182, viewed 415 times
  • Hallo ,


    irgendwie will das alles nicht so wie ich es will, kann daran liegen das ich auch nicht verstehe was deine Funktion genau macht :( Da ich mit Array´s arbeite um die Daten zu erfassen, wollte ich das jetzt so machen. Die Felder die nicht mit " onkeyup" sind, sind später gesperrt. Den es darf ja nur "anz" oder nur "std" geben.
    Die Funktion kann auch nicht mit vorgeben value="44" rechnen wenn sie nicht eingeben werden. Die alte Funktion konnte das, leider nur nicht mit Komma :(
    Vielleicht kannst du mal kurz erläutern wie deine Funktion Arbeitet. z.b. Verstehe ich nicht wie die Felder angesprochen werden.

    Vielen Dank schon mal im Vorraus

    Gruß
    Stephan

    Source Code

    1. <html><head>
    2. <script type="text/javascript">
    3. <!--
    4. var sum = new Array(new Array(0,0),new Array(0,0));
    5. function rechne(group, column, ob, ausgabe) {
    6. if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
    7. ob.value = ob.value.replace(/[a-zA-Z]/, "");
    8. }
    9. v = ob.value=="" ? "0" : ob.value;
    10. sum[group][column] = parseFloat(v.replace(/,/, "."));
    11. output = ausgabe;
    12. output.value = sum[group][0]*sum[group][1];
    13. }
    14. //-->
    15. </script>
    16. </head><body>
    17. <form name="foo" onSubmit="index.php">
    18. <input type="text" name="meinFeld4[1][1]" onKeyUp="rechne(0, 0, this, document.foo.meinFeld4[1][4])" />
    19. <input type="text" name="meinFeld4[1][2]" />
    20. <input type="text" name="meinFeld4[1][3]" onKeyUp="rechne(0, 1, this, document.foo.meinFeld4[1][4])" />
    21. <input type="text" name="meinFeld4[1][4]" readonly="readonly" />
    22. <br>
    23. <input type="text" name="meinFeld5" onKeyUp="rechne(1, 0, this, document.foo.meinFeld8)"/>
    24. <input type="text" name="meinFeld6" />
    25. <input type="text" name="meinFeld7" onKeyUp="rechne(1, 1, this, document.foo.meinFeld8)" value ="44"/>
    26. <input type="text" name="meinFeld8" readonly="readonly" />
    27. <br>
    28. <input type="submit" />
    29. </form>
    30. </body></html>
    31. </body>
    32. </html>
    Display All