KOMPOOS.NL

onformchange - HTML5

home » manuals » html5 » onformchange.html

sitemap | terug naar het html5 referentie - events - overzicht

voorbeeld onformchange event

uitleg onformchange procedure

Het onformchange (html5) event wordt nauwelijks ondersteund op dit moment. Het is daarom verstandiger om de vervangende procedure op deze pagina te gebruiken (werkt in alle browers). Als je data invoert in het formulier en "netjes" de procedure verzend, komt onformchange niet in actie. Maar als je in het formulier iets hebt gewijzigd en/of hebt ingevuld, zal bij een unload van de pagina het script in aktie komen. Probeer het maar uit. Plaats het formulier en het javascript in de body-sectie van jouw pagina. Het javascript (liefst) zo laag als mogelijk. Deze procedure is foutloos volgens de strenge normen van JSLint.

html code met het formulier

<form method="post" action="javascript:alert('verzonden')" onsubmit="">
        <div>
                <div>
                        <label for="onformchange-veld-1">onformchange-veld-1   </label>
                        <input type="text" id="onformchange-veld-1" name="onformchange-veld-1" />
                </div>
                <div>
                        <label for="onformchange-veld-2">onformchange-veld-2   </label>
                        <input type="text" id="onformchange-veld-2" name="onformchange-veld-2" />
                </div>
                <div>
                        <label for="onformchange-veld-3">onformchange-veld-3   </label>
                        <input type="text" id="onformchange-veld-3" name="onformchange-veld-3" />
                </div>
                <div>
                        <label for="onformchange-veld-4">onformchange-veld-4   </label>
                        <input type="text" id="onformchange-veld-4" name="onformchange-veld-4" />
                </div>
                <div>
                <br />
                <input type="submit" value="Verzenden"> <input type="reset">
                </div>
        </div>
</form>

het javascript voor de onformchange procedure

<script>
/*global confirm: false */
function onformchange_(formulier) {
    var element,
    opt,
    is_default,
    i = 0,
    j;
    while (true) {
        element = formulier.elements[i++];
        switch (element.type) {
        case 'text':
        case 'textarea':
        case 'hidden':
            if (!/^\s*$/.test(element.value) && element.value != element.defaultValue) {
                return true;
            }
            break;
        case 'checkbox':
        case 'radio':
            if (element.checked != element.defaultChecked) {
                return true;
            }
            break;
        case 'select-one':
        case 'select-multiple':
            j = 0;
            is_default = false;
            while (true) {
                opt = element.options[j++];
                if (opt.defaultSelected) {
                    is_default = true;
                }
            }
            j = is_default ? 0: 1;
            while (true) {
                opt = element.options[j++];
                if (opt.selected != opt.defaultSelected) {
                    return true;
                }
            }
            break;
        }
    }
    return false;
}
onunload = function() {
    if (onformchange_(document.forms[0])) {
        if (confirm('als je deze pagina verlaat\nwordt het formulier ge-reset.\nzal ik alle gegevens eerst voor jou opslaan?')) {
            document.forms[0].submit();
        }
    }
};
</script>