jQuery - Get input attribute and add it after the input as a text

Question

Here is my HTML code:

<div class="list">
    <input checked="checked" data-blacklist="[392,340,393]" data-parentarticleid="249" data-price="0" data-price-included="1" data-string-value="2x500GB SATA2" id="article_249" name="hardwareSetHD" type="radio" value="249"><label for="article_249">2x500GB SATA2 <span></span> </label>
</div>
<div class="list">
    <input checked="checked" data-blacklist="[392,340,393]" data-parentarticleid="249" data-price="10" data-price-included="1" data-string-value="4x500GB SATA2" id="article_241" name="hardwareSetHD" type="radio" value="241"><label for="article_241">2x500GB SATA2 <span></span> </label>
</div>
<div class="list">
    <input checked="checked" data-blacklist="[392,340,393]" data-parentarticleid="242" data-price="20" data-price-included="1" data-string-value="8x500GB SATA2" id="article_242" name="hardwareSetHD" type="radio" value="242"><label for="article_242">8x500GB SATA2 <span></span> </label>
</div>

What i want?

When the document is loaded to ADD in <span></span> after the input radio, the text holded in data-price.

Here is what i tried:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input[type=radio][name=hardwareSetRAM]').this(text($(this).attr( "data-price" )));
});
</script>

So how can i get the data-price from every input with name hardwareSetHD and add it as a text after the input ?

Thanks in advance!

You shouldn't have more than one input with the same name, otherwise when you post the form it will be messed up — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Nov 13, 2015 at 18:46
Well you can... It's not illegal. It will just produce unexpected results. Perhaps that is what the OP wants... — Chris
– Chris, Commented Nov 13, 2015 at 18:47
With a radio button, you typically want exactly that, the same name... — Chris
– Chris, Commented Nov 13, 2015 at 18:48

Chris · Accepted Answer · 2015-11-13 18:50:17Z

2

You need to iterate over each row, grab the value of price and update the span tag.

$(document).ready(function($) {

    $('.list').each(function() {

        var inp = $(this).find('input[type=radio]'),
            span = $(this).find('span');

        var price = inp.data('price');

        span.text( price );

    });

});

jQuery.data()

answered Nov 13, 2015 at 18:50

Chris

4,8304 gold badges48 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery - Get input attribute and add it after the input as a text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related