Submit with validations
There are three button types
- submit Trigger form submission
- cancel If the form has changes, show alert dialog
- reset Reset form to initial state
<form style="display: inline-grid;" id=one method=dialog onsubmit=submit(this)> <mc-textfield supporting-text="Enter name" label=Name name=name required></mc-textfield> <mc-textfield supporting-text="Enter email" label=Email name=email type=email></mc-textfield> <mc-select label="Pick a number" name=favnum required supporting-text> <mc-option value=1>one</mc-option> <mc-option value=2>two</mc-option> <mc-option value=3>three</mc-option> </mc-select> <mc-checkbox label=Agree name=agree required></mc-checkbox> <mc-button type=submit>Submit</mc-button> <mc-button style="color: var(--mc-error);" type=reset>reset</mc-button> <mc-button onclick="console.log('Called on discard or no change')" style="color: var(--mc-error);" type=cancel>Cancel</mc-button> </form>
// submit method // in example it is called from the form onsubmit attribute function submit(form) { const formData = new FormData(form); console.log([...formData.entries()]) } // You can also use the submit event document.querySelector('#one').addEventListener('submit', submit);
Cancel change detection
The cancel button will prompt a dialog when it is clicked and detects any changes in the form data
<form style="display: inline-grid;" id=two method=dialog onsubmit=page.submit(this)> <mc-textfield supporting-text="Enter name" label=Name name=name required></mc-textfield> <mc-checkbox label=Agree name=agree required></mc-checkbox> <div style="display: flex; justify-self: end;"> <mc-button form=two type=submit>Submit</mc-button> <mc-button onclick="two.reset(); console.log('Called on discard, or when from has no changes');" form=two type=cancel>Cancel</mc-button> </div> </form>
// submit method // in example it is called from the form onsubmit attribute function submit(form) { const formData = new FormData(form); console.log([...formData.entries()]) } // You can also use the submit event document.querySelector('#one').addEventListener('submit', submit);