HTMLButtonElement.formAction — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.formAction

Beschreibung

Die Eigenschaft formAction spiegelt das HTML-Attribut formaction eines <button>-Elements. Sie legt fest, an welche URL das zugehörige Formular gesendet wird, wenn genau dieser Button das Absenden auslöst. Dabei überschreibt sie das Attribut action des <form>-Elements.

Typische Einsatzfälle sind Formulare mit mehreren Absende-Buttons, die unterschiedliche Aktionen auslösen, etwa „Speichern“, „Als Entwurf sichern“ und „Löschen“. Jeder Button kann dabei auf einen anderen Server-Endpunkt zeigen, ohne dass du JavaScript-Logik für die Weiterleitung brauchst.

Beim Lesen liefert die Eigenschaft immer eine absolute, aufgelöste URL, auch wenn im Attribut nur ein relativer Pfad steht. Ist das Attribut nicht gesetzt oder leer, bekommst du die URL des Dokuments zurück (nicht das action des Formulars!). Wirksam ist formAction nur bei Buttons mit type="submit", dem Standardwert.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Beim Setzen: eine absolute oder relative URL. Sie wird in das Attribut `formaction` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Die gegen die Basis-URL des Dokuments aufgelöste, absolute URL aus dem Attribut formaction. Fehlt das Attribut oder ist es leer, ist das die URL des Dokuments.

Beispiele

Wert auslesen (relative URL wird aufgelöst)

// HTML: <form action="/save"><button id="del" formaction="/delete">Löschen</button></form>
// Seite läuft unter https://example.com/editor
const btn = document.querySelector('#del');
console.log(btn.formAction);
console.log(btn.getAttribute('formaction'));

https://example.com/delete /delete

Unterschiedliche Ziele für mehrere Buttons setzen

const form = document.createElement('form');
form.action = '/artikel/speichern';
form.method = 'post';

const publish = document.createElement('button');
publish.textContent = 'Veröffentlichen';

const draft = document.createElement('button');
draft.textContent = 'Als Entwurf sichern';
draft.formAction = '/artikel/entwurf';

form.append(publish, draft);
document.body.append(form);

console.log(draft.getAttribute('formaction'));

/artikel/entwurf

Ziel beim Absenden über den auslösenden Button ermitteln

const form = document.querySelector('form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // event.submitter ist der Button, der das Absenden ausgelöst hat
  const btn = event.submitter;
  const url = btn?.hasAttribute('formaction') ? btn.formAction : form.action;

  const response = await fetch(url, {
    method: 'POST',
    body: new FormData(form, btn)
  });
  console.log(`Gesendet an ${url}: ${response.status}`);
});

Gesendet an https://example.com/artikel/entwurf: 200

// Wichtig · Fallstricke

Leerer Wert: Ohne Attribut liefert formAction die Dokument-URL und nicht das action des Formulars. Ob ein eigener Wert gesetzt ist, prüfst du deshalb mit hasAttribute('formaction').
Wirkt nur bei type="submit". Bei type="button" oder type="reset" wird der Wert ignoriert.
Ein programmatisches form.submit() berücksichtigt formAction nicht, weil dabei kein Button beteiligt ist. Nutze stattdessen form.requestSubmit(button).
Sicherheit: Setze keine ungeprüften Benutzereingaben als formAction, z. B. javascript:-URLs oder fremde Domains. Sonst können Formulardaten abfließen. Die CSP-Direktive form-action schränkt auch Ziele ein, die über formaction gesetzt werden.
Verwandte Überschreibungen am Button: formMethod, formEnctype, formTarget, formNoValidate.
Wird von allen modernen Browsern unterstützt. event.submitter ist ebenfalls Baseline, fehlte aber in älteren Safari-Versionen (vor 15.4).

Siehe auch

HTMLButtonElement.formMethod HTMLButtonElement.formEnctype HTMLButtonElement.form HTMLButtonElement.formTarget HTMLButtonElement.command