Value change on drop down or check box Part 2

JavaScript
1

Continuing the discussion from Value change on drop down or check box:

Hi there, Opening a very old discussion here: Can we make these prices coming through a variable.

var prices = [59, 236, 1475];

Instead of hardcoded numerics can we get it through variable may be data-one etc?

Reason - they will be used in Wordpress product each product has different prices etc. If needed I can put more explanation.

Can this be possible→

var prices = [date-one, data-two, data-3]; ?

2

To steal an answer from r937…

What happens when you try it?

3

I have created a pen here → https://codepen.io/codeispoetry/pen/ErLbaN?editors=1010

  1. JS code is in custom.js file
  2. data attributes are in html in single-product.php file.

This eventually didn’t worked for me. Is this not possible that HTML in other file will be interactive to data-attributes of JS file.

4

what is r937?

Already tried this. Didn’t work for me.

5

Well, the simple answer is that javascript is perfectly capable of forming an array out of variables.

So the problem would be in your implementation.

image

1 Like
6

let me reproduce what i was trying. I will update the code soon.

8

The original code:

<option value="license_one">Single Site License</option>

Modified code:

<option value="license_one" data-licenseone="<?php somephpcode here that brings the amount ?>">Single Site License</option>

I have tried echoing this and it generates a correct numerical value.

But when I use this in JS

var prices = [data-licenseone, data-licensetwo, data-licensethree];

It doesnt work.

9

HTML attributes are not accessed that way. The getAttribute method is used for that.
Data attributes also have a more specialized special way that they are accessed, using the dataset object.

1 Like
10

Hi there @Paul_Wilkins,

The link that you gave has this arrangement →

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

This one →

const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Here one HTML property has so many data attributes at the parent level. In my case, things are slightly different →

<select class="license_type" name="license_type" id="license_type">
   <option value="license_one" data-one="59">Single Site License</option>
    <option value="license_two" data-two="245">5 Site License</option>
    <option value="license_three" data-three="1569">Developers License</option>
</select>

Options are child to select Parent should I set ID for each option separately or just setting an ID at parent select we can fetch all options data attributes. Please advise.

11

If you want JavaScript to be able to get the data attributes without knowing the names, the dataset gives you an object list, and you can use Object.keys() to get the keys in that dataset.

1 Like
12

I try to connect by reading this → https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

But cant complete get into this. Would it be possible if you can help me with some example in fetching such things specially keeping my example(codepen) in mind.

13
1 Like
14

Well with your example, I would assign the select element to a local variable using the unique identifier as a reference, then get the options of that select element, and loop through each of those options getting the data fields, most likely using the reduce method to combine things together.

1 Like
16

Please note: I don’t intend to write the code for you because that doesn’t help you to learn anything.

1 Like
17

Yes, Yes. I never denied that. In fact no one can, but quite lost where to start solving this puzzle.

18

I thought that I laid it out quite clearly in a somewhat sequential order.

1 Like
19

There is a curse of Knowledge(Not getting cynical, argumentative or stubborn, but on a lighter note):

When someone is Pro his/her reality and perception is quite different from the novice. Even the enlightened folks suffer from the curse of Knowledge - Not understanding where a novice or less enlightened is standing and experiencing things differently than him/her. Two different realities.

If I would have grasped everything and every bit that you have told me I would have started implementing. I hardly get 30% of what you told me.

Alternatively I was searching for some live example, but miserably failed. May be my search terms were not good enough.

20

The first main objective to work on is to be looping through the options in the select object.
To do that, you need to get the options of that select object.
To do that, you need to get the select html element.

So, first, get the select html element.
Then get the options of that select html element.
Then loop through those options, outputting them to console.log as a test that the loop is correctly working.

1 Like
21

The querySelector method is used to get the select html element.

Do you know how to use querySelector with a unique identifier to gain a reference to an html element, and assign that to a local variable?

1 Like
22

I think yes by taking ID. I will write some code as directed by you in few minutes so that you can check if I am grasping on the correct lines.

1 Like