How to set the value of a form field using Javascript
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 feld, drop down list etc.
Setting the value of a hidden field using Javascript
As in the case of the
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. In order to
provide this functionality, we need to first use a hidden input element in the
HTML of 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>
As you can see above, the onClick event handler checkLogin()
is passed references to the login, password and login_attempts input elements.
Let us now write this function:
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);
}
The code is self-explanatory. When the form first loads, the login_attempts
hidden element has an empty string as it's value. So, when the onClick event
of the form's button element is triggered for the first time, the function
above sets the value of the hidden element to 1. Thereafter, each time, this
function is called, it increments the value of this element by 1. The code above
also checks for the login and the password and prompts the user for invalid login
attempts. More details can be looked up in the
code sample
for this example.
Next: Set select options in a select, check box and more...
Other Pages
- Page 1 : How to set the value of a form element using Javascript(textarea & textbox)
- Page 3 : How to set the value of a form field using Javascript(page 3)(select/dropdown list & checkbox)
|
