How to set the value of a form element using Javascript
As we have seen in earlier articles, in order to work with forms in javascript,
it is imperative to obtain references to the form object and its elements.
In this article, we will be using the forms collection of the document object
and the elements collection of the form object to learn how to set the values
of the form elements.
To refresh your memory, the syntax for using these Javascript arrays is as below:
oFormObject = document.forms[index];
In the code above, "index" refers to the number of the form that we want to access
in the array "document.forms", with each form object being indexed in the order in
which it appears in the HTML code.
For accessing individual elements, we use the following syntax:
oformElement = oFormObject.elements[index]; OR
oFormElement = oFormObject.elements["element_name"];
In the above code, "index" refers to the position of the element in the "elements"
collection array, and "element_name" is the name of the element. Both approaches give
us a reference to the desired form element.
We can now proceed to learn how to set the values of different types of form elements.
Setting the value of a textarea element using Javascript
In order to set the value of a textarea field element in a form, we can use the
following syntax:
oFormObject.elements["element_name"].value = 'Some Value';
If we are accessing the form object through any of the form's elements itself,
we can also use the following syntax:
this.form.elements["element_name"].value = 'Some Value';
Let us look at a simple form to clarify the concepts presented so far.
<form name="register_complaint" action="#">
Full Name: <input type="text" size="30" maxlength="155" name="name" >
Email Id: <input type="text" size="30" maxlength="155" name="email" >
Service Complaint: <textarea name="service_complaint" rows="7"
cols="50"></textarea>
<input type="button" name="submit" value="Submit Complaint"
onclick="showElements(this.form);" >
</form>
Please look at the demo, to understand
how we want this form to be manipulated through Javascript.
Some Observations:
- When the page loads, the textarea field "service_complaint" has a note
written for the user: "Please enter your complaint briefly", but when focus is
given to that field, this message disappears, as it should. In order to implement
this feature, we would need to write an onLoad event handler for the
<body> tag that would set the initial
value of the textarea element:
<body onload="initForm(document.forms[0], 'service_complaint',
'Please enter your complaint in brief');">
The initForm function could be implemented this way:
function initForm(oForm, element_name, init_txt) {
frmElement = oForm.elements[element_name];
frmElement.value = init_txt;
}
- You must have also noticed that this initial message does not re-appear
even after the focus is removed and again given to this field. We can implement
this, by writing an onFocus event handler for the textarea element.
The code below is a generic implementation that can be used for other fields
like the text input field as well:
function clearFieldFirstTime(element) {
if (element.counter==undefined) element.counter = 1;
else element.counter++;
if (element.counter == 1) element.value = '';
}
The first time the textarea element is given focus, the property
"counter" for the textarea element is not defined, and so we can set the
counter, by giving it the initial value 1. Thereafter, on subsequent focus,
this counter increments. The value of the textarea is reset only the first
time the textarea field gets focus, by setting its value attribute to the
empty string. Download the code, to learn more
about the implementation details.
Setting the value of the text input element through Javascript
In order to set the value of a text input field element in a form, we can use
the following syntax:
oFormObject.elements["element_name"].value = 'Some Value';
Let us look at an example to illustrate
how to set the value of the text input element through javascript.
The form in this demo has a "membership_period" text input field that is
manipulated through the use of two javascript button elements. Have a look at
the way the HTML is coded:
<form name="register_complaint" action="#">
Full Name: <input type="text" size="30" maxlength="155" name="name" >
Email Id: <input type="text" size="30" maxlength="155" name="email" >
Service Complaint: <textarea name="service_complaint" rows="7" cols="50"></textarea>
Months as member: <input type="text" size="5" maxlength="5" name="membership_period" >
<input type="button" name="increase" value="+" onclick="monthModify(this.form.elements["membership_period"], 'incr');" >
<input type="button" name="decrease" value="-" onclick="monthModify(this.form.elements["membership_period"], 'decr');" >
<input type="button" name="submit" value="Submit Complaint" onclick="showElements(this.form);" >
</form>
As you must have seen in the demo, the text field named "membership_period"
has a default value of 6 when the form loads, which can be changed either by
directly entering the value in the text input field, or by adjusting the default
value through the two javascript buttons labeled "+" or "-" which increments and
decrements, respectively, the value of the text input field by 1. We now need to
write a javascript function that can serve as the onClick event handler of the two
buttons:
- In the function, we would first need to identify which of the two
buttons was clicked:
switch(btnElement.name) {
case 'increase':
// code to handle incrementing the value of the text input field
referenced by txtElement
}
case 'decrease':
// code to handle decrementing the value of the text input
field referenced by txtElement
}
- For the case 'increase', we would need to check if the value we are
trying to increment is an integer, and if it is, then we increment it:
case 'increase':
if(isEmpty(txtElement.value)) {
txtElement.value = '1';
} else if(isInteger(txtElement.value)){
txtElement.value ++;
} else {
alert('The value you are trying to increment is not an integer');
txtElement.value = '';
}
break;
The function isEmpty() checks whether the value of the text input
field is empty or not, and the function isInteger() checks if the
value is an integer. If all these tests return true, we simply
increment the value using the construct: txtElement.value ++.
Have a look at the code sample for the
implementation of these functions. For the case 'decrease' the
approach is very similar, and you can have a look at the code sample
for this as well.
Next: Set the value of a hidden field and more...
Other Pages
- Page 2 : How to set the value of a form field using Javascript(hidden field)
- Page 3 : How to set the value of a form field using Javascript(page 3)(select/dropdown list & checkbox)
Related:
|
