Accessing values of variuos HTML form elements
HTML form elements are commonly spread in websites - from simple contact forms to complex rich internet applications (RIA). Though all of them can be accessed via javascript the actual code differs pretty much for every different type. Here's a reference to setting and getting values from HTML forms.
Text input elements
Getting / setting values of text input elements is done using element.value property:
function get_input_value(input) {
return input.value;
}
function set_input_value(input, value) {
input.value = value;
}
Radio button group
Radio button groups consist of several radio buttons with the same name. They can be accessed through the form using form.elements['input_radio_name']. This returns an array of all radio buttons. To get the selected value or set a new one we have to iterate through the array and check / set element.checked property:
function get_radio_value(radiogroup) {
for (var i=0; i<radiogroup.length; i++) {
if (radiogroup[i].checked == true) {
return radiogroup[i].value;
}
}
return null;
}
function set_radio_value(radiogroup, value) {
for (var i=0; i<radiogroup.length; i++) {
if (radiogroup[i].value == value) {
radiogroup[i].checked = true;
}
}
}
Checkboxes
The only interesting property of a checkbox is its state - checked or unchecked. This is controlled by (surprisingly) element.checked property:
function is_checked(checkbox) {
return checkbox.checked == true;
}
function check(checkbox) {
checkbox.checked = true;
}
function uncheck(checkbox) {
checkbox.checked = false;
}
function toggle(checkbox) {
checkbox.checked = !checkbox.checked;
}
Select (Drop-down) boxes
Select lists consist of several options with value and text properties. To get the currently selected option index, use element.selectedIndex. To set selected option use option.selected property:
function get_select_value(select) {
return select.options[select.selectedIndex].value;
}
function get_select_text(select) {
return select.options[select.selectedIndex].text;
}
function set_select_value(select, value) {
for (var i=0; i<select.options.length; i++) {
if (select.options[i].value == value) {
select.options[i].selected = 'selected';
}
}
}
Multiselect boxes
Select boxes can have multiple options marked at once - this is achieved by setting the select.multiple property. In this case we have arrays of values instead of single value for each of the former functions:
function get_multi_select_values(select) {
var selected_values = new Array();
for (var i=0; i<select.options.length; i++) {
if (select.options[i].selected) {
selected_values.push(select.options[i].value);
}
}
return selected_values;
}
function get_multi_select_texts(select) {
var selected_texts = new Array();
for (var i=0; i<select.options.length; i++) {
if (select.options[i].selected) {
selected_texts.push(select.options[i].text);
}
}
return selected_texts;
}
function set_multi_select_values(select, values) {
for (var i=0; i<select.options.length; i++) {
if (values.indexOf(select.options[i].value) != -1) {
select.options[i].selected = 'selected';
} else {
select.options[i].selected = '';
}
}
}
Textarea
Textareas are manipulated the same way as simple input text boxes - just set / get element.value attribute.
Find complete sample here: http://www.ustrem.org/code/html-elements-values/values.htm
No comments yet
This page was last modified on 2025-04-29 12:37:47