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

Back to articles list

This page was last modified on 2018-12-09 01:41:49