Use asp:HiddenField value in javascript on page load.

Question

Hey there.

I'm trying to use the value of an asp:HiddenField control in javascript after postback and pageload.I tried something like this but it does not work.(the get function works fine but I cant seem to make "hidVal" get the value from the asp:HiddenFIeld)

<script type="text/javascript" language="javascript">

var hidVal=document.getElementById("<% =hidField.ClientID %>").value;

function Get(checbox)
{   

  if(checbox.checked)hidVal += 1;
        else hidVal -= 1;


  document.getElementById("<% =hidField.ClientID %>").value = hidVal.toString();

}

Basicly I'm trying to get the value of a hidden field , increment it on every checked checkbox(using javascript) and reasign the incremented value to the hidden field on every postback. If you have any idea on how to make this work please help.

Thanks for the time.

Answer 1

You should get the hidField value inside the Get function, you have also type coersion problems, since the 'value' property of the input is a string, and you are incrementing directly it without converting it first to number:

function Get(checbox) {   
  var hidField = document.getElementById("<%=hidField.ClientID %>"),//get element
      hidVal = +hidField.value || 0; // get the value and convert it to number,
                                     // set 0 if conversion fails

  if(checbox.checked) {
    hidVal++; 
  } else {
    hidVal--;
  }
  hidField.value = hidVal; // set the value back
}

Answer 2

remember to put the javascript part before the closing tag so when it get's there, the HiddenField is already rendered and can usable.

and, for CMS answer, do not forget to use:

<asp:CheckBox ID="chk" runat="server" onclick="Get();" />

Answer 3

As I understood I have written the following code. please review.

<script type="text/javascript" language="javascript">

    function Get(checbox)
    {
    var hidVal;
    if(document.getElementById("<% =hidField.ClientID %>").value!="")
    {
    hidVal=parseInt(document.getElementById("<% =hidField.ClientID %>").value);
    }
    else 
    hidVal=0;

      if(checbox.checked)hidVal += 1;
            else hidVal -= 1;
            alert(hidVal);
      document.getElementById("<% =hidField.ClientID %>").value = hidVal.toString();

    }

Now I have added the following code in my aspx page:

<div>
        <asp:CheckBox ID="chk1" Text="1" runat="server" onclick="javascript:Get(this);" />
                    <asp:CheckBox ID="chk2" Text="2" runat="server" onclick="javascript:Get(this);" />
                    <asp:CheckBox ID="chk3" Text="3" runat="server" onclick="javascript:Get(this);" />
                    <asp:CheckBox ID="chk4" Text="4" runat="server" onclick="javascript:Get(this);" />
                    <asp:CheckBox ID="chk5" Text="5" runat="server" onclick="javascript:Get(this);" />

                    <asp:HiddenField ID="hidField" runat="server" />
                    <asp:Button ID="btnSubmit" runat="server" Text="Create" OnClick="btnSubmit_Click" />
    <hr/>
      <asp:Label ID="lblHidValue" runat="server"></asp:Label>
   </div>

Now in aspx.cs page_load contains the following:

 lblHidValue.Text ="In page_load "+ hidField.Value;

and the button click event as follows:

protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblHidValue.Text += "<br/>In button click " + hidField.Value;

    }

Please check if these can solve your problem.