Better approach than hidden field to store data in html

Question

I'd like to know if a better approach exists to store data in html content.
At the moment I got some values stored in my html file using hidden field. These values are generated by code behind.

Html:

<input type="hidden" id="hid1" value="generatedValue1" />
<input type="hidden" id="hid2" value="generatedValue2" />

And therefore I get those values on client side using jquery, in order to pass them to an ajax request.

JQuery

$.ajax({
  data:{
     var1 : $('#hid1').val(),
     var2 : $('#hid2').val()
  }
);

So is this the correct way to do this, or does it exist a smoother solution to achieve the same result? Since I don't need these values to be posted on page submit the input hiddenis probably gross.

Answer 1

What I usually do is adding the values as data- attributes to the html form:

<form data-field1="generatedValue1" data-field2="generatedValue2">
...
</form>

And then, retrieve them with jQuery:

... 
$form = $( my_selector_to_take_the_form );

data:{
     var1 : $('form').attr('data-field1'),
     var2 : $('form').attr('data-field1')
  }

With this, you won't post any hidden field