Using jquery data attributes with each function

Question

I'm building a quote generator, and there is a product field where a user can select a product, select the quantity, then add another if they wish.

I'm using an each function to loop through all the products they add to sum the price.

For regular values, my JS is running great, but I want to add a second price (minimum price) that the product can be sold for. I've added the data as an attribute and i'm trying to use the same method to pull the price from the attribute, but it just keeps returning 'undefined'!!!!

HTML

<select class="form-control onChangePrice system1" name="SystemModel">
  <option value="">Select...</option>
  <option value="3300" data-min-price="3000">System 1</option>
  <option value="4500" data-min-price="4000">System 2</option>
  <option value="6000" data-min-price="5500">System 3</option>
  <option value="6000" data-min-price="5500">System 4</option>
</select>
<div class="col-lg-3 col-md-3 col-sm-3">
  <input class="form-control onChangePrice systemNumber" type="number" name="SystemModelAmount" value="1">
</div>

JS

 var systemTotal = 0;
 var systemMin = 0;
 var i = 0;
 $('.system1').each(function(){
  if (this.value != "") {
    systemEachMin = $(this).data("minPrice");
    console.log(systemEachMin);
    systemEachTotal = this.value * parseInt($(".systemNumber").eq(i).val());
    systemTotal += parseFloat(systemEachTotal);
    systemMin += parseFloat(systemEachMin);
  };
  i++;
});

The code works flawlessly for the regular value of the option, i just cant get it to repeat for the data attribute!

Thanks

systemEachMin = $(this).attr("data-min-price");. Alos your code is not full. $(".systemNumber") html is missing — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 6, 2017 at 12:01
I've tried both of these, it just keeps returning 'undefined'. I've looked into camel case issues with the function but no matter what i do, it keeps returning 'undefined' — user7070541
– user7070541, Commented Mar 6, 2017 at 12:05
$('.system1').each is looping each <select> element, not each <option> element. Your select doesn't have the data attribute. To get the selected option you would use something like $(this).find(':selected') — Patrick Evans
– Patrick Evans, Commented Mar 6, 2017 at 12:05
Brilliant @Partick Evans, thank you! systemEachMin = $(this).find(':selected').data("min-price"); How come I don't have to use the selected attribute when targeting the value? but i do when targeting the attribute? — user7070541
– user7070541, Commented Mar 6, 2017 at 12:10

Alex · Accepted Answer · 2017-03-06 12:08:51Z

1

You're doing a couple of things slightly wrong here:

$('.system1').each(function(){

should be:

$('.system1 option').each(function(){

and

systemEachMin = $(this).data("minPrice");

should be:

systemEachMin = $(this).data("min-price");

So in full:

var systemTotal = 0;
 var systemMin = 0;
 var i = 0;
 $('.system1 option').each(function(){
  if (this.value != "") {
    systemEachMin = $(this).data("min-price");
    console.log(systemEachMin);
    systemEachTotal = this.value * parseInt($(".systemNumber").eq(i).val());
    systemTotal += parseFloat(systemEachTotal);
    systemMin += parseFloat(systemEachMin);
  };
  i++;
});

answered Mar 6, 2017 at 12:08

Alex

9,0612 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robiseb Over a year ago

And there is only one input.systemNumber, so $(".systemNumber").eq(i).val() is wrong too (except if the HTML isn't full here)

PeteB · Accepted Answer · 2017-03-06 12:12:46Z

0

$(this).data("minPrice"); refers to the select tag and not the options tag, there is no data-min-price on the select tag.

this.options will return all the options in an array

or you could use the following for the selected options data attribute

$(this).find('option:selected').data("minPrice")

or

$("option:selected", this).data("minPrice")

answered Mar 6, 2017 at 12:12

PeteB

15412 bronze badges

Collectives™ on Stack Overflow

Using jquery data attributes with each function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related