FormData og feltværdier

Hvis du kun husker én ting: FormData virker kun godt, når din HTML har tydelige name-værdier, som JavaScript kan læse.

Saml værdierne op

Når du har fat i formularen, kan du lave et FormData-objekt:

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

function handleSubmit(event) {
  const formData = new FormData(form);
}

Det objekt indeholder formularens aktuelle værdier. Derfor virker det kun rigtigt, hvis dine felter har name-attributter.

Hent en konkret værdi med .get()

Hvis du vil hente én værdi ud, kan du bruge .get():

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

function handleSubmit(event) {
  const formData = new FormData(form);
  console.log(formData.get("first_name"));
}

Hvis formularen har et felt med name="first_name", får du den værdi tilbage.

Det gælder ikke kun tekstfelter. Samme metode virker også fint med fx select og textarea:

function handleSubmit(event) {
  const formData = new FormData(form);

  console.log(formData.get("department"));
  console.log(formData.get("message"));
}

Så længe feltet har et name, kan FormData hente værdien.

Vis værdierne i outputfelter

Når værdierne er hentet, kan du vise dem med textContent:

function handleSubmit(event) {
  // Hent værdier fra form
  const formData = new FormData(form);

  // Sæt værdier ind i output-elementer
  firstOutput.textContent = formData.get("first_name");
  lastOutput.textContent = formData.get("last_name");
}

Det er et godt mønster i begyndelsen, fordi det gør dataflowet meget tydeligt:

1. brugeren skriver noget
2. formularen bliver submit’et
3. JavaScript læser værdierne
4. værdierne vises et andet sted på siden

Det samme mønster virker på flere form-controls

Når du først har forstået FormData, er mønsteret det samme uanset om værdien kommer fra:

• et tekstfelt
• en dropdownmenu (select)
• et textarea

Forskellen ligger mest i HTML’en. JavaScript-koden ligner stadig:

outputDepartment.textContent = formData.get("department");
outputMessage.textContent = formData.get("message");

Det er nyttigt at se, fordi formularer sjældent kun består af én type felt i praksis.

Husk sammenhængen mellem HTML og JS

FormData virker kun godt, hvis HTML’en er sat fornuftigt op:

• felterne skal have name
• outputfelterne skal kunne findes med querySelector()
• submit-flowet skal være på plads

Så HTML og JS hænger tæt sammen her.

Øvelser

Her samler du flere formværdier op og viser dem i outputsektionen:

Her gør du det samme igen, men denne gang med select og textarea: