Something went wrong on our end
Select Git revision
tutorial-09-browser-compatibility.html
-
Volker Schukai authoredVolker Schukai authored
tutorial-dom-form-handling.html 36.97 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Adding meta -->
<meta name="author" content="schukai GmbH" />
<meta name="description" content="javascript library for optimal use on fast and flexible pages." />
<!-- Adding external script-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous" ></script>
<script src="https://monsterjs.org/js/doc/monster-versions.js" crossorigin="anonymous" ></script>
<!-- Adding external style-->
<link href="https://monsterjs.org/assets/prettify.css" crossorigin="anonymous" rel="stylesheet" />
<!-- Adding scripts-->
<!-- Adding style-->
<!-- Adding overlay script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.0/js/OverlayScrollbars.min.js"
integrity="sha512-5R3ngaUdvyhXkQkIqTf/k+Noq3phjmrqlUQyQYbgfI34Mzcx7vLIIYTy/K1VMHkL33T709kfh5y6R9Xy/Cbt7Q=="
crossorigin="anonymous"></script>
<!-- Adding overlay style-->
<title>
Tutorial: Form handling
</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/third-party/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/third-party/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/reset.css">
<link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-base.css">
<link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-light.css">
<svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="display:none">
<defs>
<symbol id="copy-icon" viewbox="0 0 488.3 488.3">
<g>
<path
d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" />
<path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z" />
</g>
</symbol>
<symbol id='search-icon' viewBox="0 0 512 512">
<g>
<g>
<path
d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474 c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323 c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848 S326.847,409.323,225.474,409.323z" />
</g>
</g>
<g>
<g>
<path
d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328 c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z" />
</g>
</g>
</symbol>
<symbol id="down-icon" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
>
</path>
</symbol>
</defs>
</svg>
</head>
<body>
<nav class="navbar" id="navbar">
<div class="navbar-heading" id="navbar-heading"><a href="index.html"><h2 class="navbar-heading-text">Monster</h2></a></div><div class="sidebar-main-content" id="sidebar-main-content"><div class="accordion collapsed" id="599504" > <h3 class="accordion-heading">Tutorials<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="tutorial-01-getting-started.html">Getting Started</a></li><li class="accordion-list" id=""><a href="tutorial-02-what-is-monster.html">What is Monster?</a></li><li class="accordion-list" id=""><a href="tutorial-03-dom.html">DOM</a></li><li class="accordion-list" id=""><a href="tutorial-09-browser-compatibility.html">Browser compatibility</a></li></ul> </div><div class="accordion collapsed" id="6996028" > <h3 class="accordion-heading">Classes<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=2691025><div class="accordion-heading child"><a href="Monster.Constraints.AbstractConstraint.html">AbstractConstraint</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Constraints.AbstractConstraint.html#isValid">isValid</a></li></ul></li><li class="accordion-list" id=""><a href="Monster.Constraints.AbstractOperator.html">AbstractOperator</a></li><li class="accordion collapsed child" id=8391659><div class="accordion-heading child"><a href="Monster.Constraints.AndOperator.html">AndOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Constraints.AndOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=829667><div class="accordion-heading child"><a href="Monster.Constraints.Invalid.html">Invalid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Constraints.Invalid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=4462610><div class="accordion-heading child"><a href="Monster.Constraints.IsArray.html">IsArray</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Constraints.IsArray.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=749594><div class="accordion-heading child"><a href="Monster.Constraints.IsObject.html">IsObject</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Constraints.IsObject.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=6134995><div class="accordion-heading child"><a href="Monster.Constraints.OrOperator.html">OrOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Constraints.OrOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=7397614><div class="accordion-heading child"><a href="Monster.Constraints.Valid.html">Valid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Constraints.Valid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=3253671><div class="accordion-heading child"><a href="Monster.Data.Pathfinder.html">Pathfinder</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Data.Pathfinder.html#deleteVia">deleteVia</a></li><li data-type='method'><a href="Monster.Data.Pathfinder.html#exists">exists</a></li><li data-type='method'><a href="Monster.Data.Pathfinder.html#getVia">getVia</a></li><li data-type='method'><a href="Monster.Data.Pathfinder.html#setVia">setVia</a></li><li data-type='method'><a href="Monster.Data.Pathfinder.html#setWildCard">setWildCard</a></li></ul></li><li class="accordion collapsed child" id=6893558><div class="accordion-heading child"><a href="Monster.Data.Pipe.html">Pipe</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Data.Pipe.html#run">run</a></li><li data-type='method'><a href="Monster.Data.Pipe.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=7772497><div class="accordion-heading child"><a href="Monster.Data.Transformer.html">Transformer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Data.Transformer.html#run">run</a></li><li data-type='method'><a href="Monster.Data.Transformer.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=2835123><div class="accordion-heading child"><a href="Monster.DOM.Assembler.html">Assembler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.Assembler.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster.DOM.Assembler.html#getAttributePrefix">getAttributePrefix</a></li><li data-type='method'><a href="Monster.DOM.Assembler.html#setAttributePrefix">setAttributePrefix</a></li></ul></li><li class="accordion collapsed child" id=53761><div class="accordion-heading child"><a href="Monster.DOM.CustomControl.html">CustomControl</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.CustomControl.html#checkValidity">checkValidity</a></li><li data-type='method'><a href="Monster.DOM.CustomControl.html#reportValidity">reportValidity</a></li><li data-type='method'><a href="Monster.DOM.CustomControl.html#setFormValue">setFormValue</a></li><li data-type='method'><a href="Monster.DOM.CustomControl.html#setValidity">setValidity</a></li></ul></li><li class="accordion collapsed child" id=1323481><div class="accordion-heading child"><a href="Monster.DOM.CustomElement.html">CustomElement</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.CustomElement.html#.getCSSStyleSheet">getCSSStyleSheet</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#.getTag">getTag</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#adoptedCallback">adoptedCallback</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#assembleMethodSymbol">assembleMethodSymbol</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#attachObserver">attachObserver</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#attributeChangedCallback">attributeChangedCallback</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#connectedCallback">connectedCallback</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#containsObserver">containsObserver</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#detachObserver">detachObserver</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#disconnectedCallback">disconnectedCallback</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#getOption">getOption</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#initMethodSymbol">initMethodSymbol</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#setOption">setOption</a></li><li data-type='method'><a href="Monster.DOM.CustomElement.html#setOptions">setOptions</a></li></ul></li><li class="accordion collapsed child" id=5941145><div class="accordion-heading child"><a href="Monster.DOM.Template.html">Template</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.Template.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster.DOM.Template.html#getTemplateElement">getTemplateElement</a></li></ul></li><li class="accordion collapsed child" id=4283504><div class="accordion-heading child"><a href="Monster.DOM.Theme.html">Theme</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.Theme.html#getName">getName</a></li></ul></li><li class="accordion collapsed child" id=6996124><div class="accordion-heading child"><a href="Monster.DOM.Updater.html">Updater</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.Updater.html#disableEventProcessing">disableEventProcessing</a></li><li data-type='method'><a href="Monster.DOM.Updater.html#enableEventProcessing">enableEventProcessing</a></li><li data-type='method'><a href="Monster.DOM.Updater.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster.DOM.Updater.html#run">run</a></li><li data-type='method'><a href="Monster.DOM.Updater.html#setCallback">setCallback</a></li><li data-type='method'><a href="Monster.DOM.Updater.html#setEventTypes">setEventTypes</a></li></ul></li><li class="accordion collapsed child" id=1481120><div class="accordion-heading child"><a href="Monster.I18n.Locale.html">Locale</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.I18n.Locale.html#getMap">getMap</a></li><li data-type='method'><a href="Monster.I18n.Locale.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=8330711><div class="accordion-heading child"><a href="Monster.I18n.Provider.html">Provider</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.I18n.Provider.html#getTranslations">getTranslations</a></li></ul></li><li class="accordion collapsed child" id=9795823><div class="accordion-heading child"><a href="Monster.I18n.Providers.Fetch.html">Fetch</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.I18n.Providers.Fetch.html#getTranslations">getTranslations</a></li></ul></li><li class="accordion collapsed child" id=3795876><div class="accordion-heading child"><a href="Monster.I18n.Translations.html">Translations</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.I18n.Translations.html#assignTranslations">assignTranslations</a></li><li data-type='method'><a href="Monster.I18n.Translations.html#getPluralRuleText">getPluralRuleText</a></li><li data-type='method'><a href="Monster.I18n.Translations.html#getText">getText</a></li><li data-type='method'><a href="Monster.I18n.Translations.html#setText">setText</a></li></ul></li><li class="accordion collapsed child" id=4510677><div class="accordion-heading child"><a href="Monster.Logging.Handler.html">Handler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Logging.Handler.html#getLogLevel">getLogLevel</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#log">log</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setAll">setAll</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setDebug">setDebug</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setError">setError</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setFatal">setFatal</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setInfo">setInfo</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setLogLevel">setLogLevel</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setOff">setOff</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setTrace">setTrace</a></li><li data-type='method'><a href="Monster.Logging.Handler.html#setWarn">setWarn</a></li></ul></li><li class="accordion collapsed child" id=1104034><div class="accordion-heading child"><a href="Monster.Logging.Handler.ConsoleHandler.html">ConsoleHandler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Logging.Handler.ConsoleHandler.html#log">log</a></li></ul></li><li class="accordion collapsed child" id=6565370><div class="accordion-heading child"><a href="Monster.Logging.LogEntry.html">LogEntry</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Logging.LogEntry.html#getArguments">getArguments</a></li><li data-type='method'><a href="Monster.Logging.LogEntry.html#getLogLevel">getLogLevel</a></li></ul></li><li class="accordion collapsed child" id=2942442><div class="accordion-heading child"><a href="Monster.Logging.Logger.html">Logger</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Logging.Logger.html#addHandler">addHandler</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#getLabel">getLabel</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#getLevel">getLevel</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#logDebug">logDebug</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#logError">logError</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#logFatal">logFatal</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#logInfo">logInfo</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#logTrace">logTrace</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#logWarn">logWarn</a></li><li data-type='method'><a href="Monster.Logging.Logger.html#removeHandler">removeHandler</a></li></ul></li><li class="accordion collapsed child" id=8941266><div class="accordion-heading child"><a href="Monster.Namespace.html">Namespace</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Namespace.html#getNamespace">getNamespace</a></li><li data-type='method'><a href="Monster.Namespace.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=8217338><div class="accordion-heading child"><a href="Monster.Text.Formatter.html">Formatter</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Text.Formatter.html#format">format</a></li><li data-type='method'><a href="Monster.Text.Formatter.html#setMarker">setMarker</a></li></ul></li><li class="accordion collapsed child" id=5029686><div class="accordion-heading child"><a href="Monster.Types.Base.html">Base</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.Base.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=9307858><div class="accordion-heading child"><a href="Monster.Types.BaseWithOptions.html">BaseWithOptions</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.BaseWithOptions.html#getOption">getOption</a></li></ul></li><li class="accordion collapsed child" id=3495950><div class="accordion-heading child"><a href="Monster.Types.ID.html">ID</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.ID.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=2145517><div class="accordion-heading child"><a href="Monster.Types.Observer.html">Observer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.Observer.html#addTag">addTag</a></li><li data-type='method'><a href="Monster.Types.Observer.html#getTags">getTags</a></li><li data-type='method'><a href="Monster.Types.Observer.html#hasTag">hasTag</a></li><li data-type='method'><a href="Monster.Types.Observer.html#removeTag">removeTag</a></li><li data-type='method'><a href="Monster.Types.Observer.html#update">update</a></li></ul></li><li class="accordion collapsed child" id=6516566><div class="accordion-heading child"><a href="Monster.Types.ObserverList.html">ObserverList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.ObserverList.html#attach">attach</a></li><li data-type='method'><a href="Monster.Types.ObserverList.html#contains">contains</a></li><li data-type='method'><a href="Monster.Types.ObserverList.html#detach">detach</a></li><li data-type='method'><a href="Monster.Types.ObserverList.html#notify">notify</a></li></ul></li><li class="accordion collapsed child" id=1156876><div class="accordion-heading child"><a href="Monster.Types.ProxyObserver.html">ProxyObserver</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.ProxyObserver.html#attachObserver">attachObserver</a></li><li data-type='method'><a href="Monster.Types.ProxyObserver.html#containsObserver">containsObserver</a></li><li data-type='method'><a href="Monster.Types.ProxyObserver.html#detachObserver">detachObserver</a></li><li data-type='method'><a href="Monster.Types.ProxyObserver.html#getRealSubject">getRealSubject</a></li><li data-type='method'><a href="Monster.Types.ProxyObserver.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster.Types.ProxyObserver.html#notifyObservers">notifyObservers</a></li></ul></li><li class="accordion collapsed child" id=975986><div class="accordion-heading child"><a href="Monster.Types.Queue.html">Queue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.Queue.html#add">add</a></li><li data-type='method'><a href="Monster.Types.Queue.html#clear">clear</a></li><li data-type='method'><a href="Monster.Types.Queue.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster.Types.Queue.html#peek">peek</a></li><li data-type='method'><a href="Monster.Types.Queue.html#poll">poll</a></li></ul></li><li class="accordion-list" id=""><a href="Monster.Types.RandomID.html">RandomID</a></li><li class="accordion collapsed child" id=3363305><div class="accordion-heading child"><a href="Monster.Types.Stack.html">Stack</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.Stack.html#clear">clear</a></li><li data-type='method'><a href="Monster.Types.Stack.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster.Types.Stack.html#peek">peek</a></li><li data-type='method'><a href="Monster.Types.Stack.html#pop">pop</a></li><li data-type='method'><a href="Monster.Types.Stack.html#push">push</a></li></ul></li><li class="accordion collapsed child" id=9105290><div class="accordion-heading child"><a href="Monster.Types.TokenList.html">TokenList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.TokenList.html#add">add</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#clear">clear</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#contains">contains</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#entries">entries</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#forEach">forEach</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#getIterator">getIterator</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#remove">remove</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#replace">replace</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#Symbol.iterator">Symbol.iterator</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#toggle">toggle</a></li><li data-type='method'><a href="Monster.Types.TokenList.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=8366063><div class="accordion-heading child"><a href="Monster.Types.UniqueQueue.html">UniqueQueue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.UniqueQueue.html#add">add</a></li><li data-type='method'><a href="Monster.Types.UniqueQueue.html#clear">clear</a></li><li data-type='method'><a href="Monster.Types.UniqueQueue.html#poll">poll</a></li></ul></li><li class="accordion collapsed child" id=9390759><div class="accordion-heading child"><a href="Monster.Types.Version.html">Version</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.Version.html#compareTo">compareTo</a></li><li data-type='method'><a href="Monster.Types.Version.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=2154154><div class="accordion-heading child"><a href="Monster.Util.Comparator.html">Comparator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Util.Comparator.html#compare">compare</a></li><li data-type='method'><a href="Monster.Util.Comparator.html#equal">equal</a></li><li data-type='method'><a href="Monster.Util.Comparator.html#greaterThan">greaterThan</a></li><li data-type='method'><a href="Monster.Util.Comparator.html#greaterThanOrEqual">greaterThanOrEqual</a></li><li data-type='method'><a href="Monster.Util.Comparator.html#lessThan">lessThan</a></li><li data-type='method'><a href="Monster.Util.Comparator.html#lessThanOrEqual">lessThanOrEqual</a></li><li data-type='method'><a href="Monster.Util.Comparator.html#reverse">reverse</a></li></ul></li></ul> </div><div class="accordion collapsed" id="3976062" > <h3 class="accordion-heading">Externals<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="external-HTMLElement.html">HTMLElement</a></li></ul> </div><div class="accordion collapsed" id="4876765" > <h3 class="accordion-heading">Namespaces<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=612187><div class="accordion-heading child"><a href="global.html#Monster">Monster</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="global.html#Monster#.assignToNamespace">assignToNamespace</a></li><li data-type='method'><a href="global.html#Monster#.getVersion">getVersion</a></li></ul></li><li class="accordion-list" id=""><a href="Monster.Constraints.html">Constraints</a></li><li class="accordion collapsed child" id=8628035><div class="accordion-heading child"><a href="Monster.Data.html">Data</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Data.html#.buildMap">buildMap</a></li><li data-type='method'><a href="Monster.Data.html#.Diff">Diff</a></li><li data-type='method'><a href="Monster.Data.html#.extend">extend</a></li></ul></li><li class="accordion collapsed child" id=3300834><div class="accordion-heading child"><a href="Monster.DOM.html">DOM</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.html#.addAttributeToken">addAttributeToken</a></li><li data-type='method'><a href="Monster.DOM.html#.addToObjectLink">addToObjectLink</a></li><li data-type='method'><a href="Monster.DOM.html#.clearAttributeTokens">clearAttributeTokens</a></li><li data-type='method'><a href="Monster.DOM.html#.containsAttributeToken">containsAttributeToken</a></li><li data-type='method'><a href="Monster.DOM.html#.findClosestByAttribute">findClosestByAttribute</a></li><li data-type='method'><a href="Monster.DOM.html#.findClosestObjectLink">findClosestObjectLink</a></li><li data-type='method'><a href="Monster.DOM.html#.findDocumentTemplate">findDocumentTemplate</a></li><li data-type='method'><a href="Monster.DOM.html#.findTargetElementFromEvent">findTargetElementFromEvent</a></li><li data-type='method'><a href="Monster.DOM.html#.fireEvent">fireEvent</a></li><li data-type='method'><a href="Monster.DOM.html#.getDocument">getDocument</a></li><li data-type='method'><a href="Monster.DOM.html#.getDocumentFragmentFromString">getDocumentFragmentFromString</a></li><li data-type='method'><a href="Monster.DOM.html#.getDocumentTheme">getDocumentTheme</a></li><li data-type='method'><a href="Monster.DOM.html#.getLinkedObjects">getLinkedObjects</a></li><li data-type='method'><a href="Monster.DOM.html#.getLocaleOfDocument">getLocaleOfDocument</a></li><li data-type='method'><a href="Monster.DOM.html#.getWindow">getWindow</a></li><li data-type='method'><a href="Monster.DOM.html#.hasObjectLink">hasObjectLink</a></li><li data-type='method'><a href="Monster.DOM.html#.registerCustomElement">registerCustomElement</a></li><li data-type='method'><a href="Monster.DOM.html#.removeAttributeToken">removeAttributeToken</a></li><li data-type='method'><a href="Monster.DOM.html#.removeObjectLink">removeObjectLink</a></li><li data-type='method'><a href="Monster.DOM.html#.replaceAttributeToken">replaceAttributeToken</a></li><li data-type='method'><a href="Monster.DOM.html#.toggleAttributeToken">toggleAttributeToken</a></li></ul></li><li class="accordion collapsed child" id=9444536><div class="accordion-heading child"><a href="Monster.I18n.html">I18n</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.I18n.html#.parseLocale">parseLocale</a></li></ul></li><li class="accordion-list" id=""><a href="Monster.I18n.Providers.html">Providers</a></li><li class="accordion-list" id=""><a href="Monster.Logging.html">Logging</a></li><li class="accordion collapsed child" id=4298219><div class="accordion-heading child"><a href="Monster.Math.html">Math</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Math.html#.random">random</a></li></ul></li><li class="accordion-list" id=""><a href="Monster.Text.html">Text</a></li><li class="accordion collapsed child" id=2024098><div class="accordion-heading child"><a href="Monster.Types.html">Types</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Types.html#.getGlobal">getGlobal</a></li><li data-type='method'><a href="Monster.Types.html#.getGlobalFunction">getGlobalFunction</a></li><li data-type='method'><a href="Monster.Types.html#.getGlobalObject">getGlobalObject</a></li><li data-type='method'><a href="Monster.Types.html#.isArray">isArray</a></li><li data-type='method'><a href="Monster.Types.html#.isBoolean">isBoolean</a></li><li data-type='method'><a href="Monster.Types.html#.isFunction">isFunction</a></li><li data-type='method'><a href="Monster.Types.html#.isInstance">isInstance</a></li><li data-type='method'><a href="Monster.Types.html#.isInteger">isInteger</a></li><li data-type='method'><a href="Monster.Types.html#.isIterable">isIterable</a></li><li data-type='method'><a href="Monster.Types.html#.isObject">isObject</a></li><li data-type='method'><a href="Monster.Types.html#.isPrimitive">isPrimitive</a></li><li data-type='method'><a href="Monster.Types.html#.isString">isString</a></li><li data-type='method'><a href="Monster.Types.html#.isSymbol">isSymbol</a></li><li data-type='method'><a href="Monster.Types.html#.typeOf">typeOf</a></li><li data-type='method'><a href="Monster.Types.html#.validateArray">validateArray</a></li><li data-type='method'><a href="Monster.Types.html#.validateBoolean">validateBoolean</a></li><li data-type='method'><a href="Monster.Types.html#.validateFunction">validateFunction</a></li><li data-type='method'><a href="Monster.Types.html#.validateInstance">validateInstance</a></li><li data-type='method'><a href="Monster.Types.html#.validateInteger">validateInteger</a></li><li data-type='method'><a href="Monster.Types.html#.validateIterable">validateIterable</a></li><li data-type='method'><a href="Monster.Types.html#.validateObject">validateObject</a></li><li data-type='method'><a href="Monster.Types.html#.validatePrimitive">validatePrimitive</a></li><li data-type='method'><a href="Monster.Types.html#.validateString">validateString</a></li><li data-type='method'><a href="Monster.Types.html#.validateSymbol">validateSymbol</a></li></ul></li><li class="accordion collapsed child" id=775496><div class="accordion-heading child"><a href="Monster.Util.html">Util</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Util.html#.clone">clone</a></li><li data-type='method'><a href="Monster.Util.html#.deepFreeze">deepFreeze</a></li></ul></li></ul> </div></div>
<div class="navbar-resize" id="navbar-resize">
<div class="resize-dots-container">
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
</div>
</div>
</nav>
<div class="navbar-ham" id="navbar-ham">
<div>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
<div id="main" class="main-content">
<h1 id='page-title' class="page-title">
Tutorial: Form handling
</h1>
<section>
<header>
<h2>Form handling</h2>
</header>
<article>
<p>Forms can be bound to a structure just like other structures via the updater class.</p>
<p>Suppose we have an html form with some controls.</p><pre class="prettyprint source"><code><div>
<form id="form1">
<input type="checkbox" name="checkbox">
<input type="text" name="text">
<input type="radio" name="radio">
<select name="select">
<option>value1</option>
<option>value2</option>
</select>
<textarea name="textarea">
</textarea>
<input type="button" name="button">
</form>
</div>
</code></pre>
<p>A new updater is created in this case via the following call.</p>
<pre class="prettyprint source"><code>const updater = new Updater(document.getElementById('form1'));
</code></pre>
<p>With the method <code>Updater.getSubject()</code> you can get the structure of the updater. If you want to use an already defined structure, you can pass it to the updater as a second parameter.</p>
<pre class="prettyprint source"><code>let subject = updater.getSubject();
console.log(subject);
</code></pre>
<p>Now we want a click on the checkbox to be mapped in the data structure.</p>
<p>To do this we need to extend the html with the <code>data-monster-bind</code> attribute.</p>
<p>The values or states of controls are mapped to the data structure via this binding.</p>
<pre class="prettyprint source"><code><div>
<form id="form1">
<!-- data-monster-bind added -->
<input type="checkbox" name="checkbox" data-monster-bind="state">
</form>
</div>
</code></pre>
<p>In this case the status of the checkbox is mapped to the key <code>state</code>. If the checkbox is selected the field <code>state</code> contains the value <code>on</code> , otherwise state is undefined.</p>
<p>If you want to use another value instead of <code>on</code>, you can set the attribute <code>value</code>.</p>
<pre class="prettyprint source"><code><input type="checkbox" name="checkbox" value="checked" data-monster-bind="state">
</code></pre>
</article>
</section>
</div>
<footer class="footer" id="footer">
<a href='https://about.schukai.com/de/impressum/'>Imprint</a>
</footer>
<script src="scripts/third-party/prettify.js"></script>
<script src="scripts/third-party/lang-css.js"></script>
<script type="text/javascript" src="scripts/misc.js"></script>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/fix-code-block.js"></script>
<script src="scripts/fix-navbar.js"></script>
<script src="scripts/resize.js"></script>
<script type="text/javascript">
var option = {"min":"300","max":"600"}
setupResizeOptions(option)
</script>
<script type="text/javascript">
var option = JSON.parse('{"options":{}}')
console.log(option)
document.addEventListener("DOMContentLoaded", function () {
OverlayScrollbars(document.querySelectorAll('body'), option.option || {});
});
</script>
</body>
</html>