How to prevent google chrome from caching my inputs, esp hidden ones when user click back?

Question

i have an asp.net mvc app which have quite a few hidden inputs to keep values around and formatting their names so that i can use the Model binding later when i submit the form.

i stumble into a weird bug with chrome which i don't have with IE or Firefox when the user submits the form and click on the back button, i find that chrome will keep my hidden input values as well.

this whole chunk is generated via javascript hence i believe chrome is caching this.

function addProductRow(productId, productName) {

    if (productName != "") {



        //use guid to ensure that the row never repeats
        var guid = $.Guid.New();

        var temp = parseFloat($(".tboProductCount").val());

        //need the span to workaround for chrome
        var szHTML = "<tr valign=\"top\" id=\"productRow\"><td class=\"productIdCol\"><input type=\"hidden\" id=productRegsID" + temp + "\" name=\"productRegs[" + temp + "].productId\" value=\"" + productId + "\"/>"
          + "<span id=\"spanProdID" + temp + "\" name=\"spanProdID" + temp + "\" >" + productId + "</span>"
          + "</td>"
          //+ "<td><input type=\"text\" id=\"productRegName\" name=\"productRegs[" + temp + "].productName\" value=\"" + productName + "\" class=\"productRegName\" size=\"50\" readonly=\"readonly\"/></td>"
          + "<td><span id=\"productRegName\" name=\"productRegs[" + temp + "].productName\" class=\"productRegName\">"+ productName + "<\span></td>"
          + "<td id=\"" + guid + "\" class=\"productrowguid\" \>"
          + "<input type=\"text\" size=\"20\" id=\"productSerialNo" + temp + "\" name=\"productRegs[" + temp + "].serialNo\" value=\"" + "\" class=\"productSerialNo\" maxlength=\"18\" />"
          + "<a class=\"fancybox\" id=\"btnImgSerialNo" + temp + "\" href=\"#divSerialNo" + temp + "\"><img class=\"btnImgSerialNo\" src=\"Images/landing_14.gif\" /></a>"
          + "<span id=\"snFlag" + temp + "\" class=\"redWarning\"></span></td>"
          + "<td><input type=\"text\" id=\"productRegDate" + temp + "\" name=\"productRegs[" + temp + "].PurchaseDate\" readonly=\"readonly\" />"
          + "<span id=\"snRegDate" + temp + "\" class=\"redWarning\"></span></td>"
          + "<td align=\"center\"><img style=\"cursor:pointer\" id=\"btnImgDelete\" src=\"Images/btn_remove.gif\" onclick=\"javascript:removeProductRow('" + guid + "')\" /><div style=\"display:none;\"><div id=\"divSerialNo" + temp + "\" style=\"font-family:verdana;font-size:11px;width:600px\">" + serialnumbergeneral + "<br /><br />" + getSNImageByCategory(productId) + "</div></div></td>"
          + "</tr>";

        $(".ProductRegistrationTable").append(szHTML);
        $("a.fancybox").fancybox();

        //initialization
        $("#productRegDate" + temp).datepicker({
            minDate: new Date(1996, 1 - 1, 1),
            maxDate: 0
        });

        //sanity check
        //s7test
        alert('1 '+$("#spanProdID" + temp));
        alert('2 '+$("#productRegsID" + temp));


} //end function addNewProductRow

i need the id to be refreshed when the user select a new product, but putting another span tag beside it shows that the span will have the new id will the hidden input will still have the previous id.

is there an elegant way to workaround this issue?

thanks

Answer 1

Moved here after reading @pruts comment ;)

my boss found the answer, it was a simple autocomplete="off" added to the input attributes, although vwd will flag it as an error :)