How to get data value from element class?

Question

HTML code:

<input type="file" name="efile" id="efile" data-cat="electronics" style="width:100%" class="alertme">
<input type="file" name="dfile" id="dfile" data-cat="Decoratives" style="width:100%" class="alertme">
<input type="file" name="kfile" id="kfile" data-cat="kitchen" style="width:100%" class="">
<input type="file" name="hdfile" id="hdfile" data-cat="Home" style="width:100%" class="">
<input type="file" name="ffile" id="ffile" style="width:100%" data-cat="Furnitures" class="alertme">

How can I get data-cat attribute value where class alertme is exist? and thanks for reading my question. I am weak in English so please apologize me if I made any grammatical or spelling mistakes.

when you get data click event or default run page? – Sumit patel Nov 08 '16 at 11:46 — Sumit patel, Nov 08 '16 at 11:46

score 2 · Answer 1 · answered Nov 08 '16 at 11:46

2

here is code to achieve this:

$(".alertme").each(function(){
    // Here you can fill your array or whatever you want..
    $(this).attr("data-cat"); 
});

answered Nov 08 '16 at 11:46

danish farhaj

1,316
10
20

how can I run this function on change? – Shah Rushabh Nov 08 '16 at 12:42
http://stackoverflow.com/questions/2721250/jquery-change-method-on-input-type-file see this change function of input type file. – danish farhaj Nov 09 '16 at 04:31

score 0 · Accepted Answer · answered Nov 08 '16 at 11:46

you can try like this

$(document).ready(function(){
  $(".alertme").each(function(){
 var val = $(this).data('cat');
    alert(val);
});
})

<input type="file" name="efile" id="efile" data-cat="electronics" style="width:100%" class="alertme">
<input type="file" name="dfile" id="dfile" data-cat="Decoratives" style="width:100%" class="alertme">
<input type="file" name="kfile" id="kfile" data-cat="kitchen" style="width:100%" class="">
<input type="file" name="hdfile" id="hdfile" data-cat="Home" style="width:100%" class="">
<input type="file" name="ffile" id="ffile" style="width:100%" data-cat="Furnitures" class="alertme">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

you just have to use `$('input[type=file]').change(function () { //Your code });` — Bharat, Nov 08 '16 at 12:44

score 0 · Answer 3 · edited Sep 26 '17 at 04:23

Use attr() to get the data attribute and a loop do push the value to the data array

var data = [];
$(".alertme").change(function() {
  $(".alertme").each(function() {
    data.push($(this).attr("data-cat"));
  });
  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="efile" id="efile" data-cat="electronics" style="width:100%" class="alertme">
<input type="file" name="dfile" id="dfile" data-cat="Decoratives" style="width:100%" class="alertme">
<input type="file" name="kfile" id="kfile" data-cat="kitchen" style="width:100%" class="">
<input type="file" name="hdfile" id="hdfile" data-cat="Home" style="width:100%" class="">
<input type="file" name="ffile" id="ffile" style="width:100%" data-cat="Furnitures" class="alertme">

@ShahRushabh wrap your code in change event, see my updated answer — madalinivascu, Nov 08 '16 at 12:47

score 0 · Answer 4 · answered Nov 08 '16 at 11:49

0

First you have to get all elements with that class:

var aAlertMe = window.document.getElementsByClassName("alertme");

Secondly, for each element in the array insert its data into another array:

var aDataValues = [];
for(var i = 0; i < aAlertMe.length; i++){
    aDataValues.push(aAlertMe[i].dataset.cat);
}

And you'll have all the values inside aDataValues.

answered Nov 08 '16 at 11:49

xale94

424
5
12

how can I run this function on change? – Shah Rushabh Nov 08 '16 at 12:42
@ShahRushabh Easy. `window.document.getElementById("yourIdElementToAddOnChangeEvent").onchange = function(){ /*here will go the code*/ }` – xale94 Nov 09 '16 at 14:35

score 0 · Answer 5 · answered Nov 08 '16 at 11:52

0

Try This :

$("input[type='file']").each(function () {
    if($(this).hasClass("alertme"))
        alert($(this).data("cat"));
});

answered Nov 08 '16 at 11:52

Amit Maru

132
7

how can I run this function on change? – Shah Rushabh Nov 08 '16 at 12:42

How to get data value from element class?

5 Answers5