JavaScript Coder

How to set the value of a form field using Javascript PII

javascript form field javascript form value javascript set form field text box

This is in continuation of the article: set the value of a form element using Javascript.

In this section, we will see how to set the value of other input fields like hidden field, drop down list etc

Setting the value of a hidden field using Javascript

As in the case of ’textarea’ and ’text’ input elements, in order to set the value of a hidden input element in a form, we can use the following syntax:

 oFormObject.elements["hidden_element_name"].value = 'Some Value'; 

Let us look at an example to illustrate how to set the value of a hidden input element through javascript.

The form in this demo has a hidden element “login_attempts” that keeps a record of the number of times the login has been attempted. We first create a hidden input element in the form:

<form name="login_frm" id="login_frm" action="#">
 
   <input type="hidden" name="login_attempts" value=''>
 
   Login ID: <input type="text" size="30" maxlength="155" name="login">
 
   Password: <input type="password" size="30" maxlength="155" name="password">
 
   <input type="button" name="submit" value="Login" onclick="checkLogin( this.form.login, this.form.password, this.form.login_attempts);">
 
</form>

The onClick event handler checkLogin() is passed references to the login, password and login_attempts input elements.


function checkLogin(loginElem, passwordElem, loginAttempts)
{
   if (isEmpty(loginAttempts.value))
   {
      loginAttempts.value = 1;
   }
   else
   {
      loginAttempts.value++;
   }
 
   var login = loginElem.value;
   var password = passwordElem.value;
 
   var error_flag = false;
   var msg = 'Login Attempt No: ' + loginAttempts.value + '\n';
 
   if(isEmpty(login))
   {
      msg += 'Please enter your Login ID\n';
      error_flag = true;
   }
 
   if(isEmpty(password))
   {
      msg += 'Please enter your password\n';
      error_flag = true;
   }
 
   if(!error_flag)
   {
      if(login == 'admin' && password == 'demo_password')
      {
         msg += 'Congratulations: You have entered the correct login details';
         loginAttempts.value = 0;
      }
      else
      {
         msg += 'Incorrect Login / Password combination';
         error_flag = true;
      }
   }
   alert(msg);
}

When the form first loads, the login_attempts hidden element has an empty string as its value. When the onClick event of the form’s button is triggered for the first time, the function above sets the value of the hidden element to 1. Thereafter, for every attempt, it increments the value of login_attempts by 1. The code above also checks for the login and the password and prompts the user.

Download the code sample.

See Also