Follow the code:
Html5:
<button id="btnSave" data-id="1">Save Click</button>
JS:
$(document).ready(function() {
$("#btnSave").click(function(e) {
AlertSave($(this).data("id"));
});
});
function AlertSave(a) {
alert(a);
}
If you prefer in jsfiddle: link
I want to keep the data-id value so that it does not change in f12 mode (element inspector).
Any solution?
Preventing data from being changed has no way. It may not even be a browser that accesses your site, it can be a bot, it can be a script in some programming language created to pretend to be a browser, but that completely ignores JavaScript, and whose purpose is to block your site. In short, you can have absolutely no illusions of control over what happens on the other side of the network cable.
If you want to save a value on a page, and you want this value to be sent back unchanged, you need to digitally sign that value on the server, save it with the signature on the page, and when you receive the value back on the page check the digital signature to determine whether or not it has changed. This way you can not prevent the value from being changed, but you have the guarantee (of the digital signature algorithm) that you will find out if the data has changed.
This is one of the ways the Django web framework uses to securely cook cookies.