Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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:

    1. Checks drop down selections of 3 questions (will eventually be radio buttons)
    2. Brings together the 3 answers to find a suitable recommended product
    3. 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:

    1. You will see I have created another <div> and set the script to deliver the recommended result to this also .....
    2. 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!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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"/>
    <br />
    <img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" />
    <br />
    </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="";
     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"
      }
     }
     document.getElementById('img').src=picks.replace(/\s/g,'')+'gif';
     alert(document.getElementById('img').src);
     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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    if_only (01-29-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Deleted post as I read last wrong! Soz .....
    Last edited by if_only; 01-28-2013 at 06:26 PM. Reason: Spoke too soon .... my apologies!

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    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"/>
    <br />
    <img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" />
    <br />
    </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="";
     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"
      }
     }
     document.getElementById('img').src=picks.replace(/\s/g,'')+'gif';
     alert(document.getElementById('img').src);
     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>

    Ok....... Sorry mate - I was looking at the code on my phone on the way home and didn't really take it in properly. I can see that there is now Javascript to add an image
    Code:
    document.getElementById('img').src=picks.replace(/\s/g,'')+'gif';
     alert(document.getElementById('img').src);
    I think I am just being dumb .... if you have the time - could you just explain quickly how I should be attaching the images? I saved a Tomato Soup.gif into my root folder but in the alert - I just keep getting a link to the root folder of the page?

    Thanks again and apologies for the hastiness of my last post

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Solved .....

    Thank you again! I have now got it to work! Sorry for the confusion ... I was on a bus reading the code and had missed the part you added!

    You have really helped me out - thank you very much.



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •