Rechnen im Formular mit Kommas

Matrixstyle · 17. Januar 2007, 01:39

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

function numerisch(feld)
{
if(feld.value == "")
return
// Feld analysieren
var test = parseFloat(feld.value)
// OK? Dann zurueck!
if(!isNaN(test))
{
// Ergebnis darstellen
feld.value = test
return
}
// Fehlermeldung
alert("Bitte nur numerische Angaben!")
// Eingabe selektieren und Eingabefokus setzen
feld.select()
feld.focus()
}
function rechne(feld, eingabe1, eingabe2, ausgabe)
{
with(feld.form)
{
var wert1 = parseFloat(eingabe1.value)
var wert2 = parseFloat(eingabe2.value)
// Werte in Feld1 und Feld2 numerisch?
if(isNaN(wert1) || isNaN(wert2))
return
// Ergebnis berechnen, wenn beide Felder gefuellt sind
ausgabe.value = (eingabe1.value == "" ||
eingabe2.value == "") ?
"" :
wert1 * wert2
}
}

Alles anzeigen

Baby Herman · 17. Januar 2007, 10:25

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

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

Habs bereits ausgetestet. Findet diese Umwandlung an der richtigen Stelle statt, sollte sie auch bei dir einwandfrei funktionieren.

Matrixstyle · 17. Januar 2007, 11:14

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

function rechne(feld, eingabe1, eingabe2, ausgabe)
{
with(feld.form)
{
var eingabe_cach1 = eingabe1.replace(/,/, ".");
eingabe2 = eingabe_cach1;
var eingabe_cach2 = eingabe2.replace(/,/, ".");
eingabe2 = eingabe_cach2;
var wert1 = parseFloat(eingabe1.value)
var wert2 = parseFloat(eingabe2.value)
// Werte in Feld1 und Feld2 numerisch?
if(isNaN(wert1) || isNaN(wert2))
return
// Ergebnis berechnen, wenn beide Felder gefuellt sind
ausgabe.value = (eingabe1.value == "" ||
eingabe2.value == "") ?
"" :
wert1 * wert2
}
}

Alles anzeigen

Baby Herman · 17. Januar 2007, 11:32

Probier mal folgendes:

Quellcode

<html><head><title>Test</title></head><body>
<script type="text/javascript">
function rechne(feld)
{
with(document.getElementById(feld))
{
var wert1 = eingabe1.value;
var wert2 = eingabe2.value;
wert1 = wert1.replace(/,/, ".");
wert2 = wert2.replace(/,/, ".");
// Werte in Feld1 und Feld2 numerisch?
if(isNaN(wert1) || isNaN(wert2)) return ausgabe.value = "Fehler";
// Ergebnis berechnen, wenn beide Felder gefuellt sind
ausgabe.value = wert1 * wert2;
}
}
</script>
<form id="form" onsubmit="rechne(this.id); return false;">
<input id="eingabe1" /><br />
<input id="eingabe2" /><br />
<input id="ausgabe" /><br />
<br />
<input type="submit" />
</form>
</body></html>

Alles anzeigen

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

phax · 17. Januar 2007, 12:19

Quellcode

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

hth

Matrixstyle · 19. Januar 2007, 21:57

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

<html><head><title>Test</title></head><body>
<script type="text/javascript">
function rechne(feld)
{
with(feld.form)
{
var eingabe_cach1 = meinFeld1.value.replace(/,/, ".");
wert1 = eingabe_cach1;
var eingabe_cach2 = meinFeld2.value.replace(/,/, ".");
wert2 = eingabe_cach2;
var wert3 = parseFloat(wert1)
var wert4 = parseFloat(wert2)
// Werte in Feld1 und Feld2 numerisch?
if(isNaN(wert4) || isNaN(wert3))
return
// Ergebnis berechnen, wenn beide Felder gefuellt sind
meinFeld3.value = (meinFeld1.value == "" ||
meinFeld2.value == "") ?
"" :
wert3 * wert4
}
}
</script>
<form id="form" onSubmit="rechne(this.id); return false;">
<input type="text" name="meinFeld1"
onChange="rechne(this)">
<input type="text" name="meinFeld2"
onChange="rechne(this)">
<input type="text" name="meinFeld3" readonly>
<br />
<input type="submit" />
</form>
</body></html>

Alles anzeigen

Torben Brodt · 28. Januar 2007, 20:02

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

<html><head>
<script type="text/javascript">
<!--
var sum = new Array(0,0);
function rechne(column, ob) {
if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
ob.value = ob.value.replace(/[a-zA-Z]/, "");
}
v = ob.value=="" ? "0" : ob.value;
sum[column] = parseFloat(v.replace(/,/, "."));
document.foo.meinFeld3.value = sum[0]+sum[1];
}
//-->
</script>
</head><body>
<form name="foo" onsubmit="index.php">
<input type="text" name="meinFeld1" onkeyup="rechne(0, this)" />
<input type="text" name="meinFeld2" onkeyup="rechne(1, this)" />
<input type="text" name="meinFeld3" readonly="readonly" />
<input type="submit" />
</form>
</body></html>

Alles anzeigen

Matrixstyle · 30. Januar 2007, 16:26

Cool, Danke!!!

Werde ich gleich mal in meiner Anwendung Implementieren!

Gruß
Stephan

Matrixstyle · 30. Januar 2007, 17:19

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

<html><head>
<script type="text/javascript">
<!--
var sum = new Array(0,0);
function rechne(column, ob, ausgabe) {
if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
ob.value = ob.value.replace(/[a-zA-Z]/, "");
}
v = ob.value=="" ? "0" : ob.value;
sum[column] = parseFloat(v.replace(/,/, "."));
document.foo.ausgabe.value = sum[0]+sum[1];
}
//-->
</script>
</head><body>
<form name="foo" onsubmit="index.php">
<input type="text" name="meinFeld1" onkeyup="rechne(0, this, meinFeld3)" />
<input type="text" name="meinFeld2" onkeyup="rechne(1, this, meinFeld3)" />
<input type="text" name="meinFeld3" readonly="readonly" />
<br>
<input type="text" name="meinFeld4" onkeyup="rechne(0, this, meinFeld6)" />
<input type="text" name="meinFeld5" onkeyup="rechne(1, this, meinFeld6)" />
<input type="text" name="meinFeld6" readonly="readonly" />
<input type="submit" />
</form>
</body></html>
</body>
</html>

Alles anzeigen

Torben Brodt · 30. Januar 2007, 17:26

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

<html><head>
<script type="text/javascript">
<!--
var sum = new Array(new Array(0,0),new Array(0,0));
function rechne(group, column, ob) {
if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
ob.value = ob.value.replace(/[a-zA-Z]/, "");
}
v = ob.value=="" ? "0" : ob.value;
sum[group][column] = parseFloat(v.replace(/,/, "."));
output = group ? document.foo.meinFeld6 : document.foo.meinFeld3
output.value = sum[group][0]+sum[group][1];
}
//-->
</script>
</head><body>
<form name="foo" onsubmit="index.php">
<input type="text" name="meinFeld1" onkeyup="rechne(0, 0, this)" />
<input type="text" name="meinFeld2" onkeyup="rechne(0, 1, this)" />
<input type="text" name="meinFeld3" readonly="readonly" />
<br>
<input type="text" name="meinFeld4" onkeyup="rechne(1, 0, this)" />
<input type="text" name="meinFeld5" onkeyup="rechne(1, 1, this)" />
<input type="text" name="meinFeld6" readonly="readonly" />
<input type="submit" />
</form>
</body></html>
</body>
</html>

Alles anzeigen

Matrixstyle · 31. Januar 2007, 12:33

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

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

So das die Funktion unabhängig eingesetzt werden kann.

Gruß
Stephan

Torben Brodt · 31. Januar 2007, 13:45

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

Die Addition musst du dann mit einer Schleife realisieren

Quellcode

for(var s in sum) {
summe += s;
}

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

Quellcode

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

Quellcode

function rechne(group, column, ob, ausgabe) {
//...
document.getElementById('gruppenergebnis'+group).value = summe;
//...
}

Matrixstyle · 31. Januar 2007, 14:11

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

<tr class='posten_tabelle'>
<td>1 <input name='zeile[]' type='hidden' value='1'></td>
<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>
<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>
<td>Motor lt. Auftrag</td>
<td><input name='textfield[1][3]' type='text' size='6' value='0'></td>
<td><input name='textfield[1][4]' value='' type='text' size='6'></td>
</tr>

Torben Brodt · 31. Januar 2007, 20:32

kannst auch das Zielelement übergeben:

Quellcode

<input type="text" name="meinFeld2" onkeyup="rechne(0, 1, this, document.foo.meinFeld3)" />

Im JavaScript brauchst du output dann nur diesem Feld zuzuweisen:

Quellcode

output = ausgabe;

Matrixstyle · 2. Februar 2007, 16:24

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

<html><head>
<script type="text/javascript">
<!--
var sum = new Array(new Array(0,0),new Array(0,0));
function rechne(group, column, ob, ausgabe) {
if(ob.value.match(/[a-zA-Z]/)) { //Buchstaben entfernen
ob.value = ob.value.replace(/[a-zA-Z]/, "");
}
v = ob.value=="" ? "0" : ob.value;
sum[group][column] = parseFloat(v.replace(/,/, "."));
output = ausgabe;
output.value = sum[group][0]*sum[group][1];
}
//-->
</script>
</head><body>
<form name="foo" onSubmit="index.php">
<input type="text" name="meinFeld4[1][1]" onKeyUp="rechne(0, 0, this, document.foo.meinFeld4[1][4])" />
<input type="text" name="meinFeld4[1][2]" />
<input type="text" name="meinFeld4[1][3]" onKeyUp="rechne(0, 1, this, document.foo.meinFeld4[1][4])" />
<input type="text" name="meinFeld4[1][4]" readonly="readonly" />
<br>
<input type="text" name="meinFeld5" onKeyUp="rechne(1, 0, this, document.foo.meinFeld8)"/>
<input type="text" name="meinFeld6" />
<input type="text" name="meinFeld7" onKeyUp="rechne(1, 1, this, document.foo.meinFeld8)" value ="44"/>
<input type="text" name="meinFeld8" readonly="readonly" />
<br>
<input type="submit" />
</form>
</body></html>
</body>
</html>

Alles anzeigen

Torben Brodt · 2. Februar 2007, 20:10

mein Script speichert halt alles was über die Funktion übergeben wird im Array sum.
Wenn du die Funktionsaufrufe nicht machen willst, müssen die Felder eben in den Code (wie bei deiner ursprünglichen Lösung, bei der ja nur der float fehlte)

Rechnen im Formular mit Kommas

Rechnen im Formular mit Kommas

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags