You have a number of errors. I would suggest using the error console if you use the FF or Chrome browser.
There are several archaic statements. See comments in following.
There is no need to have 5 separate <form> tags. In fact, one of them has a duplicated name with the elements it contains. Guaranteed to lead to future errors.
I would suggest looking at each line I changed in your code and find out why it is suggested.
Code:
<html>
<head>
<title>Mateo's Pizza</title>
</head>
<body>
<h1>Choose Your Pizza!</h1>
<form action="" method="post" onsubmit="return false">
<script type="text/javascript"> <!-- archaic version: language="javascript" -->
<!--hide ARCHAIC: -->
// From: http://www.codingforums.com/showthread.php?t=281115
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above
return str;
}
function Process(form) {
var Size = getRBtnName('size');
var Crust = getRBtnName('crust')
var Topping = getRBtnName('topping')
var result = "You have ordered a " + Size + " pizza with " + Crust +" crust and " + Topping + "."
area.value = result
return result
}
var Selection = "none"
<!-- // ARCHAIC: -->
</script>
<div>
<input type='radio' name='size' value="Personal" />Personal <br />
<input type='radio' name='size' value="Small" />Small <br />
<input type='radio' name='size' value="Medium" />Medium <br />
<input type='radio' name='size' value="Large" />Large <br />
<input type='radio' name='size' value="X-Large" />X-Large <br />
<input type='radio' name='size' value="OMG!" />OMG! <br />
<hr />
</div>
<div>
<input type='radio' name="crust" value="Thin" >Thin</input> <br />
<input type='radio' name="crust" value="Thick"> Thick</input> <br />
<input type='radio' name="crust" value="Sicilian" >Sicilian</input> <br />
<hr />
</div>
<div>
<input type='radio' name="topping" value="Pepperoni" >Pepperoni</input> <br />
<input type='radio' name="topping" value="Sausage" >Sausage</input> <br />
<input type='radio' name="topping" value="Mushrooms" >Mushrooms</input> <br />
<input type='radio' name="topping" value="Black Olives" >Black Olives</input> <br />
<input type='radio' name="topping" value="Pineapple" >Pineapple</input> <br />
<input type='radio' name="topping" value="Extra Cheese" >Extra Cheese</input> <br />
<input type='radio' name="topping" value="Hella Cheese" ">Hella Cheese</input> <br />
<input type='radio' name="topping" value="and Is this even a pizza anymore?" />Is this even a pizza anymore? (Cheese)
</div>
<br />
<hr />
<div> <p>
<input TYPE="button" VALUE="Submit" onClick="alert('You chose '+sizeSelection +Crust_Selection +toppingSelection)" />
</p><p> <br /></p>
<input TYPE="button" VALUE="Process your order!" onClick="Process(this.form)" />
</p><p><textarea id="area" cols="100" rows="10"></textarea>
</div>
</center>
</form>
</body>
</html>
Another suggestion would be to add some error checks in case the user forgets to enter a particular selection in each group.
Also, if you don't use the id value set elsewhere, then there is no need to set it to begin with.
For example, why have the id of <textarea> set to 'area' when it is never used elsewhere?