Formhåndtering

Styring med JavaScript

Med JavaScript kan vi bl.a....

Opsamle og vise data

Nulstille

Fjerne browser-popup

JavaScript

querySelector

function()

addEventListener

textContent

Recap

JavaScript

querySelector()

function()

addEventListener()

textContent

)

Recap

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

"        "

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

"        "

document.

Kig efter "h1" i HTML-dokumentet

JavaScript

querySelector(

function()

addEventListener()

textContent

)

h1

"        "

document.

const heading =

JavaScript

querySelector(

function()

addEventListener()

textContent

)

h1

"        "

document.

const heading =

JavaScript

querySelector(

function()

addEventListener()

textContent

)

h1

"        "

document.

const heading =

heading.

JavaScript

querySelector(

function() {

addEventListener()

textContent

)

h1

"        "

document.

const heading =

heading.

.remove

= "Hello JS"

JavaScript

querySelector(

function() {

addEventListener()

textContent

)

h1

"        "

document.

const heading =

heading.

.remove

}

= "Hello JS"

JavaScript

querySelector(

function() {

addEventListener(

textContent

)

h1

"        "

document.

const heading =

heading.

.remove

}

querySelector(

)

button

"             "

document.

const btn =

)

= "Hello JS"

JavaScript

querySelector(

function() {

addEventListener(

textContent

)

h1

"        "

document.

const heading =

heading.

.remove

}

querySelector(

)

button

"             "

document.

const btn =

)

= "Hello JS"

JavaScript

querySelector(

function() {

addEventListener(

textContent

)

h1

"        "

document.

const heading =

heading.

.remove

}

querySelector(

)

button

"             "

document.

const btn =

btn.

)

= "Hello JS"

JavaScript

querySelector(

function sayHello() {

addEventListener(

textContent

)

h1

"        "

document.

const heading =

heading.

.remove

}

querySelector(

)

button

"             "

document.

const btn =

btn.

)

"click", sayHello

= "Hello JS"

Form Events

Vi kan "lytte" til formularen

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

Først laver vi en henvisning

Form Events

Vi kan "lytte" til formularen

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

form.addEventListener(         , ...);
'invalid'
'submit'

Form Events

Vi kan "lytte" til formularen

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

form.addEventListener(         , ...);
'invalid'
'submit'

Lyt efter submit (når jeg indsender)

Form Events

Vi kan "lytte" til formularen

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

form.addEventListener(         , ...);
'invalid'
'submit'

Lyt efter, om der er felter, der er ugyldige

"Gør ikke, som du plejer..."

event.preventDefault();
<a href="something.html">Se mere</a>

Links ville ikke linke, osv.

Invalid-eventet

function cancelPopup(event) {
  event.preventDefault(); /* Gør ikke som du plejer */
}

form.addEventListener('invalid', cancelPopup);

Fjern browser-popup

Vi får et invalid-event med

Invalid-eventet

function cancelPopup(event) {
  event.preventDefault();
  form.querySelector(":user-invalid").focus();
}

form.addEventListener('invalid', cancelPopup, true);

Fjern browser-popup

Copy/paste moment

øvelse 10

Tilføj invalid-event

Sørg for, at browserens default popup-vindue ikke vises ved fejl i formularen.

Submit-eventet

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

function handleSubmit(event) {
  
}

form.addEventListener("submit", handleSubmit);

Hvad skal der ske, når jeg submitter?

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

function handleSubmit(event) {
  // 1. undgå refresh
  // 2. samle data op
  // 3. vise data
  // 4. evt. nustil formular
}

form.addEventListener("submit", handleSubmit);

Hvad skal der ske, når jeg submitter?

Submit-eventet

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

function handleSubmit(event) {
  // 1. undgå refresh
  event.preventDefault();
  // 2. samle data op
  // 3. vise data
  // 4. evt. nustil formular
}

form.addEventListener("submit", handleSubmit);

Undlad browser refresh

Submit-eventet

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

function handleSubmit(event) {
  // 1. undgå refresh
  event.preventDefault();
  // 2. samle data op
  // 3. vise data
  // 4. evt. nustil formular
  form.reset();
}

form.addEventListener("submit", handleSubmit);

Nulstil formularen v/ submit

Submit-eventet

øvelse 11

Tilføj submit-event

Stop browserens reload og nulstil felterne med ved submit.

.reset()

.preventDefault()

FormData

Saml felt-værdierne op

FormData-objektet vil blive udfyldt med formularens nuværende nøgler/værdier ved at bruge name-egenskaben for hvert element til nøglerne og deres indsendte værdi til værdierne.

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

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

FormData-syntaks

Saml felt-værdierne op

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

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

.get()

Saml felt-værdierne op

firstName indeholder nu strengen "Peter"

<input name="first_name" />
const form = document.querySelector("form");

function handleSubmit(event) {
  const formData = new FormData(form);
  const firstName = formData.get("first_name")
  const lastName = formData.get("last_name")
  const email = formData.get("email")
  //...
}

.get()

Saml felt-værdierne op

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

function handleSubmit(event) {
  const formData = new FormData(form);
  const firstName = formData.get("first_name")
  
  firstOutput.textContent = firstName;
}

.textContent

Vis værdierne

<p>First:
  <span class="first_output"></span>
</p>

"Peter"

function handleSubmit(event) {
  const formData = new FormData(form);
  
  // Hent værdier fra form
  const firstName = formData.get("first_name");
  const lastName = formData.get("last_name");

  // Sæt værdier ind i output-elementer
  firstOutput.textContent = firstName;
  lastOutput.textContent = lastName;
}

.textContent

Vis værdierne

function handleSubmit(event) {
  event.preventDefault();
  const formData = new FormData(form);
  
  // Hent værdier fra form
  const firstName = formData.get("first_name");
  const lastName = formData.get("last_name");

  // Sæt værdier ind i output-elementer
  firstOutput.textContent = firstName;
  lastOutput.textContent = lastName;
  // ...
  form.reset();
}

Husk det hele...

øvelse 12

Saml værdier op og vis dem

Stop browserens reload og nulstil felterne med ved submit.

.textContent

new FormData()

Forms & JS

By Dannie Vinther

Forms & JS

Forms: Håndtering med JS

  • 57

More from Dannie Vinther