Add a page toggle() function to my javascript product selector

This site is best viewed in a modern browser with JavaScript enabled.

Add a page toggle() function to my javascript product selector

if_only

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 />
 &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>

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!

JMRKER

I'm a bit confused by your request.

Script #1 displays nothing? Why would you want it "to behave exactly as it does now!"
I don't understand the rest of your request. Script #2 does have the toggle feature. What is wrong with it's execution and display?

Cannot tell if your images are displaying correctly as you did not include the URL to get to them.

JMRKER

Seems as you have your answer here.
See: http://www.codingforums.com/showthread.php?t=287013

Sort of wasted my time analyzing your problem.
Mark thread resolved if you are happy.

yiaggi

Hi mate,

Thanks very much for responding - I am a million miles away from having the answer - even though you are right - I did post in a few places to try and find the solution. This is mainly because no one seemed to be answering and I was / am really up against it time wise! I realise it's not technically cool to do so but when needs must and all that!

If you are willing to help then that would be great and I will certainly concentrate my efforts here in the future!

Ok .... Let me try to explain myself a bit better ......

I have a main script I am working on - lets call that "Script #1".

Script #1

This script works by offering the user 3 questions on 1 page. The first 2 have 4 possible answers and the last 2 possible answers.

The Javascript takes the values attached to the given answers and then looks down the variable list until it finds a product which matches the 3 answer values.

This product name is then displayed in a field in a web form at the bottom of the page.

Further more - each product has a unique image which replaces a blank image in a different innerHTML <div> higher up the page.

The user will ultimately get an image representation of their result and the code in the form ready to email ......

When I say "This works" .... I mean - up to this point it works how I need it to. If I wanted all of the questions on 1 page - delivering the answers below - I would be set!

I need:

Only Question 1 to be visible when the user starts the process
Question 2 to REPLACE question 1 when it has been answered
So on ..... until question 3 is answered - at which point there will be the same form and innerHTML <div> to display my answers as is now.

The second script does have the toggle() function I require - it also uses radio buttons etc. The problem with this script is that, whatever I try, I can't seem to add the function which sorts through the variables and produce the product. All I can do is get it to display the value of the button selected.

The script does work but the layout etc will probably be throwing you! If you run the first one again and choose "Sour - Cold - Good" and then scroll down - you will see that it says "Your search criteria:
Food Suggestion 1 (product code in here)". I have only set a few options up for testing! In the space in between the selections and the form - is where the image displays. This only works when the site is hosted and throws up errors for me testing locally. . . . .

Does that help?

Thanks again in advance!

JMRKER

This will need some further tweeking because I cannot see any of the images you are trying to display.
Would need URL and filenames for further testing.

You had a bunch of syntax errors. Next time start with your error console viewing for the gross errors.
Also, not all your CSS classes are defined in your code.

I believe the following is a start toward what you are trying to accomplish, but it will require more testing.

<html>
<head>
<style>
.image_box {
	width: 300px;    /* 567px; /* temporarily smaller */
	height: 300px;   /* 558px; /* temporarily smaller */
	background-image: url(food_holder.jpg);
	background-repeat: no-repeat;
	padding-top: 63px;
	padding-left: 20px;
}
.pages { display:none; }
</style>
</head>

<body>
 <form action="" method="post" name="myForm" onsubmit="return validation()">
<!--  test version above 
 <form name="myform" id="ContactForm" method="post" action="FormToEmail_startup.php"  class="input2" onsubmit="return validation()>
-->

<div id="mainPage">

 <div id="page0" class="pages" style="display:block">
  How would you like your food to taste?  <p />
  <img src="food1.jpg" width="524" height="181" border="0"><p />
  <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?<p />
  <img src="food2.jpg" width="524" height="181" border="0"><p />
  <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?:<p />
  <img src="food3.jpg" width="524" height="181" border="0"><p />
  <input type="radio" name="rbtn2" value="Good" onclick="gotoPage('Answers')"> Good
  <input type="radio" name="rbtn2" value="Bad" onclick="gotoPage('Answers')"> Bad
 </div>

 <div id="Answers" class="pages"> <p /><br />
  <div id="image_box" class="image_box"> <img id="img" src="cover.gif" alt="img" /> </div> <p /><br />
  <label>Name: <input name="first" type="text" id="first" value="" maxlength="80" class="input"/></label> <p />
  <label>Company: <input name="email" type="text" id="email" value="" maxlength="80" class="input"/></label> <p />
  <label>Email: <input name="email" type="text" id="email" value="" maxlength="80" class="input"/></label> <p />
  <label> Telephone: <input name="phone" type="text" id="phone" value="" maxlength="80" class="input"/> </label>
  <p />Items Selected: 
  <br> <textarea id="items_selected" rows="9" cols="80" /></textarea>
  <br /><input type="submit" class="submit" id="submit" value="submit" />
 </div>

</div>
</form>

<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';
  if (IDS == 'Answers') { answerResults(); }
}

var foods=[                                  //  taste (0..3), temp (0..3), health (0..1)
   ["Food Suggestion 1 (product code in here)", "SourColdGood"],       // 000
   ["Food Suggestion 2 (product code in here)", "BlandWarmGood"],      // 110
   ["Food Suggestion 3 (product code in here)", "MediumSteamingGood"], // 220
   ["Food Suggestion 4 (product code in here)", "HotBurningGood"],     // 330
   ["Food Suggestion 5 (product code in here)", "SourColdBad"],        // 001
   ["Food Suggestion 6 (product code in here)", "BlandWarmBad"],       // 111
   ["Food Suggestion 7 (product code in here)", "MediumSteamingBad"],  // 221
   ["Food Suggestion 8 (product code in here)", "HotBurningBad"],      // 331
];

function answerResults() {
  var picks=''+getRBtnName('rbtn0')+''+getRBtnName('rbtn1')+''+getRBtnName('rbtn2');
  var fnd = -1;  var msg = '';
  for (var k = 0; k<foods.length; k++) { if (picks == foods[k][1]) { fnd = k; } }
  if (fnd == -1) {
    msg = "No foods meet your criteria"; 
  } else {
//    document.getElementById('img').src=picks+'gif';  // or use array to point to image list
//    alert('img.src = '+picks+'.gif');  // for testing purposes
    msg = 'Your search criteria: '+picks+'.gif'+'\n\n'+foods[fnd][0];
  }
  document.getElementById("items_selected").value=msg;  // alert('picks: '+picks+'\nmsg: '+msg);
}

function validation() { return false; }   // change after testing
</script>
</body>
</html>

Good Luck!

if_only

Thanks ever so much mate! Your code has majorly helped me to resolve the issue I was having - I have spent some time today tweaking - adding images and moving bits about and I am happy to say I am there now!

You are a star!

PS ... not sure how to say this is "resolved" ..... I assume there is a button I am missing somewhere?!

JMRKER

if_only;1248775 wrote:
Thanks ever so much mate! Your code has majorly helped me to resolve the issue I was having - I have spent some time today tweaking - adding images and moving bits about and I am happy to say I am there now!

You are a star!

PS ... not sure how to say this is "resolved" ..... I assume there is a button I am missing somewhere?!

You're most welcome.
Happy to help.
Good Luck!

Note: To 'resolve', look at "Thread Tools" near the top of this thread. It is one of the pull-down actions.