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 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Customizable Product Comparison

    Hello,

    I understand my title might not make sense, but I'll do my best to explain it.

    Basically, I'm looking for a method of comparing software products for my website. I figured JavaScript was the best method of doing this.

    What I want:

    There will be 5 products.

    Product #1
    Product #2
    Product #3
    Product #4
    Product #5

    Now, before any information on any product is displayed, there will be 3 select fields. Each select field will contain the products. The visitor will select 3 of the products and the below table will vertically organize the products in a table with each products features.

    I have done a visual representation of my idea, sorry if it's poorly done.



    If anyone has any questions regarding this, feel free to post.

    Thank you very much for any assistance anyone can provide!

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Chicken
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So baisically you just want to let the user compare up to 3 different products side by side? I'll give it a go when I get home.

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes that's exactly it. Thank you very much

    I look forward to seeing what you make.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,045
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var features = [];
    features['product1'] = 'These are the features of <b>product 1</b>.';
    features['product2'] = 'These are the features of <b>product 2</b>.';
    features['product3'] = 'These are the features of <b>product 3</b>.';
    features['product4'] = 'These are the features of <b>product 4</b>.';
    features['product5'] = 'These are the features of <b>product 5</b>.';
    features['product6'] = 'These are the features of <b>product 6</b>.';
    features['product7'] = 'These are the features of <b>product 7</b>.';
    features['product8'] = 'These are the features of <b>product 8</b>.';
    features['product9'] = 'These are the features of <b>product 9</b>.';
    
    function compareProducts(sel, suffix){
      if (sel.value!=""){
        //header
        document.getElementById("header"+suffix).className="selected";
        document.getElementById("header"+suffix).innerHTML=sel.options[sel.selectedIndex].text;
        
        //features
        document.getElementById("features"+suffix).className="selected";
        document.getElementById("features"+suffix).innerHTML=features[sel.value];
      }
      else { //nothing selected, set to default
        //header
        document.getElementById("header"+suffix).className="default";
        document.getElementById("header"+suffix).innerHTML='Product here';
    
        //features
        document.getElementById("features"+suffix).className="default";
        document.getElementById("features"+suffix).innerHTML='Product features here';    
      }
    }
    </script>
    <style type="text/css">
    .default {
      font-style:italic;
      color:gray;
    }
    .selected {
      font-style:normal;
      color:black;
    }
    </style>
    </head>
    <body>
    <form>
    <select name="selProduct1" onchange="compareProducts(this, 1);">
    <option value="">Select Product</option>
    <option value="product1">Product 1</option>
    <option value="product2">Product 2</option>
    <option value="product3">Product 3</option>
    </select>
    <select name="selProduct2" onchange="compareProducts(this, 2);">
    <option value="">Select Product</option>
    <option value="product4">Product 4</option>
    <option value="product5">Product 5</option>
    <option value="product6">Product 6</option>
    </select>
    <select name="selProduct3" onchange="compareProducts(this, 3);">
    <option value="">Select Product</option>
    <option value="product7">Product 7</option>
    <option value="product8">Product 8</option>
    <option value="product9">Product 9</option>
    </select>
    
    <table border="1">
    <tr>
    <th id="header1" class="default">Product here</th>
    <th id="header2" class="default">Product here</th>
    <th id="header3" class="default">Product here</th>
    </tr>
    <tr>
    <td id="features1" class="default">Product features here</td>
    <td id="features2" class="default">Product features here</td>
    <td id="features3" class="default">Product features here</td>
    </tr>
    </table>
    </div>
    </form>
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh wow, thank you very much!!!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,045
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Glad to help.


  •  

    Posting Permissions

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