[GELÖST] Verständnisfrage zu JS

nikels · 28. Juli 2014

Hallo alle zusammen

Ich probiere gerade JS aus und habe folgende Frage:
Erstmal einen kleinen ausschnitt aus meiner Hmtl Datei.

Code:

<form name="check" onsubmit="return legit()" action="" method="post">

		<table cellpadding="0" border="0">
			<tr>
				<td> <h1>Adresse </h1> </td>
			</tr>
			
			<tr>
				<td>Anrede:</td>
				<td> <select name="Anrede" size="1" style="margin-left:20px" >
					<option> </option>
					<option>Frau</option>
					<option>Herr</option>
					<option>Mr Sir </option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td>Titel:</td>
				<td> <select name="Titel" size="1" style="margin-left:20px">
					<option></option>
					<option>Dr.</option>
					<option>Prof.</option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td>Vorname:</td>
				<td> 
				<input type="text" name="Vorname" style="background-color:#EFFBF5;margin-left:20px"/> 
				</td>
			</tr>
			
			<tr>
				<td>Nachname:</td>
				<td> 
				<input type="text" name="Nachname" style="background-color:#EFFBF5;margin-left:20px" /> 
				</td>
			</tr>
			
			<tr>
				<td>Strasse:</td>
				<td> 
				<input type="text" name="Strasse" style="background-color:#EFFBF5;margin-left:20px" /> 
				</td>
			</tr>
			
			<tr>
				<td>PLZ:</td>
				<td> 
				<input type="text" name="PLZ" style="background-color:#EFFBF5;margin-left:20px" />
				</td>
			</tr>

Dazu folgender JS code

Code:

<script type="text/javascript">

//<![CDATA[

	function legit(){
		ErrorCounter ='';
		
		if(document.check.Anrede.options[0].selected==true)	
			ErrorCounter+="Bitte w\u00fchlen Sie die Anrede aus\n";
			
			
		if (document.check.Vorname.value=="")	
			ErrorCounter+= "Das Feld Vorname wurde nicht ausgef\u00fcllt\n ";
			
			
		if (document.check.elements[3].value=="" )
			ErrorCounter+= "Das Feld Nachname wurde nicht ausgef\u00fcllt\n ";
			
		if (document.check.Strasse.value.length<10)
			ErrorCounter+= "Das Feld Strasse wurde nicht ausgef\u00fcllt\n ";
			
		if(document.check.PLZ.value.length!=5)
			ErrorCounter+= "Das Feld PLZ ist zu lang oder zu kurz\n";
			
				
		if(ErrorCounter.length>0){
		
			alert("Festgestellte Probleme:\n\n" +ErrorCounter);
			return (false);
		
								 }
									
	
			return (true);
							
							}
							




//]]>
</script>

Also das was ich mache / machen möchte ist Folgendes wenn der Benutzer bestimmte Felder nicht auswählt soll ein alert kommen,
der den User drauf hinweißt, welche Felder er noch auszufüllen hat. Erst wenn er die in JS abgefragten Felder ausfüllt wird die "Buchung" abgeschickt.
Ist diese Lösung in Ordnung kann man das schneller/eleganter lösen?

dbarthel · 28. Juli 2014

Alle Felder können auch mit unsinnigen Zeichen (Sonderzeichen) oder Zahlen gefüllt werden, und im Feld Straße sind sogar 10 Leerzeichen erlaubt.

nikels · 28. Juli 2014

Ja das ist mit klar, ich möchte aber erst mal wissen ob die Lösung o.k. ist (wenn der User z.B. bei Vorname nichts hinschreibt), das es ein alert gibt.
Würdest du/ihr das genauso lösen?

j-l-n · 28. Juli 2014

Wieso speicherst du das Ganze nicht ordentlich in UTF-8 und schenkst dir dieses extrem umständliche Kodieren von Umlauten (z.B. w\u00fchlen)??
Außerdem finde ich die Prüfung auf 10 Zeichen im Straßennamen absolut unsinnvoll - wenn jemand beispielsweise in der "Allee 2" wohnt, dann hat er keine gültige Adresse?
PS: kannst du bitte dann auch mal deine serverseitige Prüfung zeigen?

nikels · 28. Juli 2014

Den PHP Teil, habe ich leider nicht hier, kann ich aber abends oder morgen früh nachreichen.

- - - Aktualisiert - - -

Hab jetzt dem code etwas geändert bzw hinzugefügt

HTML:

		<table>
			<tr>
				<td> <h1>Mögliche Ziele</h1> </td>
			</tr>
			
			<tr>
				
				<td> <input type="radio" name="Ziel" value="1200 Euro Italien" /> Italien </td>
			</tr>
			
			<tr>
			
				<td> <input type="radio" name="Ziel" value="900 Euro Russland"/> Russland </td>
			</tr>
			
			<tr>
				
				<td> <input type="radio" name="Ziel" value="200 Euro Berlin" /> Berlin </td>
			</tr>
			
			
		</table>
		
		
		
		<table>
			<tr>
				<td> <h1> Flughafen</h1> </td>
			</tr>
			
			<tr>
			
				<td> <input type="radio" name="Flughafen" value="150 Euro Frankfurt" /> Frankfurt </td>
			</tr>
			
			<tr>
			
				<td> <input type="radio" name="Flughafen" value="100 Euro Bonn"/> Bonn </td>
			</tr>
			
			<tr>
			
				<td> <input type="radio" name="Flughafen" value="70 Euro Berlin" /> Berlin </td>
			</tr>
			
			
		</table>

Kann ich irgendwie ein Feld generieren welches 0 Euro anzeigt und dann z.B. bei der Auswahl
vom Flughafen Bonn auf 100 euro geändert wird, und zwar ohne das ich dafür "Buchen" muss =?
Ich will also das Value auslesen, berechnen und in "Real Time" im z.B. einem textfield anzeigen lassen.

j-l-n · 28. Juli 2014

nikels schrieb:
Kann ich irgendwie ein Feld generieren welches 0 Euro anzeigt und dann z.B. bei der Auswahl
vom Flughafen Bonn auf 100 euro geändert wird, und zwar ohne das ich dafür "Buchen" muss =?

Code:

var price = document.createElement("input");
price.type = "text";
price.readOnly = true;
price.value = "0.00 €";
document.body.appendChild(price);

Und dann entsprechend einen onchange-Eventlistener auf das jeweilige <select> und den Preis mittels price.value in das Textfeld schreiben...

nikels · 28. Juli 2014

Hab folgenden Ansatz

Code:

<script type="text/javascript">

//<![CDATA[


	function makeChange(){
	var preis=document.check.Flughafen.value;
	document.getElementById("Preis").innerHTML=" PREIS: "+Preis+ "   Euro "
	}
		
					
//]]>
</script>

HTML:

		<table>
			<tr>
				<td> <h1> Flughafen</h1> </td>
			</tr>
			
			<tr>
			
				<td> <input type="radio" name="Flughafen" value="150 " onChange=makeChange() /> Frankfurt </td>
			</tr>
			
			<tr>
			
				<td> <input type="radio" name="Flughafen" value="100" onChange=makeChange() /> Bonn </td>
			</tr>
			
			<tr>
			
				<td> <input type="radio" name="Flughafen" value="70 "onChange=makeChange()  /> Berlin </td>
			</tr>
			
			<tr>
				<td> <p id=Preis> Preis: 0   Euro </p> </td>
			</tr>
			
			
		</table>
		
		
		<p style="align:center">
			<input type="submit" name="Buchung" value="Buchung"/> 
			<input type="reset" name="Abbrechen" value="Abbrechen"/>
		</p>

Bekomme aber einen Fehler.... kann man radio nicht mit value auslesen ?

dbarthel · 28. Juli 2014

nikels schrieb:
Ja das ist mit klar, ich möchte aber erst mal wissen ob die Lösung o.k. ist (wenn der User z.B. bei Vorname nichts hinschreibt), das es ein alert gibt.
Würdest du/ihr das genauso lösen?

Das alert an sich ist ok, auch wenn persönlich einen im Dokument eingeblendeten Hinweis, idealerweise unter oder nebem dem Feld, welches nicht ausgefüllt ist, besser finde.

Im übrigen bin ich auch auf die Serverseitige Prüfung gespannt, könnte eventuell sogar für mein eigenes Projekt interessant sein. Mal sehen.

j-l-n · 28. Juli 2014

nikels schrieb:
Bekomme aber einen Fehler.... kann man radio nicht mit value auslesen ?

Jetzt mal ganz im Ernst: Liest du eigentlich, was man dir antwortet??

dbarthel · 28. Juli 2014

nikels schrieb:
Bekomme aber einen Fehler.... kann man radio nicht mit value auslesen ?

Ja

Code:

document.check.Flughafen

ist ja auch Schwachsinn. Es gibt weder das Element check in deinem Formular, noch werden radioboxen mit check geprüft.
Du musst mit checked prüfen, welche Radio aktiv ist.

nikels · 28. Juli 2014

check is vorhanden is name von form ( kannst du nicht wissen )
Mit checked als abfrage habe ich schon gearbeitet.

Code:

		if(document.forms[0].Flughafen[0].checked!=true && document.forms[0].Flughafen[1].checked!=true && document.forms[0].Flughafen[2].checked!=true)
			ErrorCounter+="W\u00e4len Sie den Flughafen aus ";

Aber dachte man kann einfach den value "rausholen" wie bei select.
Muss ich dann alle 3 fälle überprüfen oder geht es villeicht mit einer schleife einfacher ?

dbarthel · 28. Juli 2014

Würde eine for-Schleife nehmen.
Und ja, mann kann den value rausholen, aber dazu musst du auch erst mit checked prüfen, welche Radio aktiv ist und von der kannst du dann den valu auskesen.

Aber beachte erstmal, alles andere, was dir hier gesagt wurde.

j-l-n · 28. Juli 2014

Und wieder dasselbe... Einfach ignoriert, auch den Hinweis ganz am Anfang...

nikels · 28. Juli 2014

Code:

	function makeChange(){
	if(document.check.Flughafen[0].checked==true){
	Preis=document.check.Flughafen[0].value;}
	
	if(document.check.Flughafen[1].checked==true){
	Preis=document.check.Flughafen[1].value;}
	
	if(document.check.Flughafen[2].checked==true){
	Preis=document.check.Flughafen[2].value;}
	
	
	document.getElementById("Preis").innerHTML=" PREIS: "+Preis+ "   Euro "
	}

War ein "dummer" Fehler.....
Jetzt klappt es auch. UTF-8 hab ich jetzt auch geändert passt somit auch mit Umlauten.

kkapsner · 31. Juli 2014

HTML 5 hat schöne Attribute (bei dir required und pattern) für Formularvalidierung. Ich würde das damit machen. Dann wird das Formular auch überprüft, wenn JS deaktiviert ist. Und für die Browser, die das noch nicht können, gibt es Polyfills.
Macht auch schönere Fehlermeldungen als ein alert().

PS: In deiner legit()-Funktion ist die Variable ErrorCounter unnötiger Weise eine globale Variable...

[GELÖST] Verständnisfrage zu JS

nikels

New member

dbarthel

Lounge-Member

nikels

New member

j-l-n

Guest

nikels

New member

j-l-n

Guest

nikels

New member

dbarthel

Lounge-Member

j-l-n

Guest

dbarthel

Lounge-Member

nikels

New member

dbarthel

Lounge-Member

j-l-n

Guest

nikels

New member

kkapsner

Super Moderator