CODEWITHSUNDEEP
javascriptjquery
Vicky
Vicky

Reputation: 982

adding value to shoping cart via jquery

I want to add the item to cart by clicking on the item like div class box2 i have demo item when i click on the image i get the name and the price but the name and price is not adding to ul class add please help me out how can i get the values from image and set into the cart

 <div class="box2">
              <p>pkr 700.0</p>
               <img src="images/col.png" />
               <h1>Beverges</h1>
    </div>

    <ul class="add">
              <li>bellle belle belle 25cl
                 <p>2 Unit(s) at PKR 0.8/Unit(s)</p>
              </li>
    </ul>
    <script type="text/javascript">
    $(document).ready(function() {
      $('.box2').click(function(){
          var price=$(".box2 p:first").html();
          var product=$(".box2 h1:first").html();
          $(".add li:first").val(product);
          $(".add li p:first").val(price);
          alert(price);
          alert(product);
      });
    });
    </script>

Upvotes: 1

Views: 190

Answers (3)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use text method or html method instead of val method:

$(".add li:first").text(product);
$(".add li p:first").text(price);

Or,

$(".add li:first").html(product);
$(".add li p:first").html(price);

val() method is only for input element types.

You are assigning two values to same element which will override, so use like this:

$(".add li:first").text(product + " " + price);

Update: As per comment demo

$('.box2').click(function(){
          var price=$(".box2 p:first").html();
          var product=$(".box2 h1:first").html();
    $(".add li:first").contents().filter(function(){
       return this.nodeType == 3;  
    })[0].nodeValue = product;
    $(".add li:first p").text(price);
      });

Upvotes: 2

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

p and li doesnt have val()

try

$(document).ready(function() {
  $('.box2').click(function(){
      var price=$(".box2 p:first").html();
      var product=$(".box2 h1:first").html();
      $(".add li:first").html(product);
      $(".add li p:first").html(price);
      alert(price);
      alert(product);
  });
});

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

List item(li) is not an input type control so val() will not work here try using text() instead

$(".add li:first").text("some text here");
$(".add li p:first").text("some text here");

Upvotes: 0

Related Questions