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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Exclamation Customization Based On Click

    I have a div that has some smaller divs inside it. Each small div has its own id, and belongs to a class.

    When you click the div, a message pops up that says "Added to cart" (Guess what this is about) and I want to know how to get the value of the text inside a paragraph inside the div that is clicked. I want to do this with PHP, so I can actually make some server changes with the users's cart.

    Here is a site for my code (I try to include as little code, but some you may find unnecessary)

    http://jsfiddle.net/av3Da/2/

    Everything looks jumbled up, but that's because its on the fiddle site.

    So if I wanted to customize the message to say "You bought X Background Color" and then add that to a PHP database, or javascript array?

    In addition, I am looking for some advice on how to change the text on the div that says "Buy for 40 coins" into "Added to cart - Click to remove" and so that you click the button again and it removes the item from the cart.

    thanks

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 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>
    <style type="text/css">
    /*<![CDATA[*/
    #shop
    
    {
    
    height: 350px;
    
    width: 750px;
    
    margin: 0 auto;
    
    border: groove;
    
    border-color: green yellow green yellow;
    
    border-width: 3px;
    
    background: #66CCFF;
    
    overflow: scroll;
    
    }
    
    .shopitem
    
    {
    
    height: 50px;
    
    width: 730px;
    
    background: white;
    
    }
    
    .shopitem:hover
    
    {
    
    background: green;
    
    }
    
    .shopitemname
    
    {
    
    text-indent: 25px;
    
    line-height: 40px;
    
    text-align: left;
    
    }
    
    .buyinfo
    
    {
    
    height: 35px;
    
    width: 150px;
    
    border: dotted;
    
    border-color: red;
    
    position: relative;
    
    bottom: 55px;
    
    left: 555px;
    
    }
    
    .buyinfo:hover
    
    {
    
    background: yellow;
    
    cursor: pointer;
    
    }
    
    .buyinfoname
    
    {
    
    position: relative;
    
    bottom: 10px;
    
    }
    
    #checkoutbutton
    
    {
    
    height: 50px;
    
    width: 125px;
    
    background: #CC3333;
    
    border: ridge;
    
    border-width: 2px;
    
    border-color: white;
    
    color: #33FF33;
    
    }
    
    #checkoutbutton:hover
    
    {
    
    cursor: pointer;
    
    }
    
    #confirmbox
    
    {
    
    height: 100px;
    
    width: 200px;
    
    background: #66CCFF;
    
    color: white;
    
    border: ridge;
    
    border-color: #6633CC;
    
    border-width: 3px;
    
    text-align: center;
    
    position: absolute;
    
    visibility:hidden;
    
    top: 175px;
    
    left: 525px;
    
    }
    /*]]>*/
    </style></head>
    
    <body>
    
    <div id="shop">
    
    <input type="button" value="Go To Checkout" id="checkoutbutton" />
    
    <div class="shopitem" id="OrangeBG">
    
    <p class="shopitemname">Orange Background Color</p>
    
    <div class="buyinfo">
    
    <p class="buyinfoname">Buy - 40 Coins</p>
    
    </div>
    
    </div>
    
    <div class="shopitem" id="BlackBG">
    
    <p class="shopitemname">Black Background Color</p>
    
    <div class="buyinfo">
    
    <p class="buyinfoname">Buy - 40 Coins</p>
    
    </div>
    
    </div>
    
    <div class="shopitem" id="GreenBG">
    
    <p class="shopitemname">Green Background Color</p>
    
    <div class="buyinfo">
    
    <p class="buyinfoname">Buy - 40 Coins</p>
    
    </div>
    
    </div>
    
    <div class="shopitem" id="BlueBG">
    
    <p class="shopitemname">Blue Background Color</p>
    
    <div class="buyinfo">
    
    <p class="buyinfoname">Buy - 40 Coins</p>
    
    </div>
    
    </div>
    
    <div class="shopitem" id="YellowBG">
    
    <p class="shopitemname">Yellow Background Color</p>
    
    <div class="buyinfo">
    
    <p class="buyinfoname">Buy - 40 Coins</p>
    
    </div>
    
    </div>
    
    <div class="shopitem" id="PurpleBG">
    
    <p class="shopitemname">Purple Background Color</p>
    
    <div class="buyinfo">
    
    <p class="buyinfoname">Buy - 40 Coins</p>
    
    </div>
    
    </div>
    
    </div>
    <input type="button" name="" value="Show Me the Cart Array" onmouseup="alert(zxcBuyConfirm['shop'].cart);" />
    
    <div id="confirmbox">
    
    <p>The item was successfully added to your cart</p>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcBuyConfirm={
    
     init:function(o){
      var id=o.WrapperID,obj=document.getElementById(id),c=document.getElementById(o.ConfirmID),hide=o.HideDelay,items=obj?this.bycls(o.ItemClass,obj):[],oo,a,ary=[],z0=0;
      if (obj&&items[0]){
       this[id]=oo={
        ary:[],
        cart:[],
        c:c,
        hide:typeof(hide)=='number'&&hide>0?hide:4000
       };
       for (var z0=0;z0<items.length;z0++){
        a=[items[z0],this.bycls(o.TextClass,items[z0])[0],this.bycls(o.BuyClass,items[z0])[0]];
        if (a[1]&&a[2]){
         this.addevt(a[2].parentNode,'mouseup','buy',oo,oo.ary.length);
         a[1]=a[1].innerHTML;
         a[3]=a[2].innerHTML;
         a[4]=a[3];
         oo.ary.push(a);
        }
       }
      }
     },
    
     buy:function (o,nu){
      var oop=this,z0=0;
      o.ary[nu][3]=o.ary[nu][3]==o.ary[nu][4]?'Added to cart - Click to remove':o.ary[nu][4];
      o.ary[nu][2].innerHTML=o.ary[nu][3];
      o.cart=[];
      for (;z0<o.ary.length;z0++){
       if (o.ary[z0][3]!=o.ary[z0][4]){
        o.cart.push(o.ary[z0][1]);
       }
      }
      if (o.c){
       o.c.style.visibility='visible';
       o.c.getElementsByTagName('*')[0].innerHTML=o.ary[nu][1]+'<br>'+(o.ary[nu][3]!=o.ary[nu][4]?'Added to':'Removed from')+' Cart';
       clearTimeout(o.to)
       o.to=setTimeout(function(){ o.c.style.visibility='hidden'; },o.hide);
      }
    
     },
    
     bycls:function (nme,el){
      for (var els=el.getElementsByTagName('*'),ary=[],z0=0;z0<els.length;z0++){
       if((' '+nme+' ').match(' '+els[z0].className+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    
    }
    
    zxcBuyConfirm.init({
     WrapperID:'shop',
     ConfirmID:'confirmbox',
     ItemClass:'shopitem',
     TextClass:'shopitemname',
     BuyClass:'buyinfoname',
     HideDelay:2000
    });
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    zingzing45 (03-30-2013)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thanks for this post and the effort!


  •  

    Tags for this Thread

    Posting Permissions

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