locked
retrieving data attribute value RRS feed

  • 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)

    Tuesday, August 28, 2018 9:22 AM

All replies

  • User-2146987983 posted

    See below fiddle:

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

    Tuesday, August 28, 2018 9:48 AM
  • 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

    Tuesday, August 28, 2018 9:50 AM
  • 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>

    Tuesday, August 28, 2018 11:44 AM
  • 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.

     

    Tuesday, August 28, 2018 3:04 PM