CODEWITHSUNDEEP
jquerycustom-attributeseach
coffeemonitor
coffeemonitor

Reputation: 13120

jQuery - Looping through elements with specific Attribute

I know how to loop through the inputs below, searching for the ones with a specific class of "testers"

And here's how I do that:

<input type='text' name='firstname' class="testing" value='John'>
<input type='text' name='lastname' class="testing" value='Smith'>

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

 $.each($('.testing'), function() { 
   console.log($(this).val());
 });

});
</script>

It outputs the "John", "Smith" as expected.

I want to not use the class="testing" and use a custom attribute: testdata="John".

So this is what I'd be doing: 

<input type='text' name='firstname' testdata='John'>
<input type='text' name='lastname' testdata='Smith'>

My goal is to auto-populate the values of each input with whatever is inside testdata, but only those detected to have the testdata attribute.

This was my failed attempt at using the $.each loop:

$.each($('input').attr('testdata'), function() {
  var testdata = $(this).attr('testdata');
  $(this).val(testdata);    
});

I get this response: Uncaught TypeError: Cannot read property 'length' of undefined Can anyone see what I'm doing wrong?

Upvotes: 22

Views: 59143

Answers (4)

qwerty
qwerty

Reputation: 2512

For iterating over all elements with testdata attribute and assigning form fields with what their attribute holds try 

$("[testdata]").each(function(){
    $(this).val($(this).attr('testdata'))
})

[works with all elements i guess]

Upvotes: 2

Gouda Elalfy
Gouda Elalfy

Reputation: 7023

if you want to select inputs with specific attribute name and you have these html inputs:

<input type='text' name='user1' fieldname="user" class="testing" value='John1'>
<input type='text' name='user2' fieldname="user" class="testing" value='Smith1'>
<input type='text' name='admin1' fieldname="admin" class="testing" value='John2'>
<input type='text' name='admin2' fieldname="admin" class="testing" value='Smith2'>

you can loop on admins only like this:

$("input[fieldname='admin']").each(function(){
    alert($(this).val());
});

by the same way, you can loop for users only:

$("input[fieldname='user']").each(function(){
    alert($(this).val());
});

Upvotes: 3

Joe
Joe

Reputation: 15528

Here it is using the HTML5 data-* attribute:

HTML:

<input type='text' name='firstname' data-test='John'>
<input type='text' name='lastname' data-test='Smith'>

JS:

$("input[data-test]").each(function(){
    var testdata = $(this).data('test');
    $(this).val(testdata);
});

Here it is working: http://jsfiddle.net/SFVYw/

An even shorter way of doing it would be using this JS:

$("input[data-test]").val(function(){
    return $(this).data('test');
});

Internally it's doing the same as the other JS code but it's just a little more concise.

Upvotes: 42

Adil Shaikh
Adil Shaikh

Reputation: 44740

$("input[testdata]").each(function(){
  alert($(this).attr('testdata'));
 // do your stuff
});

working demo

Upvotes: 7

Related Questions