Selecting Custom html attribute

Question

I have this working, but I am wondering is this normal practice.

<button vacation="2" type="button" class="delete" id="vc-2"><i class="icon-static"></i></button>

I need custom attributes. I made custom html attribute called vacation. I am accessing it via event, something like this:

var vacation = parseInt(e.currentTarget.attributes[0].value); //Zero, since this is the first attribute.

This works, but I am interested is this the best practice? I would like to avoid using HTML5 data- attribute if possible.

Why are you trying to avoid the mechanism put into HTML for exactly this sort of extension and use invalid markup instead? (Hint: Invalid HTML is not best practice). — Quentin, Jun 25 '13 at 14:21
This is exactly why the HTML5 data-* attribute exists.... why not use it? — Andy Brudtkuhl, Jun 25 '13 at 14:22
If you're trying to avoid HTML5 for compatibility reasons, what about using just inner text or a class or some other such built-in mechanism? — Will, Jun 25 '13 at 14:23
I would use a class to denote custom attributes. Or within a form, using a hidden field. If you really want to do this for pre-HTML5 valid markup, please have a look here: http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag — shennan, Jun 25 '13 at 14:24
Could you specify the technical reason you try to avoid the HTML5 standard? While we're talking about 'best practice', it implies 'follow the standard'. — taiansu, Jun 25 '13 at 15:16
possible duplicate of [Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?](http://stackoverflow.com/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts) — Ciro Santilli OurBigBook.com, Jan 31 '14 at 11:00

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

Without using HTML5 data-* attributes, you could do the following...

Markup

<input type="hidden" value="2" id="vc-2-vacation" />
<button type="button" class="delete" id="vc-2"><i class="icon-static"></i></button>

jQuery

$(".delete").click(function() {
 var vacation = ($(this).id + "-vacation").val();
}

Update: At first I gave the answer to use data-* attributes in HTML5. After being downvoted for providing the right answer but not exactly what the OP was asking I changed my answer to the less than ideal method above, which while works I would never use myself...

Below, you'll find the "best practices" answer which would be to use the data-* attribute of HTML5.

Ideal Solution

Markup

<button data-vacation="2" class="delete" id="vc-2"><i class="icon-static"></i></button>

jQuery

$(".delete").on("click", function() { 
  var vacation = $(this).data("vacation");
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 25 '13 at 14:23

Andy Brudtkuhl

3,652
3
27
31

1

Dear downvoters - I changed my answer to fit OPs question - even though using HTML5 data-* attribute is the best solution – Andy Brudtkuhl Jun 25 '13 at 14:28
1

+1 (I wasn't a downvoter) - I was downvoted for suggesting the same. I agree with you, there's absolutely no reason to avoid the `data-*` - it's valid and compatible with every browser. – Joe Jun 25 '13 at 14:31
I wasn't a downvoter. I wasn't an upvoter though either. Here's why. The answer you provided worked and fit the awkard no `data-` attributes guideline laid out by the OP. Therefore, I do not think it should be downvoted. However, that being said, the OP also asked about "best practices". The best practice would be to use the `data-` attributes as that as what they are designed to do (and what @Joe laid out in a previous deleted answer). This is a "work around" and therefore not the best practice. – War10ck Jun 25 '13 at 14:42
1

@War10ck - I completely agree. Both me and Andy posted answers suggesting this but were heavily downvoted. Some users thought that `data-*` should be avoided just because the OP said so despite it being the correct approach. – Joe Jun 25 '13 at 15:02
1

@Andy Apologies, but I was a downvoter caught in the following trap, a mistake I won't make again. Upvoted your comment and spreading the word: http://meta.stackexchange.com/questions/23701/why-cant-i-change-my-vote-if-the-post-has-been-edited-during-the-initial-5mn-gr – Will Jun 25 '13 at 15:31
1

Thank you all for the comments. @War10ck I've edited my answer to explicitly answer the OP while providing the "Best Practices" solution of using HTML5 data-* attributes. – Andy Brudtkuhl Jun 25 '13 at 21:12
@AndyBrudtkuhl I hadn't casted a vote yet, but now I have. +1 solid solution buddy. My apologies if I seemed a little difficult to please. That wasn't my intention. I was just hoping for a thorough solution that details what the OP could do and what the OP should do. This accomplishes both. Well said. +1 – War10ck Jun 25 '13 at 21:48

RutledgePaulV · Answer 2 · 2013-06-25T14:45:29.150

0

it's considered bad markup. Try to avoid it. If necessary use a hidden field and assign to the value attribute. Why are you against the HTML5 data attribute? That's what it was made for.

EDIT To handle events you will need to use a click handler.

Your markup will look something like this:

<button type="button" class="delete" id="vc-2" data-vacation="2"> </button>

And your js/jquery will look like:

var button = $('#vc-2');
button.click(function(){ alert(button.data('vacation')); }); //click handler

edited Jun 25 '13 at 14:45

answered Jun 25 '13 at 14:22

RutledgePaulV

2,568
3
24
47

If I wanted to use html5 data attribute, then how do I access it via event? I have function that accepts e. So, e.currentTarget...... what do I put there? – Emilly Jun 25 '13 at 14:38
@Emilly An event has to have a handler. Therefore, inside the `event` function you can use `$(this)` to get the current element and either `.attr(attributename)` or the more appropriate `.data(attributename)`... – War10ck Jun 25 '13 at 14:41

score 0 · Answer 3 · answered Jun 25 '13 at 14:44

0

If your goal is to avoid HTML5, then the best practice would be to use a class:

<button type="button" class="delete vacation-2" id="vc-2"><i class="icon-static"></i>  </button>

You can get the value using Regex:

 $('button').on('click', function(){
       var classList = $(this).attr('class');
       var patt = /vacation-([0-9]{1,})/;
       var vacation = classList.replace(patt, function(a,b){
                          return b;
                      });
       $(this).html(vacation);
 });

WORKING EXAMPLE

answered Jun 25 '13 at 14:44

ExceptionLimeCat

6,191
6
44
77

Like _Andy's_ answer below, I won't downvote you because your solution works. That being said, I disagree with using classes for this. The OP should come to grips with the fact that the `data-` attributes were designed for this and are therefore best practice, pure and simple. No amount of "work arounds" will qualify as best practice. – War10ck Jun 25 '13 at 14:46
I agree `data-` attribute is the best route to go but I have to assume there is some reason why they aren't able to use HTML5 features. – ExceptionLimeCat Jun 25 '13 at 14:48
@ExceptionLimeCat Agreed which is why I won't downvote. It's a perfect legitimate answer. IMO the OP is being unreasonable with the guidelines and hasn't stipulated a reason for them. – War10ck Jun 25 '13 at 14:49

Selecting Custom html attribute

3 Answers3

Ideal Solution