Hi guys,
I was hoping that someone could help me as I am very confused! I am still a beginner at Javascript and am desperately trying to learn!
I have written a quick form (with help!) which has 3 questions at the top - in 3 separate drop down menus. Once the 3 selections have been picked and submit is pressed - a javascript function checks the answers against a product list and then offers an image of a recommended product - as well as delivering the code for this product to a field in a web form so I can see what the user is seeing. THIS ALL HAPPENS ON ONE PAGE.
(Firstly - I realise this looks like a silly project! My website is not about 'foods' - I have swapped out the original values with foods! Also .... there will be a great many more items for the system to choose from - I just did 8 for this example.)
This is the code (not styled ...): [Script 1]
<html>
<head>
<style>
.image_box
{
width: 567px;
height: 558px;
background-image: url(food_holder.jpg);
background-repeat: no-repeat;
padding-top: 63px;
padding-left: 20px;
}
</style>
</head>
<body>
<form>
<select id="taste">
<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>
<select id="temp">
<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>
<select id="health">
<option value=0> Healthy or not?</option>
<option value="good"> good</option>
<option value="bad"> bad</option>
</select>
<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 name="myform" 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;
}
</script>
</body>
</html>
This all works exactly as I need but I am not finished and need to add the next function .....
In my original form - I had a page toggle() function which gave me the functionality I require. The function used radio buttons instead of drop down menus and had 4 hidden <div>'s.
Question 1 was in <div> 1 and onClick the page toggled to hide the original <div> and reveal Question 2 in <div> 2 and so on for the 3 questions. When all 3 had been answered - the answer was delivered in the final <div>.
The problem with this code was that it ONLY DISPLAYED THE VALUE OF THE RADIO BUTTON SELECTED AT THE END. This solution did not take the 3 values - join them together and offer my image of the product (food) like the first code above.
This is the code: [Script 2]
<style type="text/css">
.pages { display:none; }
</style>
</head>
<body>
<div id="mainPage">
<div id="page0">
How would you like your food to taste? <br /><br />
<img src="food1.jpg" width="524" height="181" border="0"><br><br />
<input type="radio" name="rbtn0" value="Sour" onclick="gotoPage('page1')"> Sour
<input type="radio" name="rbtn0" value="Bland" onclick="gotoPage('page1')">Bland
<input type="radio" name="rbtn0" value="Medium" onclick="gotoPage('page1')"> Medium
<input type="radio" name="rbtn0" value="Hot" onclick="gotoPage('page1')"> Hot
</div>
<div id="page1" class="pages">
How hot would you like it?<br /><br />
<img src="food2.jpg" width="524" height="181" border="0">
<br /><br />
<input type="radio" name="rbtn1" value="Cold" onclick="gotoPage('page2')"> Cold
<input type="radio" name="rbtn1" value="Warm" onclick="gotoPage('page2')"> Warm
<input type="radio" name="rbtn1" value="Steaming" onclick="gotoPage('page2')"> Steaming
<input type="radio" name="rbtn1" value="Burning" onclick="gotoPage('page2')"> Burning
</div>
<div id="page2" class="pages">
Healthy or not?:<br /><br />
<img src="food3.jpg" width="524" height="181" border="0"><br /><br />
<input type="radio" name="rbtn2" value="Good" onclick="gotoAnswer('Answers')"> Good
<input type="radio" name="rbtn2" value="Bad" onclick="gotoAnswer('Answers')"> Bad
</div>
<div id="Answers" class="pages"></div>
<script type="text/javascript">
function toggle(IDS) {
var e = document.getElementById(IDS).style.display;
if ((e == 'block') || (e == '')) { e = 'none'; }
else { e = 'block'; }
}
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 gotoPage(IDS) {
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';
}
function gotoAnswer(IDS) {
var str = 'Your choices:<br>'
+ getRBtnName('rbtn0') + '<br>' + getRBtnName('rbtn1') + '<br>'
+ getRBtnName('rbtn2') + '<br>' + getRBtnName('rbtn3');
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';
document.getElementById('Answers').innerHTML = str;
}
</script>
The only thing the 2nd script did well was the toggle(). !
To clarify - I need:
Script 1 to behave exactly as it does now!
Instead of 3 questions at the top - I need the questions to toggle() one after the other (a new question appears after last is answered) and deliver the answer in the end <div> like script 2!
I hear you ask "If you have got this far - why do you not just do it yourself?!" ..... I have tried - for days!
I figured the first step would be to change the drop downs from script 1 to radio buttons. I gave each button an ID etc but when I ran the script it gave me crazy search results and often did not work at all! My next step was going to be to separate the questions into the hidden <div> as in Script 2.
I feel like I'm pretty close to getting what I need - If I can just get the toggle() working on script 1- I am finally there after weeks of slamming my head off a wall!
Is there any kindly expert who could explain how I can make the changes to script 1 to add the toggle() feature? You have no idea how much you will be helping me out!
Thanks in advance!