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

Dev Shed Forums Sponsor:

February 4th, 2013, 01:37 PM

if_only

Registered User

Join Date: Feb 2013

Posts: 1

Time spent in forums: 6 m 17 sec
Reputation Power: 0

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

Hi guys,

I'm praying hard that someone on here can help me! I am trying desperately to get my website up and running but am stuck on this last thing! It has put my whole life on hold till I can sort it!

Basically - I built this tool which works like this:

User is presented with 3 questions with corresponding drop down menus which house the answers they can choose from.
Once the selections have been choosen - the user clicks "show selections" and then the Javascript takes over
The Javascript then checks the 3 answers against a variables list which basically outlays a "perfect recommendation" based on the selections. There is 1 perfect solution for any combination of answers from the drop downs (a+b+c=d)
The answer (a code) then delivers to a form field I have set up in a <div> below and also displays as an image in another <div> next to that.

This works great! If only this is all I needed ..... This is what I need the finished project to do:

Firstly - I need to make the drop down boxes into radio buttons. I know this should be easy but whenever I do it - they do not act as they should upon selection (pretty sure this is to do with the ID but do not know why!)
The user will enter this section of the site but will only be presented with Question 1 - upon selection of their answer - Question 1 hides and Question 2 is shown
This process continues for 3 questions until finally - the result is shown - presented in the same way I have it now.

I already have several scripts which use the toggle() function to show and hide questions. These all work OK but whenever I try to use any of the code in my app - everything goes wrong (or doesn't work at all!).

As you will see from code below - my app answers are calculated based on <option ID = "blah">content</option>. The radio buttons I have tried to implement do not have 'group ID' like this. Whenever I add single ID to each radio button - I get strange or no results when running.

I am so totally confused at how to finish this app it is not even funny! I am a beginner at Javascript and trying desperately to learn!

Here is the code for my app:

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>

Here is a great example of what I am trying to do .... This is a quiz which gives "true or false" results against the questions. This is ok if there is only 1 right answer. Mine is not a quiz - All answers are right and go towards the final combination.

http://www.fatihacet.com/lab/jQuiz/

If there is someone out there that has the time to help - I would be forever in your debt! I can't get going until I have my website up and running but fear I will be going around in circles until someone kindly steps in and helps!

February 4th, 2013, 04:26 PM

MichaelBluejay

Registered User

Join Date: Oct 2012

Posts: 9

Time spent in forums: 1 h 11 m 55 sec
Reputation Power: 0

You're posting way too much in one question

You're posting way too much in one question, both the explanation and the code. Nobody wants to wade through all that. Your questions should be abbreviated to something like:

(1) How do I get values from radio buttons in Javascript?
(2) How do I attach an action to a radio button?

And the answers to *those* questions are easily found with any search engine.

To get you started on the radio buttons, here's some sample HTML code. Note that each family has the same name. That's so the browser can tell each group apart.

Code:

<table><tr>
<td>
<input name=taste type=radio value=sour>Sour<br>
<input name=taste type=radio value=bland>Bland<br>
<input name=taste type=radio value=medium>Medium<br>
<input name=taste type=radio value=hot>Hot
</td>
<td>
<input name=temp type=radio value=cold>Cold<br>
<input name=temp type=radio value=warm>Warm<br>
<input name=temp type=radio value=steaming>Steaming<br>
<input name=temp type=radio value=burning>Burning
</td>
<td valign=top>
<input name=health type=radio value=good>Healthy<br>
<input name=health type=radio value=bad>Not Healthy
</td>
</tr></table>

Getting the value of a radio button is harder than getting it from a <select>, but again, the method for doing that is everywhere.

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

Developer Shed Advertisers and Affiliates