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:

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/contentid/12559

Ausgedruckt am: 22.11.2024 um 15:11 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

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.

¹

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.

²

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

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

@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

@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

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

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

@kuehlmeister

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:

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:

> 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):

> *!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:

	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;

	}