• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Set Hidden Field Value In JavaScript

Set Hidden Field Value In JavaScript

July 19, 2022 Leave a Comment

We can set a hidden field value in a form in JavaScript by changing the type property of the field with the help of the getElementById() method.

document.getElementById("someField").type = "hidden";

The above code would change the property type to hidden.

Let’s take a look at an example below:


Let’s say we have the following HTML form:

<form>
  <label id="label-name" for="fname">Full Name:</label>
  <input type="text" id="fname" name="fname">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <button type="submit" value="Submit">Submit</button>
</form>

As you can see in the code above, we have two simple text input fields.

If we wanted to hide the input field for Full Name, we would use the following JavaScript code:

document.getElementById("fname").type = "hidden";

It can be very useful to hide form fields from the user. Just note that when a form field has the type of hidden, it will not be able to be seen on the webpage by the user. However, the user could still access the information in the hidden field with the use of a browser inspector that most browsers have. So you should make sure not to store any data in the hidden field that you do not want someone to have access to.

Example of Setting an Input Field Value to Hidden In JavaScript

In this simple example, we will just have a standard HTML form. We will provide the HTML code for it and let the user enter a name and submit the form. The form will not have any backend connected to it, so when you submit the form, it should just refresh the page and put the name variable you entered in the URL.

<form>
  <label for="fname">What is Your Name?</label>
  <input type="text" id="fname" name="fname">
  <input type="text" id="email" name="email">
  <button type="submit" value="Submit">Submit</button>
</form>

The form you will see will only show a name field, its label, and a submit button. But there is also a hidden email field. We have added JavaScript code to this page to hide the field right away.

Here is that JavaScript code:

document.getElementById("email").type = "hidden";

Here is the form for you to see with the hidden email field:





And here is the Full Code and JavaScript:

<form>
  <label for="fname">What is Your Name?</label>
  <input type="text" id="fname" name="fname">
  <input type="text" id="email" name="email">
  <button type="submit" value="Submit">Submit</button>
</form>

<script>

document.getElementById("email").type = "hidden";

</script>

Hopefully this article has been useful for you to understand how to set a hidden field value in JavaScript.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Show a Div
  • 2.  Using JavaScript to get Textarea Value
  • 3.  JavaScript toFixed – How to Convert a Number to a String
  • 4.  Using JavaScript to Convert a String to Uppercase
  • 5.  Using JavaScript to Get New Date Format in dd mm yy
  • 6.  Using JavaScript to Disable a Button
  • 7.  Using JavaScript to Get Radio Button Value
  • 8.  How to Remove All Numbers From String in JavaScript
  • 9.  Create Array of Zeros in JavaScript
  • 10.  Using JavaScript to Replace a Character at an Index

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy