Not getting hiddenfield value in javascript

Question

I have an issue in getting the hidden field values, which is been set in page load at code behind. Problem is when i try to get that set values in javascript its giving undefined or null. Not able to get the values which was set in page load at code behind.

//cs code is like this
protected async void Page_Load(object sender, EventArgs e)
{

HiddenField_alt_edit.Value = "[{"unitid":"3072","unit_nameeng":"BOTTLE","purchcost":"2.000","salrate":"4.000","avgcost":"2.000","factor":"2"},{"unitid":"3073","unit_nameeng":"PKT","purchcost":"10.000","salrate":"20.000","avgcost":"10.000","factor":"10"}]";

ClientScriptManager script = Page.ClientScript;
                            script.RegisterClientScriptBlock(this.GetType(), "Alert", "<script type=text/javascript>addAlternativeRowWithData();</script>");

}

//aspx page declaration goes like this. Also i am using a master page.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:HiddenField ID="HiddenField_alt_edit" runat="server"  Value="i am on."/>

</asp:Content>

// javascript file code goes like this
function addAlternativeRowWithData(mode) 
{

    alert("test");
    var idvalue = $("#HiddenField_alt_edit").val();
    alert(idvalue);
    alert($nonconfli('#ContentPlaceHolder1_HiddenField_alt_edit').val());
    var myHidden = document.getElementById('<%= HiddenField_alt_edit.ClientID %>').value;
    alert(myHidden);
    var json_string = $nonconfli('#ContentPlaceHolder1_HiddenField_alt_edit').val();
    var arr_from_json = JSON.parse(json_string);
    alert("test 2");
    alert(arr_from_json);
}

Answer 1

The id generated at client side can differ as the Hidden field is server side control in your code as you have set runat="server" .

There are two ways normally. Either make the ClientIDMode static or use the instance in form to get client side id.

Like:

<asp:HiddenField ID="HiddenField_alt_edit" ClientIDMode="static" runat="server"  
                 Value="i am on."/>

and then following should work:

var idvalue = $("#HiddenField_alt_edit.ClientID").val();

or in client side code you need to get id like below:

var idvalue = $("#<%= HiddenField_alt_edit.ClientID %>").val();

Answer 2

Change:
HiddenField_alt_edit.Value = [{"unitid":"3072","unit_nameeng":"BOTTLE","purchcost":"2.000","salrate":"4.000","avgcost":"2.000","factor":"2"},{"unitid":"3073","unit_nameeng":"PKT","purchcost":"10.000","salrate":"20.000","avgcost":"10.000","factor":"10"}]

To this:
HiddenField_alt_edit.Value = " [{'unitid':'3072','unit_nameeng':'BOTTLE','purchcost':'2.000','salrate':'4.000','avgcost':'2.000','factor':'2'},{'unitid':'3073','unit_nameeng':'PKT','purchcost':'10.000','salrate':'20.000','avgcost':'10.000','factor':'10'}]"

Then, add this:
<asp:HiddenField ID="HiddenField_alt_edit" runat="server" Value="i am on." ClientIDMode="Static" />

In you js, you have to put this:

 const value = document.getElementById('HiddenField_alt_edit').value const jsonString = JSON.stringify(value) const json = JSON.parse(jsonString) console.log(json)

 <input hidden id="HiddenField_alt_edit" value="[{'unitid':'3072','unit_nameeng':'BOTTLE','purchcost':'2.000','salrate':'4.000','avgcost':'2.000','factor':'2'},{'unitid':'3073','unit_nameeng':'PKT','purchcost':'10.000','salrate':'20.000','avgcost':'10.000','factor':'10'}]">