SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update Price on Selection

    I'm currently making an online shop using php. I don't know any javascript but I'm not bad with php so I can analyze a script and probably work out what it does (javascript). Here's what I want to do. When a user selects a different weight, I want it to update the displayed price. I suggest you copy the below table into something like dreamweaver.

    HTML Code:
                  <table width="100%" border="0" cellspacing="0" cellpadding="3">
                    <tr>
                      <td width="23%" valign="middle">Weight:</td>
                      <td width="39%" align="left" valign="middle">
    				  <form method="post" action="">
    				  <select name="weight" id="weight" style="width:108px;">
                          <option value="1kg">1kg ($15.00)</option>
                          <option value="500g">500g ($10.00)</option>
                          <option value="250g">250g ($7.00)</option>
                        </select>    
    					</form>
    					</td>
                      <td width="38%">$5.00</td>
                    </tr>
                  </table>
    How hard would it be to change the displayed price when the user selects a different weight? It will be cosmetic only. If someone could write me a little script to do this for the above html, then that would be really awesome and much appreciated.

    Cheers!

  2. #2
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And one more thing, I may require a bit of javascript help here and there during the development of this shop. I'm willing to pay for help. If any javascript programmer is interested, please pm me and we can exchange email/messenger details.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Howdy,

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
      if (window.fnOldLoad) {fnOldLoad();}
      var sel = document.getElementById('sel1');
      sel.onchange = selOnChange;
    }
    function selOnChange()
    {
      var p, i = this.selectedIndex;
      switch (i) {
        case 0: p = '$15.00'; break;
        case 1: p = '$10.00'; break;
        case 2: p = '$7.00'; break;
      }
      document.getElementById('price').innerHTML = p;
    }
    </script>
    </head>
    <body>
    <table width="100&#37;" border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="23%" valign="middle">Weight:</td>
    <td width="39%" align="left" valign="middle">
    <form method="post" action="">
    <select id='sel1' name="weight" id="weight" style="width:108px;">
    <option value="1kg">1kg ($15.00)</option>
    <option value="500g">500g ($10.00)</option>
    <option value="250g">250g ($7.00)</option>
    </select>
    </form>
    </td>
    <td id='price' width="38%">$15.00</td>
    </tr>
    </table>
    </body>
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mate, I could bloody kiss you

    Thankyou very very much.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems I have a bit of a problem. I'm planning on using this bit of javascript for multiple products per page. I should have told you this before. I can edit the javascript using php (to make new id's.etc) but it seems no matter what I do, if I have to of those javascripts on the same page, it makes both not work (they conflict).

    So if someone can, could you please make this script work for more than one item per page.

    HTML Code:
    <table width="100&#37;" border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="23%" valign="middle">Weight:</td>
    <td width="39%" align="left" valign="middle">
    <form method="post" action="">
    <select id="weight1" name="weight" style="width:108px;">
    <option value="1kg">1kg ($15.00)</option>
    <option value="500g">500g ($10.00)</option>
    <option value="250g">250g ($7.00)</option>
    </select>
    </form>
    </td>
    <td id='price1' width="38%">$15.00</td>
    </tr>
    </table>
    <br />
    <br />
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="23%" valign="middle">Weight:</td>
    <td width="39%" align="left" valign="middle">
    <form method="post" action="">
    <select id="weight2" name="weight" style="width:108px;">
    <option value="1kg">1kg ($15.00)</option>
    <option value="500g">500g ($10.00)</option>
    <option value="250g">250g ($7.00)</option>
    </select>
    </form>
    </td>
    <td id='price2' width="38%">$15.00</td>
    </tr>
    </table>
    If someone can write a script to make the prices of those two tables update (plus the ability to easily add more products to a page by just changing the id's and things), then that would be really great. Maybe someone can edit Mike Foster's script to do that.

    Cheers!
    Last edited by Wardrop; Feb 9, 2007 at 20:16.

  6. #6
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy crap I just fluked this...

    HTML Code:
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
      if (window.fnOldLoad) {fnOldLoad();}
      var weight = document.getElementById('weight1');
      weight.onchange = weightOnChange;
      var weight = document.getElementById('weight2');
      weight.onchange = weightOnChange2;
    }
    function weightOnChange()
    {
      var p, i = this.selectedIndex;
      switch (i) {
        case 0: p = '$15.00'; break;
        case 1: p = '$10.00'; break;
        case 2: p = '$7.00'; break;
      }
      document.getElementById('price1').innerHTML = p;
    }
    function weightOnChange2()
    {
      var p, i = this.selectedIndex;
      switch (i) {
        case 0: p = '$14.00'; break;
        case 1: p = '$9.00'; break;
        case 2: p = '$6.00'; break;
      }
      document.getElementById('price2').innerHTML = p;
    }
    </script>
    Is there anything wrong with that script?

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wrong? If it works in IE6 and Firefox, then probably not. It's not very efficient though, but then your X/HTML isn't either: why a separate form for each <select> and why a separate table for each?

    You would also benefit from more CSS.

    Try this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    form table {
      width: 100&#37;;
      border: 0 none;
      border-collapse: collapse;
    }
    form table td {
      vertical-align: middle;
      text-align: left;
      border: 0 none;
      padding: 3px;
    }
    select.weight {
      min-width: 108px;
    }
    * html select.weight {
      width: 108px;
    }
    </style>
    <script type="text/javascript"><!--
    document.getElementsByClassName = function(cName,elms) {
      // elms can be a string or a nodeList
      // this variant by DynamicSiteSolutions.com
      if(!elms || !elms.length) {
        elms='*';
        if(document.all && (!document.getElementsByTagName || !document.compatMode))
          elms = document.all;
      }
      if((typeof(elms)=='string') && document.getElementsByTagName)
        elms = document.getElementsByTagName(elms);
      if(!elms || !elms.length) return [];
      cName = cName.replace(/\-/g, "\\-");
      var ar=[],re = new RegExp('(^|\\s)'+cName+'(\\s|$)','i');
      for(var i=0,len=elms.length;i<len;i++)
        if(elms[i].className && re.test(elms[i].className)) ar[ar.length] = elms[i];
      return ar;
    }
    // Note: It is known that the dss_addLoadEvent function crashes Netscape 
    // versions 4.02 and older. I recommend you use a more comprehensive event 
    // management script for production (aka "live") pages.
    function dss_addLoadEvent(fn) {
      if(typeof(fn)!="function")return;
      var tempFunc=window.onload;
      window.onload=function() {
        if(typeof(tempFunc)=="function")tempFunc();
        fn();
      }
    }
    function initSelects(){
      if(!document.getElementsByTagName || !document.createTextNode) return;
      var sels = document.getElementsByClassName('weight','select');
      if(!sels || !sels.length) return;
      var fn = function(){
        var str = this.options[this.selectedIndex].text;
        str = '$'+str.match(/\(\$([\d\.]+)\)/)[1];
        var par = this.parentNode;
        while(par.nodeName.toLowerCase()!='tr'){
          par = par.parentNode;
          if(par.nodeName.toLowerCase()=='body') return; // error!
        }
        var cells = par.getElementsByTagName('td');
        var cell = cells[cells.length-1];
        if(cell.firstChild && cell.firstChild.nodeType==3) cell.firstChild.data=str;
        else {
          cell.removeChild(cell.firstChild)
          cell.appendChild(document.createTextNode(str));
        }
      }
      for(var i=0,len=sels.length;i<len;i++) {
        sels[i].onchange = fn;
        sels[i].onchange();
      }
    }
    dss_addLoadEvent(initSelects);
    // -->
    </script>
    </head>
    <body>
    
    <form method="post" action="#">
      <table>
        <tr>
          <td width="23%"><label for="weight1">Weight:</label></td>
          <td width="39%">
            <select class="weight" name="weight" id="weight1">
              <option value="1kg">1kg ($15.00)</option>
              <option value="500g">500g ($10.00)</option>
              <option value="250g">250g ($7.00)</option>
            </select>    
          </td>
          <td width="38%">$5.00</td>
        </tr>
      </table>
    </form>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The html I provided is more like a template for you to code for. I can then move it over to my actual design.

    Your script seems to work well, however, for flexibility reasons, would it be possible to make the script change the displayed price by referring to the elements id rather than... well I'm not quite sure how you've got it to work , but I'd prefer it if it did use the element id instead so I can customize it's placement easier, and so I generally know how it works . At the moment it doesn't work in my current site.

    It really is a great script though mate.

    Cheers!
    Last edited by Wardrop; Feb 10, 2007 at 05:58.

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Wardrop, sorry for the delay in getting back to this thread - but it looks like Kravvitz has some good stuff for you. I also made another one:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Demo</title>
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {bpOldOnLoad = window.onload;}
    window.onload = function()
    {
      if (window.bpOldOnLoad) {bpOldOnLoad();}
      selInit();
    };
    function selInit()
    {
      var i = 1, s = document.getElementById('weight' + i);
      while (s) {
        s.weightSelNum = i;
        s.onchange = selOnChange;
        s = document.getElementById('weight' + (++i));
      }
    }
    function selOnChange()
    {
      var e, p, s = this.options[this.selectedIndex].text;
      p = s.match(/\(\$(\d*\.?\d+)\)/);
      if (p) {
        e = document.getElementById('price' + this.weightSelNum);
        if (e) {
          p = '$' + p[1];
          if (e.firstChild && e.firstChild.nodeType == '3') { e.firstChild.nodeValue = p; }
          else { e.innerHTML = p;}
        }
      }
      else {alert('Invalid price in select: ' + this.id);}
    }
    </script>
    </head>
    <body>
    
    <table width="100&#37;" border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="23%" valign="middle">Weight:</td>
    <td width="39%" align="left" valign="middle">
    <form method="post" action="">
    <select id="weight1" name="weight" style="width:108px;">
    <option value="1kg">1kg ($15.00)</option>
    <option value="500g">500g ($10.00)</option>
    <option value="250g">250g ($7.00)</option>
    </select>
    </form>
    </td>
    <td id='price1' width="38%">$15.00</td>
    </tr>
    </table>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="23%" valign="middle">Weight:</td>
    <td width="39%" align="left" valign="middle">
    <form method="post" action="">
    <select id="weight2" name="weight" style="width:108px;">
    <option value="1kg">1kg ($.)</option>
    <option value="500g">500g ($10.00)</option>
    <option value="250g">250g ($7.00)</option>
    </select>
    </form>
    </td>
    <td id='price2' width="38%">$15.00</td>
    </tr>
    </table>
    
    </body>
    </html>

  10. #10
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate, that seems to work very well.

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My code found the row that the cell containing the select element was in and then changed the contents of the last cell in that row. It's basic DOM scripting.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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