HTMLFormElement.requestSubmit() — Methode · JavaScript-Referenz

Signatur

HTMLFormElement.prototype.requestSubmit(submitter)

Beschreibung

requestSubmit() startet das Absenden eines Formulars per Skript genau so, als hätte der Nutzer einen Absende-Button angeklickt. Anders als form.submit() läuft dabei der vollständige Absendeablauf: Zuerst wird die Constraint Validation geprüft (required, pattern, min/max usw.), danach wird das submit-Event ausgelöst, das sich mit preventDefault() abbrechen lässt.

Über den optionalen Parameter submitter gibst du an, welcher Absende-Button als Auslöser gelten soll. Dessen Attribute name/value kommen dann in die Formulardaten, und Überschreibungen wie formaction, formmethod, formenctype, formtarget und formnovalidate werden berücksichtigt. Im submit-Event steht der Button unter event.submitter bereit.

Einsatzgebiete: Absenden per Tastenkürzel (z. B. Strg+Enter in einem Textfeld), automatisches Absenden bei Änderung eines Auswahlfelds oder eigene Komponenten, die sich wie ein nativer Button verhalten sollen – ohne dass Validierung und submit-Handler (z. B. für AJAX-Versand) umgangen werden.

Parameter

Name	Typ	Default	Beschreibung
$submitter	HTMLButtonElement \| HTMLInputElement	null	Absende-Button (`<button type="submit">`, `<input type="submit">` oder `<input type="image">`), der zu diesem Formular gehören muss. Fehlt er, gilt das Formular selbst als Auslöser und `event.submitter` ist `null`.

Beispiele

Absenden mit Strg+Enter aus einem Textfeld

const form = document.querySelector('#kommentar-form');
const textarea = form.querySelector('textarea');

textarea.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
    event.preventDefault();
    // Validierung und submit-Event laufen wie beim Klick
    form.requestSubmit();
  }
});

form.addEventListener('submit', (event) => {
  console.log('Formular wird gesendet, submitter:', event.submitter);
});

Formular wird gesendet, submitter: null

Bestimmten Absende-Button als Auslöser angeben

// HTML:
// <form id="artikel" action="/speichern" method="post">
//   <input name="titel" required>
//   <button type="submit" name="aktion" value="entwurf">Entwurf</button>
//   <button type="submit" name="aktion" value="veroeffentlichen" id="pub">Veröffentlichen</button>
// </form>

const form = document.querySelector('#artikel');
const pubButton = document.querySelector('#pub');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const daten = new FormData(form, event.submitter);
  console.log(daten.get('aktion'));
});

form.elements.titel.value = 'Hallo Welt';
form.requestSubmit(pubButton);

veroeffentlichen

Automatisches Absenden bei Filterwechsel mit fetch

const filterForm = document.querySelector('#filter');

filterForm.addEventListener('change', () => {
  filterForm.requestSubmit();
});

filterForm.addEventListener('submit', async (event) => {
  event.preventDefault();
  const params = new URLSearchParams(new FormData(filterForm));
  const response = await fetch(`/api/produkte?${params}`);
  const produkte = await response.json();
  console.log(`${produkte.length} Produkte gefunden`);
});

12 Produkte gefunden

Unterschied zu submit()

const form = document.querySelector('form');
form.addEventListener('submit', () => console.log('submit-Event'));

// Löst KEIN submit-Event aus und überspringt die Validierung:
// form.submit();

// Löst das submit-Event aus und prüft vorher die Validierung:
form.requestSubmit();

submit-Event

// Wichtig · Fallstricke

Fehler bei ungültigem submitter: Ist der Button kein Absende-Button, wird ein TypeError geworfen. Gehört er zu einem anderen Formular, gibt es eine DOMException vom Typ NotFoundError.
Validierung: Bei ungültigen Feldern zeigt der Browser seine Validierungsmeldungen, und es gibt weder ein submit-Event noch einen Versand. Hat das Formular novalidate oder der Submitter formnovalidate, wird nicht validiert.
Nicht mit submit() verwechseln: form.submit() überspringt Validierung und submit-Event. Handler wie AJAX-Versand oder Analytics werden dann nicht ausgeführt.
Namenskonflikt: Hat ein Formularfeld name=\"requestSubmit\", überdeckt es die Methode auf dem Formularobjekt. Solche Namen solltest du vermeiden.
Kompatibilität: Chrome/Edge 76+, Firefox 75+, Safari erst ab 16. Für ältere Safari-Versionen brauchst du ein Polyfill oder einen Fallback wie einen temporären Button mit click().
Rufst du die Methode in einem submit-Handler desselben Formulars auf, kann das zu Endlosschleifen führen.

Siehe auch

HTMLFormElement.submit() SubmitEvent.submitter HTMLFormElement.reportValidity() HTMLFormElement.checkValidity() HTMLFormElement