sitemap | terug naar het html5 referentie - events - overzicht
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.
<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>
<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>