Forms

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);