retrieving data attribute value

Question

User2096382003 posted

I am trying to get a data attribute value from an input collection with jquery but getting an undefined value....

my html is

<div class="item-content-type">
    <span>
        <input class="hidden" type="hidden" data-id="0">
        <input class="hidden" type="hidden" data-jobid="324234242">    
        <input class="hidden" type="hidden" data-documenturl="https://sd-docs/docs/1/8/_layouts/15/Doc.aspx?ID=1">          
    </span>
</div>

my jquery trying to get the document-url value is

documentUrl = $(e).find(".item-content-type span input").attr('data-documenturl');

the list of inputs are being returned when I debug in chrome but the attribute retrieval part isn't specifically getting this value (returns undefined)

Answer 1

User-2146987983 posted

See below fiddle:

https://jsfiddle.net/xpvt214o/692262/

Answer 2

User-369506445 posted

hi

because when you use to find, it finds all elements, you have to use a <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="5" data-gr-id="5">foreach</g> statement

please try below code

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
       $(function () {
          
           $('.item-content-type input[type=hidden]').each(function () {
               if ($(this).is('[data-documenturl]'))
               {
                   alert($(this).attr('data-documenturl'));
               }
               
           });

       });
   </script>

EDIT : 

DEMO

Answer 3

User-1171043462 posted

This way

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <div class="item-content-type">
        <span>
            <input class="hidden" type="hidden" data-id="0">
            <input class="hidden" type="hidden" data-jobid="324234242">
            <input class="hidden" type="hidden" data-documenturl="https://sd-docs/docs/1/8/_layouts/15/Doc.aspx?ID=1">
        </span>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".item-content-type").click(function () {
                var documenturl = $(this).find("input:eq(2)").attr("data-documenturl");
                alert(documenturl);
            });
        });
    </script>

Answer 4

User-474980206 posted

I am trying to get a data attribute value from an input collection with jquery but getting an undefined value....

my html is

<div class="item-content-type">
    <span>
        <input class="hidden" type="hidden" data-id="0">
        <input class="hidden" type="hidden" data-jobid="324234242">    
        <input class="hidden" type="hidden" data-documenturl="https://sd-docs/docs/1/8/_layouts/15/Doc.aspx?ID=1">          
    </span>
</div>

my jquery trying to get the document-url value is

documentUrl = $(e).find(".item-content-type span input").attr('data-documenturl');

the list of inputs are being returned when I debug in chrome but the attribute retrieval part isn't specifically getting this value (returns undefined)

$(e).find(".item-content-type span input")

return a collection of 3 inputs, but .attr(), returns the attribute value of the first element (data-id) in the collection. you want:

documentUrl = $(e).find(".item-content-type span input[data-documenturl]).attr('data-documenturl');

which only includes inputs inputs with the desired attribute attribute.