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

    Use Javascript to show status

    I have a database that I use to hold data for products. I use 2 menus to determine the styles color and size. This data comes from the database and is displayed in a dynamic menu/list. I want to use javascript to display whether the item is in stock or not. Currently I have my form submitting and it will show whether the item is in stock or not but you have to click the submit button. I'd prefer that you just use the drop down menus to determine this and show the option in a div. I do a lot of php programming but not so much javascript. You can see what I'm doing by visiting http://www.awinninglook.com/products...ProductID=1000 and suggestions on how I could accomplish this with jquery or javascript would be appreciated. Thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Javascript has no way of knowing if the item is in stock. That is a function of your database. Use PHP and maybe under your SKU line put "Availability : In Stock" or (Out of Stock).
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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>
      <title></title>
    </head>
    
    <body>
     <form name="siteCart_1_ATC_1000" method="POST" action="/products-detail.php?ProductID=1000">
      <div id="message" ></div>
      <select name="siteCart_1_Size_Add" class="MenuList" id="siteCart_1_Size_Add">
       <option value="1">Small</option>
       <option value="2">Medium</option>
       <option value="3">Large</option>
       <option value="4">Extra Tall</option>
      </select>
      <select name="siteCart_1_Color_Add" class="MenuList">
       <option value="5">Cappuccino</option>
       <option value="6">Blue</option>
      </select>
      <input name="siteCart_1_Quantity_Add" type="text" class="FormBkgd" id="siteCart_1_Quantity_Add" value="1" size="1" />
      <input type="submit" class="MiniButton" value="Add to Cart" name="siteCart_1_ATC" /></td>
     </form>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcStockLevels={
    
     init:function(o){
      var frm=document.forms[0],s1=frm[o.select1],s2=frm[o.select2],n=frm[o.Amount],s=frm[o.Submit],m=document.getElementById(o.MessageID);
      if (s1&&s2&&n&&s&&m){
       o.s=s;
       o.s1=s1;
       o.s2=s2;
       o.n=n;
       o.m=m;
       this.addevt(n,'blur','check',o);
       this.addevt(s1,'change','check',o);
       this.addevt(s2,'change','check',o);
       this.check(o)
      }
     },
    
     check:function(o){
      o.s.style.visibility='visible'; // optional
      o.m.innerHTML='';
      o.s.onclick=function(){ return true; }  // optional
      for (var z0=0;z0<o.Stock.length;z0++){
       if (o.s1.value==o.Stock[z0][0]&&o.s2.value==o.Stock[z0][1]&&o.n.value>o.Stock[z0][2]){
        o.s.style.visibility='hidden'; // optional
        o.n.value=o.Stock[z0][2];
        o.m.innerHTML='Available Stock = '+o.Stock[z0][2];
        o.s.onclick=function(){ return false; }  // optional
       }
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcStockLevels.init({
     select1:'siteCart_1_Size_Add',
     select2:'siteCart_1_Color_Add',
     Amount:'siteCart_1_Quantity_Add',
     Submit:'siteCart_1_ATC',
     MessageID:'message',
     Stock:[
     // fill this arry using PHP echo
      // field 0 = the value of select1
      // field 1 = the value of select2
      // field 2 = the stock level
      [1,5,2],
      [2,5,2],
      [3,5,2],
      [4,5,2],
      [1,6,2],
      [2,6,2],
      [3,6,2],
      [4,6,2]
     ]
    })
    /*]]>*/
    </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/

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    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>
      <title></title>
    </head>
    
    <body>
     <form name="siteCart_1_ATC_1000" method="POST" action="/products-detail.php?ProductID=1000">
      <div id="message" ></div>
      <select name="siteCart_1_Size_Add" class="MenuList" id="siteCart_1_Size_Add">
       <option value="1">Small</option>
       <option value="2">Medium</option>
       <option value="3">Large</option>
       <option value="4">Extra Tall</option>
      </select>
      <select name="siteCart_1_Color_Add" class="MenuList">
       <option value="5">Cappuccino</option>
       <option value="6">Blue</option>
      </select>
      <input name="siteCart_1_Quantity_Add" type="text" class="FormBkgd" id="siteCart_1_Quantity_Add" value="1" size="1" />
      <input type="submit" class="MiniButton" value="Add to Cart" name="siteCart_1_ATC" /></td>
     </form>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcStockLevels={
    
     init:function(o){
      var frm=document.forms[0],s1=frm[o.select1],s2=frm[o.select2],n=frm[o.Amount],s=frm[o.Submit],m=document.getElementById(o.MessageID);
      if (s1&&s2&&n&&s&&m){
       o.s=s;
       o.s1=s1;
       o.s2=s2;
       o.n=n;
       o.m=m;
       this.addevt(n,'blur','check',o);
       this.addevt(s1,'change','check',o);
       this.addevt(s2,'change','check',o);
       this.check(o)
      }
     },
    
     check:function(o){
      o.s.style.visibility='visible'; // optional
      o.m.innerHTML='';
      o.s.onclick=function(){ return true; }  // optional
      for (var z0=0;z0<o.Stock.length;z0++){
       if (o.s1.value==o.Stock[z0][0]&&o.s2.value==o.Stock[z0][1]&&o.n.value>o.Stock[z0][2]){
        o.s.style.visibility='hidden'; // optional
        o.n.value=o.Stock[z0][2];
        o.m.innerHTML='Available Stock = '+o.Stock[z0][2];
        o.s.onclick=function(){ return false; }  // optional
       }
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcStockLevels.init({
     select1:'siteCart_1_Size_Add',
     select2:'siteCart_1_Color_Add',
     Amount:'siteCart_1_Quantity_Add',
     Submit:'siteCart_1_ATC',
     MessageID:'message',
     Stock:[
     // fill this arry using PHP echo
      // field 0 = the value of select1
      // field 1 = the value of select2
      // field 2 = the stock level
      [1,5,2],
      [2,5,2],
      [3,5,2],
      [4,5,2],
      [1,6,2],
      [2,6,2],
      [3,6,2],
      [4,6,2]
     ]
    })
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Thanks for the code. I'm not sure how this works but here is the way my data is populated. The menu is dynamic and is populated from and options table. Each option is determined by the ProductID. The in stock is determined by a field called skuAvailable with either a Yes or No value. How can I modify you code to make that work?


  •  

    Posting Permissions

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