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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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]


    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>
    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]

    Code:
    <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:

    1. Script 1 to behave exactly as it does now!
    2. 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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Just did a cut/paste from Script 2 to Script 1. So there is some unneeded things in Script 1:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    .image_box
    {
    	width: 567px;
    	height: 558px;
    	background-image: url(food_holder.jpg);
    	background-repeat: no-repeat;
    	padding-top: 63px;
    	padding-left: 20px;
    }
    .pages { display:none; }
    </style>
    </head>
    
    <body>
    
    <form action="">
    
    <div id="page0">
    <select id="taste" onchange="gotoPage('page1')">
    <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>
    </div>
    
    <div id="page1" class="pages">
    <select id="temp" onchange="gotoPage('page2')">
    <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>
    </div>
    
    <div id="page2" class="pages">
    <select id="health" onchange="gotoAnswer('Answers')">
    <option value="0"> Healthy or not?</option>
     <option value="good"> good</option>
     <option value="bad"> bad</option>
    </select>
    </div>
    <div id="Answers" class="pages"></div>
    <!--<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 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;
    }
    
    
    function gotoPage(IDS) {
    /*  var sel = document.getElementsByTagName(IDS);
      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');alert(str);*/
    
    /*  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';
    var str = 'Your choices:<br>'
      + document.getElementById("taste").value+"<br />"
      + document.getElementById("temp").value+"<br />"
      + document.getElementById("health").value;
      document.getElementById(IDS).innerHTML = str;
    
    }
    </script>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Firstly .... Thank you very much for taking the time out of your day to reply - I was starting to think I was not going to get any at all! Unfortunately there are a few reasons why this is not the solution for me .....


    The first and main reason is: The app has now lost all of it's functionality! In my original code this ........

    Code:
    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;
    }
    ...... took the variables selected in the drop down and found the correct food type based on the 3 answers. (So something like Hot, Bland, Good would produce "Tomato Soup" as an answer).

    Secondly .... Part of my problem is changing the drop down menus to radio buttons instead ....

    Lastly .... I need the 1st question to disappear leaving the next and so on!


    Thanks again for your help mate - you are literally the only one kind enough to stick their neck out so I very much appreciate it!

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    It seems to me to be an easy thing to find the correct food type based on the 3 answers. Take what you have that does that now and put it in the gotoAnswer(IDS) function or call it from that function.
    I need the 1st question to disappear leaving the next and so on!
    Also easy to implement. Add it to the part that make the next dropdown appear.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by if_only View Post
    Lastly .... I need the 1st question to disappear leaving the next and so on!
    Is that really a good idea? It doesn't give the user a chance to change his/her mind and/or rectify an accidental erroneous choice.

    Traditionally, in nested <select> systems like this, you leave all <select>s active. And you even allow the user to go back and change the first <select> after he/she has changed the second one!

    So the user might have chosen "sour" then "cold" and even at that point wants to go back and change "sour" to "sweet", say. In which case the "cold" gets removed and he/she must choose from the second <select> again.

    You obviously don't have to allow this, but watch out for frustrated users if you don't.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I'd be seriously tempted to reorganize this.

    Will the answer for "closest match" (to the 3 answers) be coming from a DB query? That is, using AJAX or similar? Or will you hard code the matches in the JavaScript?

    If you are going to hard cold the matches, I'd be tempted to do it thus:
    Code:
    var choices = {
        "sour" : { 
            "cold" : { 
                "good" : "diet limeade",
                "bad" : "sour lemon slushee"
                },
            "warm" : {
                "good" : "fresh sour cherries",
                "bad" : "sour lemon candies"
                }
            "hot" : {
                "good" : "hot and sour soup",
                "bad" : "chili relleno"
            },
            "burning" : {
                "good" : "fresh jalapeno pepper",
                "bad"   : "fresh jalapeno pepper" /*joke*/
           }
        "bland" : {
            "cold" : {
                "good" : ... etc ...
    You see that? Then to find the product you only have to do:
    Code:
        var product = choices[userTasteChoice][userTempChoice][userGoodBadChoice];
    But clearly that could get tedious for lots of choices, so I'd hope you are really going to do this via a DB and AJAX?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Just want to add that the way things are set up now (the code I gave you) You can't change your mind. That is, change one of the selections.
    Last edited by sunfighter; 02-05-2013 at 01:53 PM.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Note that OP seems happy with this solution.
    See: http://www.webdeveloper.com/forum/sh...r&daysprune=30


  •  

    Posting Permissions

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