Rechnen im Formular mit Kommas

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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

    Quellcode

    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. }
    Alles anzeigen
  • Soweit ich weis, gehen Kommazahlen in JavaScript nur mit mit einem Punkt.
    Deshalb folgende Möglichkeit, das Komma einfach durch einen Punkt zu ersetzen:

    Quellcode

    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

    Quellcode

    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. }
    Alles anzeigen
  • Probier mal folgendes:

    Quellcode

    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>
    Alles anzeigen


    Wenn du noch Fragen zum Code haben solltest, frag ruhig.
  • 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

    Quellcode

    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>
    Alles anzeigen
  • 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.

    Quellcode

    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>
    Alles anzeigen
  • 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

    Quellcode

    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>
    Alles anzeigen
  • 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

    Quellcode

    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>
    Alles anzeigen
  • 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

    Quellcode

    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

    Quellcode

    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:

    Quellcode

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


    Quellcode

    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

    Quellcode

    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>
    Bilder
    • Unbenannt-1.gif

      6,89 kB, 920×182, 408 mal angesehen
  • 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

    Quellcode

    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>
    Alles anzeigen