KOMPOOS.NL

onchange - HTML5

home » manuals » html5 » onchange.html

sitemap | terug naar het html5 referentie - events - overzicht

voorbeeld onchange event

uitleg onchange procedure

Onchange dient er voor om wijzigingen in een input-veld te detecteren (en via een script actie hierop te ondernemen). In dit voorbeeld wordt het eerste inputveld direct in de form door onchange "aangesproken". De overige drie velden roepen de functie onchange_getriggerd() aan. Het gevolg is dat als er één input-veld gewijzigd wordt, er actie wordt ondernomen op alle drie de velden. Probeer het voorbeeld maar om te zien wat er gebeurt.
Plaats de form en het javascript in de body-sectie van jouw pagina (probeer het javascript zo laag als mogelijk in de body-sectie te plaatsen).

voorbeeld formulier voor onchange procedure

<form method="post" action="http://kompoos.nl/manuals/html5/onchange.html" onsubmit="">
        <div>
                <div>
                        <label for="onchange-veld-1">onchange-veld-1   </label>
                        <input onchange="this.style.backgroundColor='darkblue';this.style.color='white'" type="text" id="onchange-veld-1" name="onchange-veld-1" />
                </div>
                <div>
                        <label for="onchange-veld-2">onchange-veld-2   </label>
                        <input onchange="onchange_getriggerd()" class="on-change" type="text" id="onchange-veld-2" name="onchange-veld-2" />
                </div>
                <div>
                        <label for="onchange-veld-3">onchange-veld-3   </label>
                        <input onchange="onchange_getriggerd()" class="on-change" type="text" id="onchange-veld-3" name="onchange-veld-3" />
                </div>
                <div>
                        <label for="onchange-veld-4">onchange-veld-4   </label>
                        <input onchange="onchange_getriggerd()" class="on-change" type="text" id="onchange-veld-4" name="onchange-veld-4" />
                </div>
        </div>
</form>

javascript voor onchange event

<script>
function getElementsByClass(verbind_met_element, doe_deze_class, tag) {
    var i,
    j,
    class_elementen = [];
    var de_elementen = verbind_met_element.getElementsByTagName(tag);
    var de_elementen_lengte = de_elementen.length;
    var het_patroon = new RegExp(doe_deze_class);
    for (i = 0, j = 0; i < de_elementen_lengte; i++) {
        if (het_patroon.test(de_elementen[i].className)) {
            class_elementen[j] = de_elementen[i];
            j++;
        }
    }
    return class_elementen;
}
function onchange_getriggerd() {
    var i;
    var elvars = getElementsByClass(document, 'on-change', '*');
    var delengte = elvars.length;
    for (i = 0; i < delengte; i++) {
        elvars[i].style.backgroundColor = 'green';
        elvars[i].style.color = 'white';
    }
}
document.getElementById('onchange-veld-1').focus();
</script>