How to keep leading zeros on using custom 'data' attribute

Question

I have a simple html page to test custom 'data' attribute that is used for HTML check boxes to hold 'id' data. However, on retrieving values of those 'id' against selected check boxes, I lost leading zeros in those data-id attribute. For example, one specific check box is defined as:

<input type="checkbox" data-id="00372" >

When I retrieve the value of its 'id', the returned value is 372 instead of 00372. Please help.

The code details of my HTML page:

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript">

            function buttonCollectId_Click()
            {               
                $('input[type=checkbox]:checked').each(function(index,value){
                        console.log('Selected:' + $(this).data('id'));
                });
            }

    </script>
</head>
<body>
    <table>
    <tr>
       <td>Employee Id:</td><td>02813</td><td><input type="checkbox" data-id="02813" ></td>
    </tr>
    <tr>
       <td>Employee Id:</td><td>46522</td><td><input type="checkbox" data-id="46522" ></td>
    </tr>
    <tr>
       <td>Employee Id:</td><td>00372</td><td><input type="checkbox" data-id="00372" ></td>
    </tr>
    <tr>
        <td colspan="3"><input id="buttonCollectId" type="button" value="Collect Ids" onclick="buttonCollectId_Click();"></td>
    </tr>
    </table>

</body>
</html>

Are you looking to have all the attributes have a consistent length? Will that length be flexible or static (ie 5 digits)? — oomlaut, Apr 26 '13 at 19:30
If you are looking to simply add leading zeroes, this has already been answered: http://stackoverflow.com/questions/2998784/how-to-output-integers-with-leading-zeros-in-javascript — oomlaut, Apr 26 '13 at 19:31
The length of the data-id attribute is arbitrary, and may or may not have leading zeros. The data for those attributes actually comes from a legacy database (bad design though), but here I do simplify those attributes with hard-coded values so they can be seen by readers in this forum. — Thomas.Benz, Apr 29 '13 at 15:58

score 4 · Accepted Answer · answered Apr 26 '13 at 19:30

4

Use .attr('data-id'):

    function buttonCollectId_Click()
    {               
        $('input[type=checkbox]:checked').each(function(index,value){
                console.log('Selected:' + $(this).attr('data-id'));
        });
    }

codepen

answered Apr 26 '13 at 19:30

Nick Tomlin

28,402
11
61
90

Andbdrew · Answer 2 · 2013-04-26T19:39:39.160

As Nick suggests, you should use the .attr() method if you want the string representation of the data attribute in question.

As the jQuery docs state ( http://api.jquery.com/data/#data-key ):

"Every attempt is made to convert the string to a JavaScript value 
(this includes booleans, numbers, objects, arrays, and null) otherwise
it is left as a string. To retrieve the value's attribute as a string
without any attempt to convert it, use the attr() method."

The .data() method is meant to store a serialization of (more or less) arbitrary data associated with an html element. It is meant to conform to the HTML5 data attribute specification, which can be found at http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

How to keep leading zeros on using custom 'data' attribute

2 Answers2