CODEWITHSUNDEEP
javascriptjqueryhtml
godot
godot

Reputation: 3545

How to get data-value from radio input using jquery?

I have simple from which consists by inputs like that:

<form id='some-form'>
    ....
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
    ....
</form>

I'm trying to loop through this form and get data values:

$('#some-form').filter(':input').each(function (i, element) {
     console.log(element.value);
     console.log(element.attr('data-value'));
}

element.value holds value 'on' or 'off' depending radio is chosen or not and it works properly but when I try to call element.attr('data-value') it throws an error.

So how can I extract data-value in this loop?

Upvotes: 4

Views: 3449

Answers (5)

connexo
connexo

Reputation: 56754

Inside your .each() function element is a regular HTMLElement, not a jQuery object.

Either wrap that using $(element) (or even $(this)) which allows to use jQuery's $.attr()

$(element).attr('data-value')

or, even better, use the corresponding native DOM Api method 

element.getAttribute('data-value'))

Since you are accessing a data- attribute, the DOM Api has a special object dataset to access these (from IE 11 upwards):

element.dataset.value

In case you have a name for your data-attribute like data-cmon-lets-go you can access it using camelcase notation:

element.dataset.cmonLetsGo

Upvotes: 3

Vikash sah
Vikash sah

Reputation: 92

if you use newer jQuery >= 1.4.3 You can use like this.

$(this).data("value");

OR

$(this).data().value;

Upvotes: 3

Scaramouche
Scaramouche

Reputation: 3257

use .children() instead of .filter().

The former will get you the elements inside the form, the latter will filter all elements $('#some-form') will provide.

HIH

EDIT

as pointed out by gaetanoM and connexo, there is also the issue of using element.attr() without the $() which you will need since .attr() is a method of jQuery, not JS

$('#some-form').children(':input').each(function (i, element) {
     console.log(element.value);
     console.log($(element).attr('data-value'));
     //
     // or
     //
     // console.log(element.dataset.value);
})

console.log('end');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='some-form'>
    
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
    
</form>

Upvotes: 3

muasif80
muasif80

Reputation: 6006

In the each loop you are actually in the context of the radio element so you can use $(this).attr('data-value') and it will work. The following is a working code.

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>

    <form id='some-form'>
        <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">Hello

    </form>

</body>
</html>

<script type="text/javascript">
$(document).ready(function(){

   $('#some-form :input').each(function (i, element) {

     console.log(i);
     console.log("element", element);
     console.log($(this).val());
     console.log($(this).attr('data-value'));
   });
});
</script>

Upvotes: 1

Taplar
Taplar

Reputation: 24965

This could also be done with vanilla javascript.

document.querySelectorAll('#some-form input[type="radio"]').forEach(radio => {
  console.log(radio.value, radio.dataset.value);
});
<form id='some-form'>
    <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
</form>

Upvotes: 1

Related Questions