Question

We have a ASP.net MVC 3 website.We had to store many values in hidden fields on client side that are required to be posted later on using AJAX. For some reason i’ve been using hidden div tags instead of hidden input fields believing it has some performance improvement.

<style>
.displaynone { display : none }
</style>

<div id="fld1" class="displaynone">Product Name</div>
<div id="fld2" class="displaynone">123 $</div>
<div id="fld3" class="displaynone">Catalog</div>

Any suggestions on what is the correct/best way ?

UPDATE:
Although i got my answer – semantically hidden fields are correct, adding details to get some more thoughts.

We have list of N number of items per page and each item has some information displayed on UI.Depending upon user action we have to add all data for selected item into another database table. Since we already have most of the data on UI, we decided to put few additional once as hidden fields per item and POSTed all the data instead of fetching it again from DB.

Point1-We could have made one FORM per item having all data required to be POSTed, but we used common Javascript function to POST data for item selected by user.

var fld1Val = $('fld1' + itemNo).text();

Point2-So we have set of hidden div tags (as given above) per item outside of FORM.

1. @darin-dimitrov : If we have many items per page, does one FORM per item with different
   id is better than common function to POST data using AJAX ?

2. @awrigley : If hidden input tags don’t have any meaning (semantic) outside of FORM, are they still better choice over hidden div in my case ?

Now

Answer 1

Hidden fields seem more semantically correct. You could simply serialize the entire form with a single $('#someForm').serialize() call and send it to the server:

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" }))
{
    @Html.HiddenFor(x => x.ProductName)
    @Html.HiddenFor(x => x.Price)
    @Html.HiddenFor(x => x.Catalog)
}

and then:

var form = $('#myForm');
$.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    success: function(result) {
        // TODO: do something with the results sent by the server
    }
});