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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Simple Product Selector code

    Hi guys,

    I realise it is cheeky to post on here and ask for ideas (rather than having a go myself and then asking for coding solutions) but I am stuck and, having tried a few solutions already, need some help! Just to clarify thou - I'm not asking for the code to be written for me (unless anyone wants to have a go at a very simple example!) - just to point me towards a pre-existing solution which works and I can get on with editing it to work how I wish.

    What I need is for the user to be able to answer 4 questions (radio buttons) and then the system recommends a suitable product. I can already achieve this by having all 4 questions on 1 page - and then the answer at the bottom.... What I need to achieve is:

    1) User lands on a page with Question 1. This has 4 possible answers - for the sake of this we will say our question is "Choose your colour" and the answers "Red, Green, Blue, Orange". The answer will be selected using a radio button under an image of the colour and then pressing submit.

    2) Upon the submit - Question 2 appears (either in replacement to Question 1 or on a new page). Question 2 could be "Choose your size" with the answers being "2 feet", "4 feet", "6 feet". Again - radio buttons under an image.

    3) This will repeat for 4 questions until eventually delivering the result. The result will be an image and some text.

    So I guess - when all is said and done - I need to know how to make the questions "move on" after they are answered and be replaced by the next - whilst still harvesting the answers along the way!


    If anyone could point me in the right direction that would be great. The project is a personal one and something that has been bugging me for ages! I am learning javascript from scratch but it is slow progress and I need the answers somewhat quicker than that!

    Ta in advance!

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Well.. you could use cookies to store each answer, but some users have cookies disabled.

    You could have hidden fields for the three questions not asked on each page and just "submit" the values of previous questions with every question.

    Or (I'm assuming you are using some kind of server-side solution like PHP, ASP, or ColdFusion), you could store each answer in a session variable and process all the answers on the last page.

    Just a matter of personal preference.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    yiaggi (01-18-2013)

  • #3
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Put each question in a container which you can hide/show programmatically, for example using jQuery*. Each submit button can call the same JS function, either passing an argument specifying the number of the current question or you use JavaScript to look for the currently active question. Put the answer in an array. Done.

    *) Of course, a simple document.getElementsById('...').display = 'none' does it too, but jQuery will allow you to make it look nicer.

    air

  • Users who have thanked Airblader for this post:

    yiaggi (01-18-2013)

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you very much for your time & answers guys - it is fully appreciated!

    The example I am looking at uses the 'hidden containers' method as far as I can see. Upon submit - container 1 disappears and container 2 takes over with the next set of options - displaying a '#' at the end of the URL.

    It appears I have a lot of research to do! I love the power of Javascript and can't wait until I can just reach for the solutions myself! I fear that I don't even know where to start at the moment without seeing some of the code in front of me to build off of!

    I guess my next step is to search online for a similar example and start to take the code apart so I can edit it to do what I need! Not perfect (especially for the kind of JS pro's on here!) but the only way I know how until my learning catches up with these kind of things! I'm pretty good at editing but not great with the hand written right now

    If either of you know of a similar application which I can use to look at the code and start to understand how it goes together - that would be great. I feel bad about asking people on this forum to write code for me as I know everyone's time is precious!

    Again - thanks for your help guys! If I could return the favour I would!

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Not that you can't find a million examples like it on Google, but just to show you something here's a Quick'n'(really)Dirty thing: http://jsfiddle.net/pupdh/

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View Post
    Not that you can't find a million examples like it on Google, but just to show you something here's a Quick'n'(really)Dirty thing: http://jsfiddle.net/pupdh/
    Thanks mate

    I'm sure there are loads of examples - I just don't think i'm typing in the right search phrases - I'm not sure how to word what I am looking for without the essay! ha!

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Consider this for a starting point.
    Could be simplified a bit more, but don't want to go beyond your starting level.
    Code:
    <!DOCTYPE HTML>
    <!-- From: http://www.codingforums.com/showthread.php?t=286010 -->
    
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    .pages { display:none; }
    </style>
    
    </head>
    <body>
    <div id="mainPage">
     <div id="page0">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg"><br>
     Choose a width: 
     <input type="radio" name="rbtn0" value="2"  onclick="gotoPage('page1')"> 2
     <input type="radio" name="rbtn0" value="4"  onclick="gotoPage('page1')"> 4
     <input type="radio" name="rbtn0" value="5"  onclick="gotoPage('page1')"> 5
     <input type="radio" name="rbtn0" value="10" onclick="gotoPage('page1')"> 10
     </div>
     
     <div id="page1" class="pages">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg"><br>
     Choose a height: 
     <input type="radio" name="rbtn1" value="2"  onclick="gotoPage('page2')"> 2
     <input type="radio" name="rbtn1" value="4"  onclick="gotoPage('page2')"> 4
     <input type="radio" name="rbtn1" value="5"  onclick="gotoPage('page2')"> 5
     <input type="radio" name="rbtn1" value="10" onclick="gotoPage('page2')"> 10
     </div>
    
     <div id="page2" class="pages">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/13.jpg"><br>
     Choose a color: 
     <input type="radio" name="rbtn2" value="Red"   onclick="gotoPage('page3')"> Red
     <input type="radio" name="rbtn2" value="Blue"  onclick="gotoPage('page3')"> Blue
     <input type="radio" name="rbtn2" value="Green" onclick="gotoPage('page3')"> Green
     <input type="radio" name="rbtn2" value="Brown" onclick="gotoPage('page3')"> Brown
     </div>
    
     <div id="page3" class="pages">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/14.jpg"><br>
     Choose a weight: 
     <input type="radio" name="rbtn3" value="20"  onclick="gotoAnswer('Answers')"> 20
     <input type="radio" name="rbtn3" value="40"  onclick="gotoAnswer('Answers')"> 40
     <input type="radio" name="rbtn3" value="50"  onclick="gotoAnswer('Answers')"> 50
     <input type="radio" name="rbtn3" value="100" onclick="gotoAnswer('Answers')"> 100
     </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>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    yiaggi (01-18-2013)

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Thank you!

    Quote Originally Posted by jmrker View Post
    Consider this for a starting point.
    Could be simplified a bit more, but don't want to go beyond your starting level.
    Code:
    <!DOCTYPE HTML>
    <!-- From: http://www.codingforums.com/showthread.php?t=286010 -->
    
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    .pages { display:none; }
    </style>
    
    </head>
    <body>
    <div id="mainPage">
     <div id="page0">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg"><br>
     Choose a width: 
     <input type="radio" name="rbtn0" value="2"  onclick="gotoPage('page1')"> 2
     <input type="radio" name="rbtn0" value="4"  onclick="gotoPage('page1')"> 4
     <input type="radio" name="rbtn0" value="5"  onclick="gotoPage('page1')"> 5
     <input type="radio" name="rbtn0" value="10" onclick="gotoPage('page1')"> 10
     </div>
     
     <div id="page1" class="pages">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg"><br>
     Choose a height: 
     <input type="radio" name="rbtn1" value="2"  onclick="gotoPage('page2')"> 2
     <input type="radio" name="rbtn1" value="4"  onclick="gotoPage('page2')"> 4
     <input type="radio" name="rbtn1" value="5"  onclick="gotoPage('page2')"> 5
     <input type="radio" name="rbtn1" value="10" onclick="gotoPage('page2')"> 10
     </div>
    
     <div id="page2" class="pages">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/13.jpg"><br>
     Choose a color: 
     <input type="radio" name="rbtn2" value="Red"   onclick="gotoPage('page3')"> Red
     <input type="radio" name="rbtn2" value="Blue"  onclick="gotoPage('page3')"> Blue
     <input type="radio" name="rbtn2" value="Green" onclick="gotoPage('page3')"> Green
     <input type="radio" name="rbtn2" value="Brown" onclick="gotoPage('page3')"> Brown
     </div>
    
     <div id="page3" class="pages">
     <img src="http://www.nova.edu/hpd/otm/pics/4fun/14.jpg"><br>
     Choose a weight: 
     <input type="radio" name="rbtn3" value="20"  onclick="gotoAnswer('Answers')"> 20
     <input type="radio" name="rbtn3" value="40"  onclick="gotoAnswer('Answers')"> 40
     <input type="radio" name="rbtn3" value="50"  onclick="gotoAnswer('Answers')"> 50
     <input type="radio" name="rbtn3" value="100" onclick="gotoAnswer('Answers')"> 100
     </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>
    
    </body>
    </html>

    This is great thank you! Exactly the starting point I need to get stuck into the project. You are a legend. I'm sure I can make this look pretty.

    My next quest is to not only have the results of their selections display - but also for it to recommend a service of mine based on those results and for it to all go into a form for sending to me.

    Sounds like I've got fun times ahead!

  • #9
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    It's fun learning and experimenting with new/different coding practices. Enjoy!
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #10
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    It's fun learning and experimenting with new/different coding practices. Enjoy!
    I will thank you! Its gonna be a headache but very rewarding! I developed a script ages ago which had all questions on one page and then delivered the selections and a recommendation at the bottom. I am going to try to mix your idea and that and see where I get! :S


    Ta again!


  •  

    Posting Permissions

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