CODEWITHSUNDEEP
javascripthtmljquery
Jesús Cova
Jesús Cova

Reputation: 339

Getting Undefined Value jQuery and Html

I have this HTML code:

<div class="cart-plus-minus">
  <input class="cart-plus-minus-box quantity" id="{{ $item->id }}" name="quantity[{{ $i }}]" value="{{ $item->quantity }}" type="text">
  <input  name="product_id[{{ $i }}]" value="{{ $item->id }}" type="hidden">
  <div class="dec qtybutton" data-attribute="{{ $item->id }}"><i class="zmdi zmdi-chevron-down"></i></div>
  <div class="inc qtybutton" data-id="{{ $item->id }}"><i class="zmdi zmdi-chevron-up"></i></div>
</div>

My jQuery code is this:

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    var element = jQuery(event.currentTarget);
    var url = element.attr("attribute");
    alert(url);
});

When I click in desc it displays an alert but the thing is that the value comes undefined, and I know that it is because it says $(document) but it's only way that it has worked... I wonder how can I get the value in data-attribute?

Thanks!

Upvotes: 0

Views: 481

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

  • To get data use .data("foo") or .attr("data-foo")

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    var url = $(this).data("attribute");
    alert(url);
});

Example:

$(document).on('click', 'div.cart-plus-minus > div.dec', function(event) {
  var url = $(this).data("attribute"); // That's not an URL but OK
  alert(url);
});
<div class="cart-plus-minus">
  <input class="cart-plus-minus-box quantity" id="888" name="quantity[0]" value="0" type="text">
  <input name="product_id[0]" value="888" type="hidden">
  <div class="dec qtybutton" data-attribute="888"><i class="zmdi zmdi-chevron-down"> DEC</i></div>
  <div class="inc qtybutton" data-id="888"><i class="zmdi zmdi-chevron-up"> INC</i> </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Given the example from your link you have something like this: 

$(".dec, .inc").on('click', function() {
  const $inp = $(this).closest('.cart-plus-minus').find('.cart-plus-minus-box');
  let val = Number($inp.val());
  val += $(this).is('.inc') ? 1 : -1; 
  $inp.val(Math.max(0, val));
});
<div class="cart-plus-minus">
  <input class="cart-plus-minus-box" name="quantity" value="1" type="text">
  <button type="button" class="dec qtybutton"><i class="zmdi zmdi-chevron-down">-</i></button>
  <button type="button" class="inc qtybutton"><i class="zmdi zmdi-chevron-up">+</i></button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Also, fix the templating issues.

Upvotes: 1

Hashemi Rafsan
Hashemi Rafsan

Reputation: 300

You can do something like this:

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    alert($(this).data('attribute'));
});

Upvotes: 0

Flink
Flink

Reputation: 1006

Use data() instead of attr:

element.data("attribute");

Upvotes: 0

Related Questions