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]
<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>
Code (markup):
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 />
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <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>
Code (markup):
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!

Log in or Sign up

Advertising (learn more)

Add A Page Toggle() Function To My Javascript Product Selector

if_only Peon

shofstetter Well-Known Member

Log in or Sign up

Advertising (learn more)

Add A Page Toggle() Function To My Javascript Product Selector

if_only Peon

shofstetter Well-Known Member

Useful Searches