“data-” attribute as javascript parameter is not working in chrome

Question

HTML:

<select name="employee_ID" id="employee_ID" onchange="$('#IncomeTaxDeduction').val($('#employee_ID').find(':selected').data('incomtax'));"> 
             <option value="" disabled selected style="display:none;">Select</option>          
          <?php foreach ($employee_data as $emp_opt_value): ?>
             <option  value="<?php echo $emp_opt_value['ID']; ?>" data-incomtax= "<?php echo $emp_opt_value['IncomeTaxPercent']; ?>" onclick="deductions(this)" > <?php echo $emp_opt_value['ID']; ?></option>
          <?php endforeach; ?>
</select>

JS:

var itdeduction;

function deductions(obj){
   itdeduction = parseFloat(obj.getAttribute('data-incomtax'));

   alert(itdeduction);
}

This 'data-' attribute works very well in firefox but it is not working in google chrome. Can somebody kindly help me.

From where/how `deductions()` is invoked? Additionally I would recommend the use of unobtrusive event handlers — Satpal, Apr 12 '17 at 07:52
This hurts my eyes. Also, might be helpful http://stackoverflow.com/questions/12844618/how-to-return-the-data-attribute-of-an-option-element-in-select — Lewis, Apr 12 '17 at 07:54
In your case `onchange` will return a value but it will not trigger any function — brk, Apr 12 '17 at 07:55
@marmeladze Sorry! `obj.dataset.incomtax` not working. Any other solutions — Bullet, Apr 12 '17 at 07:59
@marmeladze I'm using `onchange` event to do another action. — Bullet, Apr 12 '17 at 08:03
@Lewis Thank you. Your reference link works perfectly in chrome,firefox,Edge — Bullet, Apr 12 '17 at 12:39

Shakti Phartiyal · Answer 1 · 2017-04-12T08:05:51.970

Following is the approach to get data attributes is JS:

<script>
function getData()
{
  alert(document.getElementById('sample').getAttribute('data-name'));
}
</script>
<li id="sample" data-name="test">Sample</li>
<br/>
<button onClick="getData();">Get Attribute Value</button>

Your code edit:

<script>
var itdeduction;

function deductions(){
var element = document.getElementById('employee_ID');
   itdeduction = parseFloat(element.options[element.selectedIndex].getAttribute('data-incomtax'));
   alert(itdeduction);
}
</script>
<select name="employee_ID" id="employee_ID" onchange="deductions();">
<option  value="12" data-incomtax= "20">Some Name</option>
<option  value="13" data-incomtax= "30">Another Name</option>
</select>

What does element.options[element.selectedIndex] do?

It selects the selected option for the select box. example: if somename is selected then element.options[element.selectedIndex] will give us <option value="12" data-incomtax= "20">Some Name</option>

“data-” attribute as javascript parameter is not working in chrome

1 Answers1