onchange - Formulardaten korrigieren - Firefox 2.0.0.1
kdoll
- javascript
0 Stefan Richter0 kdoll0 Stefan Richter
Folgendes Problem:
Formular in dem für jeden Artikel eine Stückzahl eingetragen werden kann. Für jeden Artikel gibt es eine Mindestmenge.
Beim Versuch den eingetragenen Wert an den Warenkorb zu liefern wird überprüft, ob bei diesem auch die Mindestmenge erreicht wurde.
Das hat bisher auch wunderbar geklappt, nur seit Firefox 2.0.0.1 scheint es hier zu einem Fehler zu kommen. Der Internet Explorer dagegen arbeitet hier wie gewohnt die neuen Wert ein.
Die Daten werden zwar kurzfristig richtig ersetzt, der Wert springt aber schnell wieder auf den eingetragenen Falschen zurück, da onchange dann nicht mehr zuschlägt landet der falsche Wert im Warenkorb.
Gibt es hier eine andere/einfachere Lösung, als nun die Überprüfung auf onsubmit zu ändern? Warum holt sich Firefox den alten Wert?
function WertCheck(anz, BoxGr)
{
var ianz = parseInt(anz.value);
var iBoxGr = parseInt(BoxGr.value);
var iErg;
if(isNaN(ianz) == true)
{
alert("Sie haben ungültige Werte eingetragen! Es sind nur Zahlen erlaubt!")
}
else
{
if((ianz % iBoxGr) != 0)
{
iErg = Math.floor(ianz/iBoxGr)+1;
iErg = iErg*iBoxGr;
alert("Achtung, die Mindestbestellmenge für diesen Artikel beträgt "+BoxGr.value+" Stück.\nDie Bestellmenge von "+anz.value+" Stück wird auf "+iErg+" geändert!");
anz.value = iErg;
}
}
}
Ein ähnliches Problem hatte ich auch gehabt bei einer Formularprüfung. Ich hatte das Problem, dass die Eingabe erst geprüft wurde, wenn ich das entsprechende Feld verlassen hatte.
Habe dabei vom onchange Event auf das onkeyup Event gewechselt... es wird zwar da nach jedem Tastendruck geprüft, aber bei mir hatte es funktioniert.
Alternativ könntest du natürlich auch deine Eingaben serverseitig mit z.B. PHP prüfen lassen! Denn bedenke: Prüfungen direkt bei der Eingabe sind zwar gut und schön... aber was ist wenn ein User JavaScript deaktiviert hat?
Danke für die schnelle Antwort,
leider bringt mir onkeyup nur das richtige Ergebnis, solange ich das Feld mit Tab verlasse, oder mit der Maus in einen freien Bereich klicke.
Sobald ich aber den Button für das Einfügen in den Warenkorb drücke erscheint zwar der Dialog, dass die Menge nicht stimmt und korrigiert wird, allerdings ändert sich am Inhalt des Feldes nichts mehr und die Daten landen immer noch falsch im Bestellwesen.
Sicher hast du recht, dass es sinnvoller wäre, die Prüfung serverseitig durchzuführen. Da ich aber damit rechne, dass die Seite eh in Bälde umgebaut werden muss, hatte ich auf eine kurzfristige Lösung mit dem Script gehofft.
Hmm kannst du vielleicht mal eine Beispiel HTML Datei (also mit abgespecktem Inhalt wo nur Eingabe und Prüfung drin ist) hochladen, damit wir hier mal testen können?
Kann dir gern das Beispiel posten, vieles kommt über CGI aus einer 4D-Datenbank. So sieht jedenfalls der Teil aus, der im Browser dann ankommt:
<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><title>test</title>
<SCRIPT src="/wertcheck.js" type="text/javascript"></SCRIPT>
</HEAD>
<body style="margin:0px;" bgcolor="#d5dbec">
<table cellspacing="0" cellpadding="0" border="0" width="800">
<form ACTION="/4DCGI/PRWKAdd/DE/02169431227916" NAME="InWarenkorb2" METHOD="post">
<tr class="ober"><td class="black">ArtNr.</td><td class="black"> Artikel, dt.</td><td class="black"> Kurzbez.</td><td class="black"> 50 Stk.</td><td class="rechts"> 8,24 / 50</td><td class="zentriert" align="center"><input onFocus="DE28.select();" onChange="WertCheck(self.document.InWarenkorb2.DE28, self.document.InWarenkorb2.iBoxGrDE28);" name="DE28" type="text" size="3" maxlength="4" value="50" style="font-family:verdana,arial,sans serif; font-size:11px; width:40px; height:16px; b"><input type="hidden" name="iBoxGrDE28" value="50"></td><td class="zentriert" align="center"><input type="image" src="/bilder/iconwarenkorb.gif" width="19" height="19" border="0" alt="Bestellte Artikel zum Warenkorb hinzufügen"></td></tr>
</form>
</td></tr></table></body></html
Nach dem hin und her bin ich jetzt zu der Überzeugung gekommen, dass es wohl doch am besten ist, gleich reinen Tisch zu machen und Javascript abzuschaffen und diese Überprüfungen im CGI-Teil durchzuführen.
Wird zwar etwas mehr Aufwand sein und evtl. einen Zwischenschritt erforderlich machen, aber dann hab ich gleich für die Zukunft vorgesorgt und eine einheitliche Umgebung für alle Routinen.
Danke für deine Mühen, ein Versuch wars wert;)
Hello out there!
Nach dem hin und her bin ich jetzt zu der Überzeugung gekommen, dass es wohl doch am besten ist, gleich reinen Tisch zu machen und Javascript abzuschaffen und diese Überprüfungen im CGI-Teil durchzuführen.
Eine clientseite Prüfung ist schon sinnvoll. Fehlerhafte Eingaben müssen gar nicht erst zum Server geschickt werden. Nur ist sie keine Alternative, sondern eine Ergänzung der serverseitigen Prüfung.
See ya up the road,
Gunnar
Hmm, bei mir scheint dein Script zu funktionieren!? Also ich gebe einen Wert ein, verlasse bspw. durch Tabulator das Eingabefeld und er bringt mir bei einer Falscheingabe eine Fehlermeldung... soweit alles korrekt!
Das einzigste was vielleicht sein kann: schreibe mal nicht onChange sondern onchange alles klein!
Manchmal hängt es mit der Schreibweise zusammen.
Grüße
Das Problem ist nicht, dass es gar nicht geht, sondern, dass es in dem Moment fehlschlägt, wenn der Benutzer nicht nur das Feld verlässt, sondern gleichzeitig eine andere Aktion startet, sprich Klick auf den Warenkorb/Bestellbutton.
Dann erscheint zwar immer noch der Warnhinweis, aber die Änderung der Daten wird nicht mehr ausgeführt.
Warum es aber erst explizit ab Firefox 2.x zugeschlagen hat ist mir schleierhaft.
Naja, wie gesagt, ich werd halt mal diese Überprüfung serverseitig durchführen, dann sollte es auch für weitere Browsergenerationen klappen;)
Gib da mal testweise am Ende deiner Funktion WertCheck ein return false; aus!
Bzw. könntest du das Senden der Daten z.B. durch Javascript anstoßen und vorher dort ebenfalls die Prüfung durchlaufen lassen (also wenn Klick auf Button, dann prüfen ob Daten korrekt sind, wenn ja abschicken, wenn nein nichts machen.)
function WertCheck(anz, BoxGr)
{
var ianz = parseInt(anz.value);
var iBoxGr = parseInt(BoxGr.value);
var iErg;
if(isNaN(ianz) == true)
{
alert("Sie haben ungültige Werte eingetragen! Es sind nur Zahlen erlaubt!")
}
else
{
if((ianz % iBoxGr) != 0)
{
iErg = Math.floor(ianz/iBoxGr)+1;
iErg = iErg*iBoxGr;
alert("Achtung, die Mindestbestellmenge für diesen Artikel beträgt "+BoxGr.value+" Stück.\nDie Bestellmenge von "+anz.value+" Stück wird auf "+iErg+" geändert!");
anz.value = iErg;
}
}
return false;
}
Auch mit "returne false;" ändert sich nix.
Ein Anstoßen der Übertragung per Script ist nicht gewünscht, da die Abhängigkeit von Client-seitigen Einstellungen damit nur noch größer wird.
Das Javascript wurde wohl früher auch nur als Notlösung auf die Schnelle mal eingebaut, als man feststellte, dass eine Überprüfung der Daten auf die Mindestmengen fehlt. Hätte vermutlich eh schon seit längerem mal bereinigt und auf Serverseite eingebaut gehört.
Ein Anstoßen der Übertragung per Script ist nicht gewünscht, da die Abhängigkeit von Client-seitigen Einstellungen damit nur noch größer wird.
Ich denke mal, dann bleibt dir wirklich nur noch die serverseitige Variante.
Grüße
Der HTML Code ist absolut grausam, warum macht man sowas?
Nagut, hier das relevante:
<form ACTION="/4DCGI/PRWKAdd/DE/02169431227916" NAME="InWarenkorb2" METHOD="post">
<input onFocus="DE28.select();" onChange="WertCheck(self.document.InWarenkorb2.DE28, self.document.InWarenkorb2.iBoxGrDE28);" name="DE28"
Wozu das select() und da wir deine Fehlermledung nicht kenne ist meine Vermutung das die genau diesen aufruf betrifft, da es kein Objekt DE28 gibt.
Dann kannst du das ganze zumindest hier noch wesntlich lesbarer und flexibler machen: onchange="WertCheck(this, this.form.iBoxGrDE28);" name="DE28"
Struppi.