While creating a form or a questionnaire, there can be a requirement to allocate a user-input value to a specific field. For instance, appending confidential entries, i.e., a password or an encoded value in order to utilize them. In such cases, setting the value of a hidden input element through JavaScript assists in keeping the data safe and secure.
This blog will discuss the procedure to set the value of a hidden input field through JavaScript
How to Set the Value of a Hidden Input Field through JavaScript?
To set the value of the hidden input field through JavaScript, apply the below-stated approaches:
Method 1: Set the Value of the Hidden Element Via innerHTML Property
The “innerHTML” property returns the element’s HTML content. This property can be utilized to set and append the user-defined value to the allocated hidden input field.
Syntax:
In the above syntax, “element” refers to the element that needs to be appended with the “text” value.
Example
Let‘s go through the below-stated example:
<script>
let myInput = prompt("Please enter your Text", "");
if (myInput != null) {
let x = document.getElementById("hiddenElement").innerHTML = "The value of hidden element is: " + myInput;
alert(x)
}
</script>
In the above code block:
- Firstly, create the input field having the stated attributes.
- The “type” attribute with the value “hidden” signifies that it is a hidden field.
- After that, the “prompt” dialogue box takes a value from the user.
- Now, apply a check upon the user-defined value such that it is not “null” using the “if” condition.
- Lastly, access the hidden input field by its “id” using the “getElementById()” method and set the user-defined value to it via the “innerHTML” property.
- Finally, display the appended value via an alert.
Output
As observed, the user-input value is appended to the hidden input field.
Method 2: Set the Value of the Hidden Element Using jQuery Approach
In this approach, jQuery’s “val()” method will be utilized to allocate the value of the visible input text field to the hidden input field.
Example
Let’s overview the following code:
<input id="myInput" value="" type="text"/><br>
<input id="hiddenElement" type="hidden" value="" />
<br>
<button id="btnShow">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$("#btnShow").on('click', function () {
let inputValue = $("#myInput").val();
$("#hiddenElement").val(inputValue);
alert('The value of hidden Element is : ' + inputValue);
});
</script>
In the above lines of code:
- Firstly, include an input text field having the stated attributes.
- Likewise, allocate another hidden input field, as evident from its “type” attribute.
- Added <button> tag having a specific “id” attribute.
- After that, include the jQuery library with the help of the “src” attribute in the “<script>” tag.
- In the JS code, access the created button and associate the “on()” method with it to execute the function on the button click.
- In the function definition, access the visible input “text” field and fetch its value using the “val()” method.
- In the next step, the fetched value will be allocated to the hidden input “text” field via the “val()” method.
- Finally, display the resultant value allocated to the “hidden input field” via an alert.
Output
In the above output, it can be seen that the value of the visible input “text” field is allocated to the “hidden” input field.
Conclusion
To set the value of a hidden input field through JavaScript, apply the “innerHTML” property or the jQuery “val()” method. The innerHTML property can be used to apply the desired functionality by appending the user-defined value. The val() method can be applied to allocate the value of the visible input text field to the hidden input field This blog discussed the procedure to set the value of a hidden input field through JavaScript.
