Just did a cut/paste from Script 2 to Script 1. So there is some unneeded things in Script 1:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
.image_box
{
width: 567px;
height: 558px;
background-image: url(food_holder.jpg);
background-repeat: no-repeat;
padding-top: 63px;
padding-left: 20px;
}
.pages { display:none; }
</style>
</head>
<body>
<form action="">
<div id="page0">
<select id="taste" onchange="gotoPage('page1')">
<option value="0"> How would you like your food to taste? </option>
<option value="sour"> sour</option>
<option value="bland"> bland</option>
<option value="medium"> medium</option>
<option value="hot"> hot</option>
</select>
</div>
<div id="page1" class="pages">
<select id="temp" onchange="gotoPage('page2')">
<option value="0"> How hot would you like it?</option>
<option value="cold"> cold</option>
<option value="warm"> warm</option>
<option value="steaming"> steaming</option>
<option value="burning"> burning</option>
</select>
</div>
<div id="page2" class="pages">
<select id="health" onchange="gotoAnswer('Answers')">
<option value="0"> Healthy or not?</option>
<option value="good"> good</option>
<option value="bad"> bad</option>
</select>
</div>
<div id="Answers" class="pages"></div>
<!--<input type="button" id="thebutt" value="show selections"/>-->
</form>
<br /><br /><br />
<div id="image_box" class="image_box">
<img id="img" src="cover.gif" alt="img" />
</div>
<br /><br /><br />
<form id="ContactForm" method="post" action="FormToEmail_startup.php" class="input2">
<label>Name: <input name="first" type="text" id="first" value="" size="" maxlength="80" class="input"/></label>
<br /><br />
<label>Company: <input name="email" type="text" id="email" value="" size="" maxlength="80" class="input"/></label>
<br /><br />
<label>Email: <input name="email" type="text" id="email" value="" size="" maxlength="80" class="input"/></label>
<br /><br />
<label>
Telephone: <input name="phone" type="text" id="phone" value="" size="" maxlength="80" class="input"/>
</label>
<br />
<br />Items Selected: <br />
<textarea name="ITEMS_SELECTED" id="res" rows="9" cols="80" class="input" readonly></textarea>
<br /><input type="submit" class="submit" name="submit" id="submit" value="submit"/>
</form>
<br /><br />
<script type="text/javascript">
document.getElementById("thebutt").onclick=function (){
var foods={
"Food Suggestion 1 (product code in here)":{taste:"sour", temp:"cold", health:"good"},
"Food Suggestion 2 (product code in here)":{taste:"bland", temp:"warm", health:"good"},
"Food Suggestion 3 (product code in here)":{taste:"medium", temp:"hot", health:"good"},
"Food Suggestion 4 (product code in here)":{taste:"hot", temp:"burning", health:"good"},
"Food Suggestion 5 (product code in here)":{taste:"sour", temp:"cold", health:"bad"},
"Food Suggestion 6 (product code in here)":{taste:"bland", temp:"warm", health:"bad"},
"Food Suggestion 7 (product code in here)":{taste:"medium", temp:"hot", health:"bad"},
"Food Suggestion 8 (product code in here)":{taste:"hot", temp:"burning", health:"bad"},
}
var picks="";
var ta=document.getElementById("taste").value;
var ty=document.getElementById("temp").value;
var h=document.getElementById("health").value;
for (k in foods){
var f=foods[k];
if((ta==f.taste||ta==0)&&(ty==f.temp||ty==0)&&(h==f.health||h==0)) {
picks+=k+"\n"
}
}
document.getElementById('img').src=picks.replace(/\s/g,'')+'gif';
var str=picks==""?"No foods meet your criteria":'Your search criteria:\n'+picks;
document.getElementById("res").innerHTML=str;
document.getElementById("float_res").innerHTML=str;
}
function gotoPage(IDS) {
/* var sel = document.getElementsByTagName(IDS);
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }*/
document.getElementById(IDS).style.display = 'block';
}
function gotoAnswer(IDS) {
/* var str = 'Your choices:<br>'
+ getRBtnName('rbtn0') + '<br>' + getRBtnName('rbtn1') + '<br>'
+ getRBtnName('rbtn2') + '<br>' + getRBtnName('rbtn3');alert(str);*/
/* var sel = document.getElementById('mainPage').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }*/
document.getElementById(IDS).style.display = 'block';
var str = 'Your choices:<br>'
+ document.getElementById("taste").value+"<br />"
+ document.getElementById("temp").value+"<br />"
+ document.getElementById("health").value;
document.getElementById(IDS).innerHTML = str;
}
</script>
</body>
</html>