How to get data-value from radio input using jquery?
Question
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?
5 answers
solution1
3 ACCPTED 2018-04-11 16:46:05
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>
solution2
3 2018-04-11 16:46:40
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
solution3
3 2018-04-11 17:07:41
if you use newer jQuery >= 1.4.3 You can use like this.
$(this).data("value");
OR
$(this).data().value;
solution4
1 2018-04-11 16:49:56
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>
solution5
1 2018-04-11 16:55:19
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.