How to get hidden field value in JavaScript

In Javascript, there are two ways to get the value of a HiddenField:

  1. By control Id
  2. By control Name

1- Get HiddenField value in JavaScript by Control ID

This is the simplest way to get the HiddenFieldvalue by using the JavaScript function getElementById

document.getElementById('HiddenFieldId').value;

2- Get HiddenField value in JavaScript by Control Name

Another way to get the value of a Hidden field is to use the JavaScript function getElementById

document.getElementsByName("HiddenFieldName")[0].value;

Example

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Get HiddenField Value</title>
</head>

<body>
    <input type=hidden id="hfID" name="hfName" value="Welcome to CodingPanel.com!" />
    <p Id="MyLabel"></p>
    <button value="Get Value" onclick=" GetValue()"> Click </button>
</body>
</html>

Javascript

      function GetValue() 
    {
      var hiddenFiledID;
      var hiddenFiledName;
      HiddenFiledID = document.getElementById('hfID').value;
      HiddenFiledName = document.getElementsByName("hfName")[0].value;
      document.getElementById('MyLabel').innerHTML += 'ById: ' + HiddenFiledID;
      document.getElementById('MyLabel').innerHTML += '<br> ';
      document.getElementById('MyLabel').innerHTML += 'ByName: ' + HiddenFiledName;
    }

Output

Leave a Reply

Your email address will not be published. Required fields are marked *