You are here: Home » All Posts » Javascript Form Handling » How to set the value of a form field using Javascript PII

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

in Javascript Form Handling

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.

Be Sociable, Share!
  • Marcelo

    Dear,

    I appologise my English … my native language is Portuguese / Brazil.

    I have the same problem.
    I have to check my codes in many browsers and Windows Versions

    document . GetElementById (HIDDENFormVariable) . value = ‘string’ do NOT run in …

    IE 11 Windows 7 **not**
    Mozila Windows 7 **not**
    Chrome 37.0.2062.124 Vista Business **not**
    Chrome 38.0.2125 Windows 7 **not**
    Chrome 38.0.2125 Windows XP **not**

    IE 9 Windows Vista Business Ok
    IE 7 Windows XP Ok

    BUT ..

    In Windows Explorer 11, if you change in [Tools] , [Compatibility View Settings] , incluind your site at the list … it will run Ok in Windows 7 with IE 11 (!)

    Then .. is not a bug but it was changed by IE
    Chrome do not accept change hidden input in any of Windows or old version that I have checked.

    I SOLVED it from another way …

    Where I had …

    (input type=HIDDEN …..)

    I changed to ..

    (DIV STYLE=”visibility:hidden”) (input type=TEXT .. ) (/DIV)

    .. text inputs can be changed by javascrip and inside DIV do not be showed in screen

    I found lots of technical articles about this problem in the web and anyone have this solution.
    I hope it been a solution

    Marcelo

  • http://www.aphroecs.com sanjay prajapati

    I felt that it is helpful for me.

  • Gaetan Boisvertg

    Hi,

    Should fit for FireFox 6.0 and Internet Explorer 7.0 and 8.0?

    Thank’s

    Gaetan

Previous post:

Next post: