### The onchange event

In the previous lesson we were getting values from form fields and showing them after pressing a button. We can also do it without buttons, by monitoring changes to the form fields.

Show the selected options here:

        document.getElementById("education_level").onchange = function () {

            var selectField = document.getElementById("education_level");
            var selectedOption = selectField.options.selectedIndex;
            var selectedValue = selectField.options[selectedOption].innerHTML;
            document.getElementById("selected_level").innerHTML = selectedValue;

        };

The other field types can also be monitored with the onchange event, we just need to pay attention to which element is changing. Radio buttons and checkboxes have multiple items, so we need to apply the event to each of the items using a loop:

Select the items for your order:
Hamburger
Fries
Soda

Show the items selected:

        var check = document.getElementsByName("meal");

        for (var a = 0;  a < check.length; a++) {

            check[a].onchange = function () {

                document.getElementById("selected_check").innerHTML = "";

                for (var b = 0;  b < check.length; b++) {

                    if (check[b].checked) {
                        document.getElementById("selected_check").innerHTML += '<li>' + check[b].value + '</li>';
                    }
                }
            }
        }

### Contents