13
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)
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' 
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 12559
Url: https://administrator.de/contentid/12559
Printed on: April 19, 2024 at 16:04 o'clock
13 Comments
Latest comment
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
Hi,
das hab ich jetzt auch probiert, leider funktioniert der document.bde.submit() nicht, da meckert der immer rum das sei keine Funktion....
function check() {
if(document.bde.name.value != '0' && document.bde.start.value != '' && document.bde.ende.value != '' && document.bde.anzahl.value != '') {
alert('alles klar');
document.bde.submit();
}
else {
alert('Eingaben fehlen');
}
}
Aber eigentlich ist das richtig geschrieben??
im Form:
print "< button name='submit' type='button' value='Eintragen' onClick='check()'>Absenden< / button >";
P.S. nich wundern wegen print, is alles in ner .php
thx
das hab ich jetzt auch probiert, leider funktioniert der document.bde.submit() nicht, da meckert der immer rum das sei keine Funktion....
function check() {
if(document.bde.name.value != '0' && document.bde.start.value != '' && document.bde.ende.value != '' && document.bde.anzahl.value != '') {
alert('alles klar');
document.bde.submit();
}
else {
alert('Eingaben fehlen');
}
}
Aber eigentlich ist das richtig geschrieben??
im Form:
print "< button name='submit' type='button' value='Eintragen' onClick='check()'>Absenden< / button >";
P.S. nich wundern wegen print, is alles in ner .php
thx
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
@günni
ne, ich frag tatsächlich nach ner null in diesem Feld, wenn nämlich kein name angewählt ist. Die Namen sind in einem Listenfeld und der value des ersten eintrags ist 0.
@tim
seite kann ich morgen mal online stellen thx
ne, ich frag tatsächlich nach ner null in diesem Feld, wenn nämlich kein name angewählt ist. Die Namen sind in einem Listenfeld und der value des ersten eintrags ist 0.
@tim
seite kann ich morgen mal online stellen thx
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
Jo hier ist die Seite mal online: http://laxfarm.de/php/test.php
Das mit dem submit funktioniert nur, wenn in dem < button > tag das type='button' nicht drin ist.
Aber der return nach dem anklicken des Buttons nicht, sondern sendet einfach ab.
thx
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
@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
ja danke, das baue ich noch mit ein.
@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
haha! nun gehts! Und zwar nur, wenn der keine Select-Felder abfragen soll. Weil dann nämlich sendet der das per Post ab.
muss noch rausfinden wie man die dinger besser abfragt, weil über value= gehts nich
thx
Juhuu! Nun gehts ganz! So isses:
danke!
function check() {
if(document.bde.name.options.selected==true) {
alert("Bitte den Namen eintragen!");
return false;
}
if(document.bde.typ.options.selected==true) {
alert("Bitte den Typen eintragen!");
return false;
}
if(document.bde.schritt.options.selected==true) {
alert("Bitte den Arbeitsschritt eintragen!");
return false;
}
if(document.bde.start.value=="") {
alert("Bitte den Startwert eintragen!");
document.bde.start.select();
return false;
}
if(document.bde.ende.value=="") {
alert("Bitte den Endwert eintragen!");
document.bde.ende.select();
return false;
}
if(document.bde.anzahl.value=="") {
alert("Bitte die Stueckzahl eingeben!");
document.bde.anzahl.select();
return false;
}
return true;
}danke!
