| if_only |
01-28-2013 02:51 PM |
add images to a javascript product selector ...
Howdy y'all!
I have been working on a "product selector" app for a while now, whilst trying to learn Javascript at the same time. I'm hopefully at the end once I can solve this one little issue. . . . .
The basic script is set out below - It very simply:
- Checks drop down selections of 3 questions (will eventually be radio buttons)
- Brings together the 3 answers to find a suitable recommended product
- Delivers the recommended product to a form field in an email form so the user can see it - and I can get a copy.
My understanding reaches to how this code works but I struggle to successfully add any new functionality at the moment.
What I want to do is:
- You will see I have created another <div> and set the script to deliver the recommended result to this also .....
- Instead of the recommended product going into this new <div> - I would like to add an image which CORRESPONDS to the recommended product. In this example there are 4 possible results - each of these results must have a separate image which will be called when the system lands on its specific product
This will eventually give the effect of firstly using search terms to narrow down what they will need and then being offered the correct product recommendation and an image of the product. I'm sure if I battle long enough I would be able to get it to deliver an image and the recommended product in the same box but that is not what I need!
I have changed my code options to "foods" so it is really easy to understand how the images would relate to the search.
Are there any geniuses out there that could talk me through? Cheers in advance!
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
.image_box
{
width: 700px;
height: 300px;
background-color: #DDF;
}
</style>
</head>
<body>
<form>
<select id="taste">
<option value=0> What taste would you like? </option>
<option value="sour"> sour</option>
<option value="bland"> bland</option>
<option value="flavoured"> flavoured</option>
<option value="sweet"> sweet</option>
</select>
<select id="heat">
<option value=0> Would you like hot, medium or cold food?</option>
<option value="hot"> hot</option>
<option value="medium"> medium</option>
<option value="cold"> cold</option>
</select>
<select id="health">
<option value=0> Would you like food which is good or bad for you?</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="float_res" class="image_box"></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={
"Tomato Soup":{taste:"bland", heat:"hot", health:"good"},
"Milk Chocolate":{taste:"sweet", heat:"cold", health:"bad"},
"Lemon":{taste:"sour", heat:"cold", health:"good"},
"Crisps":{taste:"flavoured", heat:"cold", health:"bad"},
}
var picks="Your search criteria:\n";
var ta=document.getElementById("taste").value;
var ty=document.getElementById("heat").value;
var h=document.getElementById("health").value;
for (k in foods){
var f=foods[k];
if((ta==f.taste||ta==0)&&(ty==f.heat||ty==0)&&(h==f.health||h==0)) {
picks+=k+"\n"}
}
var str=picks=="Your search criteria:<br>"?"No foods meet your criteria":picks;
document.getElementById("res").innerHTML=str;
document.getElementById("float_res").innerHTML=str;
}
</script>
</body>
</html>
There will be a list of about 30 products when all is complete - each with a separate image attached.
Any help would be truly appreciated! :thumbsup: |
