Untitled


<!DOCTYPE html >
<html>
<head>
<title>Javascript</title>
<script>
	function berekenprijs()
	{
		var aantal = parseInt(document.getElementById("aantalpizzas").value);
		// Controleer of input numeriek is
		// isNaN info op http://www.w3schools.com/jsref/jsref_isnan.asp

		if(isNaN(aantal) || aantal == "")
		{
			document.getElementById("aantalpizzas").style.borderColor = "red";
			document.getElementById("aantalpizzas").style.borderWidth = "1px";
			document.getElementById("aantalpizzas").style.borderStyle = "solid";
			document.getElementById("aantalpizzas").value = "Vul een aantal in";
			//return(false);
		}
		else
		{
			document.getElementById("aantalpizzas").style.borderColor = "green";
			document.getElementById("aantalpizzas").style.borderWidth = "1px";
			document.getElementById("aantalpizzas").style.borderStyle = "solid";
		}
		var groot = document.getElementById("groot").checked;
		var klein = document.getElementById("klein").checked;
		var olijven = document.getElementById("olijven").checked;
		var ananas = document.getElementById("ananas").checked;
		var salami = document.getElementById("salami").checked;
		var extrakaas = document.getElementById("extrakaas").checked;

		var prijs = 0;

		if(groot == true){
			prijs = 8;
		}
		if(klein == true){
			prijs = 6;
		}
		if(olijven == true){
			prijs = prijs + 2;
		}
		if(ananas == true){
			prijs = prijs + 2.5;
		}
		if(salami == true){
			prijs = prijs + 2;
		}
		if(extrakaas == true){
			prijs = prijs + 2.8;
		}
		var totaal = aantal * prijs;
		document.getElementById("prijs").innerHTML = totaal;
	}
</script>
</head>
<body>
<h1>Welcome to Pizza Parlor!</h1>
	<form action="" method="post">
	<label for="aantalpizzas">aantal: </label>
	<input onkeyup="berekenprijs();" type="text" id="aantalpizzas" name="aantalpizzas">
	<br>
	<input onclick="berekenprijs();" type="radio" value="groot" id="groot" name="grootte" checked="checked">
	<label for="groot">groot(&euro;8)</label>
	<br>
	<input onclick="berekenprijs();" type="radio" value="klein" id="klein" name="grootte">
	<label for="klein">klein(&euro;6)</label>
	<br>
	<input onclick="berekenprijs();" type="checkbox" name="olijven" value="olijven" id="olijven">
	<label for="olijven">olijven (+&euro;2)</label>
	<br>
	<input onclick="berekenprijs();" type="checkbox" name="ananas" value="ananas" id="ananas">
	<label for="ananas">ananas (+&euro;2.5)</label>
	<br>
	<input onclick="berekenprijs();" type="checkbox" name="salami" value="salami" id="salami">
	<label for="salami">salami (+&euro;2)</label>
	<br>
	<input onclick="berekenprijs();" type="checkbox" name="extrakaas" value="extrakaas" id="extrakaas">
	<label for="extrakaas">extra kaas (+&euro;2.8)</label>
	<br>
    <h1 id="totaal">totaalprijs: <span id="prijs">0</span> euro</h1>
	<!--<input onclick="berekenprijs();" type="button" value="bereken kostprijs">-->
	<input type="submit" value="send to php" />
</form>
</body>
</html>