Can I add custom attributes to button html. Will it work in all browsers

Question

<button id="save" custom-field="false">

Can I define my own custom attribute for button markup like stated above? Will it work on all browsers?

Basically, the problem I have is that the above save button redirects to an AJAX call, which, if successful, then redirects to some other page. I have added an alert on window.onbeforeunload. I don't want this alert to pop up when the redirect is due to successful ajax call on click of the save button.

So, the above fix is that on successful ajax, I set the custom-field to true and in my window.onbeforeunload code I alert only if custom-field false.

Answer 1

Yes you can use jquery .data for adding custom attribute.

It can be used to add any custom arbitrary data

<button id="save" data-myAttribute="myAttribute">

You can retrieve it using

$( "#save" ).data( "myAttribute" ); // myAttribute

or using javascript

document.getElementById('save').setAttribute('mydata','myData');

retrieve it using

document.getElementById('save').getAttribute('mydata');

Answer 2

Yes you can add custom field in any element and access it like below when need

<button id="save" data-field="false">

    var custFieldValue=$('#save').attr('data-field');

Answer 3

you can use data-attribute .

For Eg:

<button id="save" data-field="false">

Read more about data-attribute

You can easily retrieve the data attribute value in jquery using .data() or .attr('data-field')