How to add data to HTML for javascript to use

Question

I have a dynamically created page with repeated elements, like so:

<input type="file" name="file1">
<input type="file" name="file2">
<input type="file" name="file3">

I would like to add some data to each of these elements for use in JavaScript. Originally I used "spare" attributes that while valid on an input tag were not valid on a file type input tag, eg, size. I have now added it to the class attribute, but have to use a regex to get it out again. Neither of these methods seem very satisfactory, is there a better way?

Yep, you can use jQuery and it's attr property to get/set what you need, api.jquery.com/attr — Bud Damyanov
– Bud Damyanov, Commented May 12, 2014 at 9:33

Kunj · Accepted Answer · 2014-05-12 09:44:32Z

4

Quite often I see data added through attributes that are prefixed with data-, for instance:

<input type="file" name="file1" data-filesize="871">

jQuery even has function to conveniently read that information, for instance like this:

var filesize = $('input[name="file1"]').data('filesize');

And, to write the data, attr can be used:

$('input[name="file1"]').attr("data-filesize", filesize );

Comments

Maurice Perry · Accepted Answer · 2014-05-12 09:33:19Z

1

You can use attributes with a name starting with "data-"

answered May 12, 2014 at 9:33

Maurice Perry

32.8k9 gold badges72 silver badges97 bronze badges

Comments

devqon · Accepted Answer · 2014-05-12 09:33:59Z

1

Use the data attribute: <input data-something="somevalue" />

answered May 12, 2014 at 9:33

devqon

14k2 gold badges32 silver badges46 bronze badges

Comments

Harshal Patil · Accepted Answer · 2014-05-12 09:45:51Z

0

with attribute start with data- you can use your own other name appending to it.

Go through this examples

answered May 12, 2014 at 9:45

Harshal Patil

6,7698 gold badges44 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to add data to HTML for javascript to use

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related