HTML DOM Input Hidden value Property

HTML Web Development Front End Technology

The HTML DOM input hidden value property returns and modify the content of value attribute of input field of type=”hidden” in an HTML document.

Syntax

Following is the syntax −

1. Returning value

object.value

2. Modifying value

object.value=”text”

Example

Let us see an example of HTML DOM input hidden value property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#F19A3E;
      color:#fff;
   }
   .btn{
      background-color:#3C787E;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      color:#fff;
      font-size:1.2rem;
      font-weight:600;
   }
</style>
</head>
<body>
<h1>DOM Hidden value Property Example</h1>
Here is hidden input field:
<input type="hidden" class="input-field" value="Hi! I was previous value of hidden input">
<button onclick="getType()" class="btn">Click to change value</button>
<div class="show"></div>
<script>
   function getType() {
      var inputField = document.querySelector(".input-field");
      var msgDiv = document.querySelector(".show");
      msgDiv.innerHTML = "" + inputField.value + "";
      inputField.value = "Hello! I'm new value of hidden input"
      msgDiv.innerHTML +="" + inputField.value + "";
   }
</script>
</body>
</html>