✔ Summe prüfen

H

HulioJules

Grünschnabel
Hallo zusammen,
ich möchte für einen Online-Fragebogen die Möglichkeit einer prozentualen Gewichtung verschiedener Items integrieren. Die Funktion soll also schauen, ob die einzelnen Items 1. überhaupt ausgefüllt wurden und 2. keine Eingabe über 100 gemacht wurde.
Soweit so gut, das hat noch funktioniert, ich habe ein Code geschrieben, der mir die Editboxen OnKeyUp prüft (auf 'isNaN' und '>100') und dann summiert.

Jetzt sollte aber auch die Summe noch gechecked werden, bevor der Fragebogen abgesendet wird.
Dazu würde ich gerne beim Klicken auf den "Absenden"-Button die Summe prüfen (ob sie >100 oder unter <0 ist), aber er macht es leider nicht.
Irgendwo hab ich da nen Denkfehler drin, bin (wie so viele hier) natürlich relativer Neuling auf dem Gebiet, aber möchte unbedingt am Ball bleiben, und hab mich bereits totprobiert und -gesucht.
Über Hilfe würde ich mich sehr freuen, vielen Dank schonmal vorab.

Code: 
<html>
<head>
<title>Berechnung Restprozente</title>

<script language="javascript">

function calculate ()
{
  var wert1 = document.getElementById('feld1').value;
  var wert2 = document.getElementById('feld2').value;
  var wert3 = document.getElementById('feld3').value;
  var wert4 = document.getElementById('feld4').value;
    var summe = 100- wert1- wert2- wert3- wert4;
 
	document.getElementById('sum').innerHTML = summe;
	

}

function formValid(myForm)
			{
				
				if(myForm.feld1.value == "" || isNaN(myForm.feld1.value) || myForm.feld1.value == 0 )
					{
					alert("Bitte gewichten Sie die noch fehlenden Merkmale!");
					myForm.feld1.style.backgroundColor = "orange";
					return false;	
					}
			
				if(myForm.feld1.value >100  )
					{
					alert("Sie können nur 100% vergeben");
					myForm.feld1.style.backgroundColor = "orange";
					return false;	
					}

/* hier kommen noch 'feld2' bis 'feld4' rein */			
			
				if(myForm.sum.value <0  )
					{
					alert("Sie haben mehr als 100 % vergeben");
					myForm.sum.style.backgroundColor = "orange";
					return false;	
					}
				
				if(myForm.sum.value >0  )
					{
					alert("Bitte vergeben sie die übrigen %-Punkte");
					myForm.sum.style.backgroundColor = "orange";
					return false;	
					}
								
				 return true;  
			
			}
			

</script>

</head>

<body>
 
 <form action="mailversenden.php" method="get" onsubmit="return formValid(this)">
 
	<input type='text' id='feld1' onKeyUp='calculate()'/> <span id='wert1'></span>  <br />
	<input type='text' id='feld2' onKeyUp='calculate()'/> <span id='wert2'></span>  <br />
	<input type='text' id='feld3' onKeyUp='calculate()'/> <span id='wert3'></span>  <br />
	<input type='text' id='feld4' onKeyUp='calculate()'/> <span id='wert4'></span>  <br />
	restliche Prozente = <span id='sum'></span> 
<br />
	<input type="submit" value="ABSENDEN" />
	</form>

</body>
</html>
 
Hi und Willkommen bei tutorials.de :)

Mit onclick kannst du eine JS-Funktion reinpacken.
Beim submit-Button hast du aber (meines Wissens) keine Möglichkeit, das Ganze ggf. mit JS aufzuhalten.

Mach einen normalen Button, der das prüft und dann per JS die Seite wechselt.

Für den Fall, dass jemand JS aus hat:
Den Button zuerst submit-mäßig drinhaben und dann per onload mit JS umändern.

Auf jeden Fall müssen die daten in PHP (etc.) noch einmal geprüft werden.

Gruß
 
Hi,

deine Vorgehensweise ist bereits korrekt. Über boolesche Rückgabewerte im onsubmit-Event kannst du steuern, ob das Formular abgesendet wird oder nicht.

Allerdings existiert kein Formularwert mit dem Name sum, sondern nur ein span-Tag mit einer entsprechenden ID. Dieses musst du mit der Methode getElementById referenzieren und z.B. über die Eigenschaft innerHTML den Inhalt ermitteln. Weiterhin muss der Inhalt in eine Zahl umgewandelt werden.

Beispiel:
Code: 
if(Number(document.getElementById('sum').innerHTML) < 0){
	alert("Sie haben mehr als 100 % vergeben");
	document.getElementById('sum').style.backgroundColor = "orange";
	return false;
}
Neben der Prüfung auf kleiner Null solltest du zusätzlich überprüfen, ob es sich überhaupt um eine Zahl handelt (isNaN).

Zudem sollte, wie bereits von @sheel erwähnt, serverseitig ebenfalls eine Prüfung erfolgen, bevor die Daten weiterverarbeitet werden.

Ciao
Quaese
 
Wow, vielen Dank Euch beiden, für die schnellen und keine Fragen übrig lassenden Antworten!
Ich dachte doch, es muss irgendwas damit zu tun haben, dass er sich das 'sum' nicht richtig krallt, aber bin nicht mehr durchgestiegen :)

Jetzt läuft es jedenfalls so, wie gedacht.

Danköö ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück