Home > Categories > Forms > Add hidden field to a form

Add hidden field to a form

 

Hidden Fields allow you to send additional information with a submitted form that don't necessarily require a user to "fill them out."

Here are some examples of how hidden fields can be used:

  • Let's say a customer is filling out a form that allows them to purchase a product. You can embed the stock number or ID of the product in a hidden field so that you know which product they are trying to purchase.
  • PayPal "add to cart" buttons are actually form buttons with lots of hidden fields. Their button wizard allows you to define those hidden field values, such as the price of the product, the name of the product, and your PayPal user ID. When someone clicks on the "add to cart" button, the form submits itself to PayPal's web site, and based on the values of the hidden fields, PayPal is able to display a shopping cart page to the user with the product they want to purchase.

Using hidden fields is usually an advanced topic, as it requires you to know how to script a page that accepts and manipulates the submitted information.

Sometimes it will be necessary to add a hidden field add runtime.
Therefor you can use the method below.

Javascript code

function addHiddenField(form, name, value){
	   var el = document.createElement("input");
	   el.type = "hidden";
	   el.name = name;
	   el.value = value;
	   form.appendChild(el);
}

Performance tip: When you are working with large forms, it's sometimes better to add all the necessary values to a second form as hidden fields. This way you will only submit the fields that are important for the application to process.

Add a comment...