Add a page toggle() function to my javascript product selector
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]
Code:
<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]
Code:
<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!
Firstly .... Thank you very much for taking the time out of your day to reply - I was starting to think I was not going to get any at all! Unfortunately there are a few reasons why this is not the solution for me .....
The first and main reason is: The app has now lost all of it's functionality! In my original code this ........
Code:
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;
}
...... took the variables selected in the drop down and found the correct food type based on the 3 answers. (So something like Hot, Bland, Good would produce "Tomato Soup" as an answer).
Secondly .... Part of my problem is changing the drop down menus to radio buttons instead ....
Lastly .... I need the 1st question to disappear leaving the next and so on!
Thanks again for your help mate - you are literally the only one kind enough to stick their neck out so I very much appreciate it!
It seems to me to be an easy thing to find the correct food type based on the 3 answers. Take what you have that does that now and put it in the gotoAnswer(IDS) function or call it from that function.
Quote:
I need the 1st question to disappear leaving the next and so on!
Also easy to implement. Add it to the part that make the next dropdown appear.
Lastly .... I need the 1st question to disappear leaving the next and so on!
Is that really a good idea? It doesn't give the user a chance to change his/her mind and/or rectify an accidental erroneous choice.
Traditionally, in nested <select> systems like this, you leave all <select>s active. And you even allow the user to go back and change the first <select> after he/she has changed the second one!
So the user might have chosen "sour" then "cold" and even at that point wants to go back and change "sour" to "sweet", say. In which case the "cold" gets removed and he/she must choose from the second <select> again.
You obviously don't have to allow this, but watch out for frustrated users if you don't.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Will the answer for "closest match" (to the 3 answers) be coming from a DB query? That is, using AJAX or similar? Or will you hard code the matches in the JavaScript?
If you are going to hard cold the matches, I'd be tempted to do it thus:
Before you post, read our: 
