Jquery - Create hidden form element on the fly

Hidden form elements—why and when?

Hidden form elements assist in dealing with invisible data-transfer within forms. These hidden actors store values like user IDs, session tokens, or state management variables, safely out of user's direct reach and yet dutifully sent with the form submission.

Multiplicity is no big deal

If your project demands multiple hidden fields, worry not, jQuery's got you covered. Let's explore how you can append several hidden inputs at once:

var hiddenFields = {
  token: 'csrf_token',
  userId: 'user_id',
  timestamp: 'timestamp'
};

$.each(hiddenFields, function(name, value) {
  $('<input>').attr({
    type: 'hidden',
    name: name,
    value: value
  }).appendTo('form');
});


The .each() function is a jQuery marvel when it comes to handling multiple inputs with reduced code repetition.

Visualising hidden inputs

Defining a dynamic hidden form element in action is like setting up a stealthy smuggling system:

$('<input>').attr({
    type: 'hidden',
    id: 'hidden_tunnel',
    name: 'hidden_treasure',
    value: 'gold_coins'
}).appendTo('form');


And, it's similar to:

Form(🏰): The castle where parties happen.
Hidden Input(🚪): Secret tunnel for special guests.
Value(💰): The gold coins to pay the barkeep.

🏰 + 🚪: Our ordinary castle now has a secret tunnel for💰to pass unchecked!

A helper hand

To avoid code repetition when dealing with multiple hidden inputs, consider defining a bespoke helper function:

function addHidden(inputName, inputValue, $form) {
  $('<input>').attr({
    type: 'hidden',
    name: inputName,
    value: inputValue
  }).appendTo($form);
}

//How to use this magic spell? Here:
addHidden('trackingId', '12345', $('form')); //Adding hidden inputs is a child's play now!


This method ensures reusable, organized and most importantly, effortless handling of dynamic hidden inputs.

Taking the vanilla way

If jQuery is not your cup of tea, fear not! Here's how you can achieve the same with good old vanilla JavaScript:

var input = document.createElement('input');
input.type = 'hidden';
input.name = 'hiddenField';
input.value = 'hiddenValue';
document.querySelector('#formId').appendChild(input); //Who needs jQuery when JavaScript can dance!


The DOM method createElement and appendChild ensure a direct, streamlined experience, boasting efficiency and lesser syntactic sugar.

Troubleshooting common hiccups

In the realm of dynamic forms, beware of the form validation pitfalls and ensure these hidden inputs don't meddle with the expected behaviour. Moreover, keep a watchful eye for naming conflicts and be cautious against inadvertent security breaches from exposed sensitive information via hidden fields.