Porsche Design System

Button

Form#

When used as a submit button, the name and value props are submitted as a pair as part of the form data.

Last submitted data: none

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<form>
  <p-button name="option" value="A" type="submit">Button A</p-button>
  <p-button name="option" value="B" type="submit">Button B</p-button>
</form>

<p-text>Last submitted data: none</p-text>
<script>
  const debugElement = document.querySelector('p-text');
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = Array.from(new FormData(e.target, e.submitter).entries())[0];
    debugElement.innerText = `Last submitted data: ${formData.join('=') || 'none'}`;
  });
</script>
</body>
</html>

Form Attribute#

When a button is used as a submit or reset button outside a form, the form attribute can be utilized to explicitly associate the button with a specific form element.

When using the p-button component as a submit or reset button outside a form, it relies on the ElementInternals API, which has limited browser support.

As of now, the submitter in the form event is null because the button cannot be accessed within the shadow DOM to be passed as an argument to the requestSubmit() function ( WICG/webcomponents#814).

Additionally, custom components using ElementInternals may include all values of elements with the same name attribute in form data, rather than only the value of the triggering element, deviating from native form behavior.

Submit

Reset

Last submitted data: none

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<form id="some-form">
  <p-textarea name="some-name" label="Some Label"></p-textarea>
</form>

<p-button-group>
  <p-button type="submit" form="some-form">Submit</p-button>
  <p-button type="reset" form="some-form">Reset</p-button>
</p-button-group>

<p-text>Last submitted data: none</p-text>
<script>
  const debugElement = document.querySelector('p-text');
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    debugElement.innerText = `Last submitted data: ${formData.get('some-name') || 'none'} `;
  });
</script>
</body>
</html>

Attention