PHP Javascript Problemchen
der tut nich wie er soll im Firefox!
Mahlzeit!!
ich hab hier n nettes Script geschrieben welches Daten in eine Datenbank einfügen soll. Der User füllt n paar Felder aus und drückt Submit!
Soweit is alles klar, funktioniert.
Nun hab ich ein kleines Javascript, welches die Felder auf die korrekte Eingabe checken und wenn nichts drin steht einfach den Cursor aufs Feld setzen und den User das eintragen lassen.
Funktioniert perfekt im Internet Explorer, nur der Firefox, der gibt zwar die Warnung aus das ein Formfeld nicht ausgefüllt ist, schickt das Formular aber trotzdem ab, so das der Inhalt der leeren Felder in der Datenbank landen (was sie ja nicht sollen)
Hier das Javascript:
Und hier das Form (zumindest der anfang)
Mahlzeit!!
ich hab hier n nettes Script geschrieben welches Daten in eine Datenbank einfügen soll. Der User füllt n paar Felder aus und drückt Submit!
Soweit is alles klar, funktioniert.
Nun hab ich ein kleines Javascript, welches die Felder auf die korrekte Eingabe checken und wenn nichts drin steht einfach den Cursor aufs Feld setzen und den User das eintragen lassen.
Funktioniert perfekt im Internet Explorer, nur der Firefox, der gibt zwar die Warnung aus das ein Formfeld nicht ausgefüllt ist, schickt das Formular aber trotzdem ab, so das der Inhalt der leeren Felder in der Datenbank landen (was sie ja nicht sollen)
Hier das Javascript:
function check() {
if (document.bde.name.value == '0') {
alert ('Der Mitarbeiter fehlt!');
document.bde.name.focus();
document.bde.name.style.setAttribute("border","1px solid red");
return false;
}
}
Und hier das Form (zumindest der anfang)
form name='bde' onSubmit='return check()' action='' method='post'
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 12559
Url: https://administrator.de/forum/php-javascript-problemchen-12559.html
Ausgedruckt am: 23.12.2024 um 08:12 Uhr
13 Kommentare
Neuester Kommentar
Hallo,
das Verhalten ist so wie beschrieben völlig normal, da der Event-handler "onSubmit" in dem Moment ausgeführt wird, wenn das Formular abgeschickt wird. Daran ändert (oder liege ich da ganz falsch?) auch das return false der JS-Funktion nichts.
Du müsstest das ganze nur etwas anders aufbauen.
Nimm mal das onSubmit aus dem einleitenden Form-Tag raus und setz onClick dafür in den Button, der das Absenden startet. Das kann dan so aussehen:
<code class="font">
< button name="absenden" type="button" value="Absenden" onClick="test()">Absenden< /button>
Beim Click auf den Button wird die JS-Funktion test() aufgerufen, in der der eigentlich Befehl zum Absenden notiert ist. Hier kannst Du es dann ja mit IF-Abfragen etc. regeln, wann alle Voraussetzungen zum Versenden erfüllt sind:
Der JS-Befehl zum Versenden ist dann:
<code class="font">
document.bde.submit();
Der Clou ist also nur, dass Du nicht onSubmit nehmen kannst für das, was Du machen willst, sondern es muss ein anderer Event-Handler sein. Ansonsten musst Du es natürlich nicht zwingend wie oben aufbauen, ist nur ein mögliches Beispiel
Gruß,
TIM
das Verhalten ist so wie beschrieben völlig normal, da der Event-handler "onSubmit" in dem Moment ausgeführt wird, wenn das Formular abgeschickt wird. Daran ändert (oder liege ich da ganz falsch?) auch das return false der JS-Funktion nichts.
Du müsstest das ganze nur etwas anders aufbauen.
Nimm mal das onSubmit aus dem einleitenden Form-Tag raus und setz onClick dafür in den Button, der das Absenden startet. Das kann dan so aussehen:
<code class="font">
< button name="absenden" type="button" value="Absenden" onClick="test()">Absenden< /button>
Beim Click auf den Button wird die JS-Funktion test() aufgerufen, in der der eigentlich Befehl zum Absenden notiert ist. Hier kannst Du es dann ja mit IF-Abfragen etc. regeln, wann alle Voraussetzungen zum Versenden erfüllt sind:
Der JS-Befehl zum Versenden ist dann:
<code class="font">
document.bde.submit();
Der Clou ist also nur, dass Du nicht onSubmit nehmen kannst für das, was Du machen willst, sondern es muss ein anderer Event-Handler sein. Ansonsten musst Du es natürlich nicht zwingend wie oben aufbauen, ist nur ein mögliches Beispiel
Gruß,
TIM
Noch ein Nachtrag:
Ich weiß nicht, warum das ganze im IE so klappt, wie Du es geplant hast. Wenn man sich die Microsoft Erklärungen für ONSUBMIT im IE anschaut, ist da explizit die Rede:
<code class="font">
You can override this event by returning false in the event handler. Use this capability to validate data on the client side to prevent invalid data from being submitted to the server.
1
Und das ist das, was Du willst: das ursprüngliche Verhalten von Onsubmit per "return false" ausschalten, damit keine falschen Daten an den Server verschickt werden.
Das original Dokument des W3C zu HTML 4 schreibt davon aber gar nichts. Hier heßt es nur:
<code class="font">
onsubmit = script [CT]
The onsubmit event occurs when a form is submitted. It only applies to the FORM element.
2
Es scheint also so, dass das gewünschte Verhalten nicht W3C konform ist und deshalb nicht von Firefox angewandt wird. Der IE scheint es zu machen, weil Microsoft es als Erweiterung zum eigentlichen Standard eingebaut hat.
Hhm, hast Du es mal mit Opera oder was anderem ausgetestet? Wie verhält es sich da?
Hat noch jemand eine Idee?
Gruß,
TIM
Ich weiß nicht, warum das ganze im IE so klappt, wie Du es geplant hast. Wenn man sich die Microsoft Erklärungen für ONSUBMIT im IE anschaut, ist da explizit die Rede:
<code class="font">
You can override this event by returning false in the event handler. Use this capability to validate data on the client side to prevent invalid data from being submitted to the server.
1
Und das ist das, was Du willst: das ursprüngliche Verhalten von Onsubmit per "return false" ausschalten, damit keine falschen Daten an den Server verschickt werden.
Das original Dokument des W3C zu HTML 4 schreibt davon aber gar nichts. Hier heßt es nur:
<code class="font">
onsubmit = script [CT]
The onsubmit event occurs when a form is submitted. It only applies to the FORM element.
2
Es scheint also so, dass das gewünschte Verhalten nicht W3C konform ist und deshalb nicht von Firefox angewandt wird. Der IE scheint es zu machen, weil Microsoft es als Erweiterung zum eigentlichen Standard eingebaut hat.
Hhm, hast Du es mal mit Opera oder was anderem ausgetestet? Wie verhält es sich da?
Hat noch jemand eine Idee?
Gruß,
TIM
Hallo,
lässt sich so schlecht beurteilen, sieht aber eigentlich richtig aus.
Kannst Du die Seite nicht mal testweise online stellen, dann könnte man es sich mal im ganzen ansehen, also das Zusammenspiel von Formular und Javascript. So müsste ich mir erst selbst eine Seite zum Testen zusammenbasteln und das ist mir gerade zu anstrengend
Hier nochmal ein beispiel zur Verwendung von Submit:
http://de.selfhtml.org/javascript/objekte/forms.htm#submit
Gruß,
TIM
lässt sich so schlecht beurteilen, sieht aber eigentlich richtig aus.
Kannst Du die Seite nicht mal testweise online stellen, dann könnte man es sich mal im ganzen ansehen, also das Zusammenspiel von Formular und Javascript. So müsste ich mir erst selbst eine Seite zum Testen zusammenbasteln und das ist mir gerade zu anstrengend
Hier nochmal ein beispiel zur Verwendung von Submit:
http://de.selfhtml.org/javascript/objekte/forms.htm#submit
Gruß,
TIM
@kuehlmeister
Hi,
anstatt if (document.bde.name.value == '0')
probiere mal
if (document.bde.name.value == " ")
Du fragst zwar ab, ob der Inhalt des Textfeldes 0 ist,
aber wenn das Feld leer ist, ist es eben auch nicht 0, sondern
einfach leer und somit in Ordnung.
Gruß
Günni
Hi,
anstatt if (document.bde.name.value == '0')
probiere mal
if (document.bde.name.value == " ")
Du fragst zwar ab, ob der Inhalt des Textfeldes 0 ist,
aber wenn das Feld leer ist, ist es eben auch nicht 0, sondern
einfach leer und somit in Ordnung.
Gruß
Günni
Hallo,
merkwürdig, kann ich nur sagen.
Also der einzige JS-Fehler, der bei mir kommt, ist, dass die "setAttribute" keine Funktion ist. Das liegt aber wahrscheinlich nur daran, dass bei Dir der dritte Parameter fehlt. Vgl: http://de.selfhtml.org/javascript/objekte/all.htm#set_attribute
Was mir noch auffält, ist, dass Du nahezu überall ' statt " verwendest, was aber kein Problem sein sollte ???
Aber ansonsten will mir nicht einleuchten, warum das nicht geht, zumal ich vor einigen Jahren selbst mal Formularabfragen auf diese Weise gemacht habe - und die laufen heute noch problemlos. Vielleicht schaust Du Dir das einfach mal an, unter Umständen hilft es Dir ja:
http://www.uni-wuerzburg.de/philfakIII/phil3_7n.htm (Das "Service-Formular")
http://www.cip.phil3.uni-wuerzburg.de/content/feedback/feedback.php (hier vor allem die weiterführenden Formulare)
Sorry, dass ich nicht wirklich weiter helfen konnte...
Gruß,
TIM
merkwürdig, kann ich nur sagen.
Also der einzige JS-Fehler, der bei mir kommt, ist, dass die "setAttribute" keine Funktion ist. Das liegt aber wahrscheinlich nur daran, dass bei Dir der dritte Parameter fehlt. Vgl: http://de.selfhtml.org/javascript/objekte/all.htm#set_attribute
Was mir noch auffält, ist, dass Du nahezu überall ' statt " verwendest, was aber kein Problem sein sollte ???
Aber ansonsten will mir nicht einleuchten, warum das nicht geht, zumal ich vor einigen Jahren selbst mal Formularabfragen auf diese Weise gemacht habe - und die laufen heute noch problemlos. Vielleicht schaust Du Dir das einfach mal an, unter Umständen hilft es Dir ja:
http://www.uni-wuerzburg.de/philfakIII/phil3_7n.htm (Das "Service-Formular")
http://www.cip.phil3.uni-wuerzburg.de/content/feedback/feedback.php (hier vor allem die weiterführenden Formulare)
Sorry, dass ich nicht wirklich weiter helfen konnte...
Gruß,
TIM
@kuehlmeister
Hi,
so funkt. es(Sternchen durch < ersetzen):
Dateiname=check.php
Beachte das return true am Ende der Funktion!
Gruß
Günni
Hi,
so funkt. es(Sternchen durch < ersetzen):
*!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
*html>
*head>
*title>Untitled</title>
*script type="text/javascript">
*!--
function check(){
if(document.formular.textfeld.value=="" || document.formular.textfeld.value=="Bitte ausfüllen!"){
document.formular.textfeld.value="Bitte ausfüllen!";
document.formular.textfeld.select();
return false;
}
return true; //fehlt bei dir
}
// -->
*/script>
*/head>
*body>
*form action="check.php" method="post" name="formular" onsubmit="return check()">
*input type="text" name="textfeld" value="" />
*input type="submit" value="Absenden"/>
*/form>
*/body>
*/html>
Dateiname=check.php
Beachte das return true am Ende der Funktion!
Gruß
Günni
@kuehlmeister
Hi,
ein Manko ist noch vorhanden:
Der Benutzer kann trotzdem falsche Eingaben machen wie z.B. Müller(Heinz),
Schmitz09, Otto=Peter oder einfach nur ein Leerzeichen.
Hier noch eine kleine Verbesserung:
Gruß
Günni
Hi,
ein Manko ist noch vorhanden:
Der Benutzer kann trotzdem falsche Eingaben machen wie z.B. Müller(Heinz),
Schmitz09, Otto=Peter oder einfach nur ein Leerzeichen.
Hier noch eine kleine Verbesserung:
function check(){
ok=false;
muster=/[A-Za-zÄÖÜäöüß]/;//Prüfen, ob Buchstaben eingegeben wurden
test=muster.exec(document.formular.textfeld.value);
if(test){ok=true;}//Wenn ja, dann O.K.
muster=/[0-9]|[@\(\)\[\]\.=]/;//Prüfen, ob zusätzlich Ziffern, @-Zeichen,
//Klammern, Punkt oder Gleichheitzeichen eingegeben wurden
//Die Liste verbotener Zeichen kann einfach erweitert werden.
//Zu beachten ist nur, dass best. Zeichen durch den Backslash maskiert(\(,\.,\])
//werden müssen, da sie sonst nicht als das Zeichen selber interpretiert werden.
//Einfach mal ausprobieren, allzu gut kenn´ich mich mit reg.Ausdrücken nicht aus.
test=muster.exec(document.formular.textfeld.value);
if(test){ok=false;}//Wenn ja, dann nicht O.K.
if(!ok || document.formular.textfeld.value=="Bitte ausfüllen!"){
document.formular.textfeld.value="Bitte ausfüllen!";
document.formular.textfeld.select();
return false;
}
return true;
}
Gruß
Günni