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

querySelector(

function()

addEventListener()

classList

)

JavaScript

Recap

function()

addEventListener()

classList

querySelector(

)

JavaScript

Recap

<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/general.css" />
    <title>HTML dokument</title>
  </head>
  <body>
	<h1>Overskrift</h1>
	<p>Lorem ipsum...</p>
	<button>Klik på mig</button>
  </body>
</html>
h1
<
>

function()

addEventListener()

classList

querySelector(

)

h1

JavaScript

Recap

<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/general.css" />
    <title>HTML dokument</title>
  </head>
  <body>
	<h1>Overskrift</h1>
	<p>Lorem ipsum...</p>
	<button>Klik på mig</button>
  </body>
</html>
<
>

function()

addEventListener()

classList

querySelector(

)

h1

JavaScript

Recap

<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/general.css" />
    <title>HTML dokument</title>
  </head>
  <body>
	<h1>Overskrift</h1>
	<p>Lorem ipsum...</p>
	<button>Klik på mig</button>
  </body>
</html>
<
>

function()

addEventListener()

classList

h1

"    "

querySelector(

)

JavaScript

Recap

function()

addEventListener()

classList

document.

Kig efter "h1" i HTML-dokumentet

h1

"    "

querySelector(

)

JavaScript

Recap

function()

addEventListener()

textContent

const heading =

variabel

document.

h1

"    "

querySelector(

)

JavaScript

Recap

function()

addEventListener()

textContent

const heading =

document.

h1

"    "

querySelector(

)

JavaScript

Recap

function()

addEventListener()

document.querySelector("h1").

const heading =

document.

h1

"    "

querySelector(

)

textContent

heading.

JavaScript

Recap

function()

addEventListener()

heading.

const heading =

document.

h1

"    "

querySelector(

)

textContent

JavaScript

Recap

function() {

addEventListener()

= "Hello JS"

heading.

const heading =

document.

h1

"    "

querySelector(

)

textContent

JavaScript

Recap

function() {

addEventListener()

}

= "Hello JS"

heading.

const heading =

document.

h1

"    "

querySelector(

)

textContent

JavaScript

Recap

addEventListener(

button

function() {

}

= "Hello JS"

heading.

const heading =

document.

h1

"    "

querySelector(

)

textContent

const btn =

document.

"       "

querySelector(

)

)

JavaScript

Recap

addEventListener(

)

button

function() {

}

= "Hello JS"

heading.

const heading =

document.

h1

"    "

querySelector(

)

textContent

const btn =

document.

"       "

querySelector(

)

JavaScript

Recap

btn.

addEventListener(

)

button

function

}

= "Hello JS"

heading.

const heading =

document.

h1

"    "

querySelector(

)

textContent

const btn =

document.

"       "

querySelector(

)

() {

JavaScript

Recap

"click", sayHello

button

function

}

= "Hello JS"

heading.

const heading =

document.

h1

"    "

querySelector(

)

textContent

const btn =

document.

"       "

querySelector(

)

btn.

addEventListener(

)

() {

sayHello

JavaScript

Recap

JavaScript

Demo

Form Events

Vi kan "lytte" til formularen

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

Først laver vi en henvisning

Form Events

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

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

Vi kan "lytte" til formularen

Form Events

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

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

Lyt efter submit (når jeg indsender)

Vi kan "lytte" til formularen

Form Events

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

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

Lyt efter, om der er felter, der er ugyldige

Vi kan "lytte" til formularen

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

event.preventDefault();

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

<a href="something.html">Se mere</a>

Hvis vi forhindrer standarden (altså preventDefault()), så ville links ikke navigere

Hvad er standard-funktionaliteten for links?

const firstLink = document.querySelector("a");

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

firstLink.addEventListener('click', preventLinkFromNavigating);

Don't do this at home...

🚫

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);

Copy/paste moment

Fjern browser-popup

ø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);

Submit-eventet

Hvad skal der ske, når jeg submitter?

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);
  console.log( formData.get("first_name") )
}

.get()

Saml felt-værdierne op

Konsollen udskriver nu strengen "Peter"

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

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

.textContent

Vis værdierne

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

"Peter"

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");
}

.textContent

Vis værdierne

function handleSubmit(event) {
  event.preventDefault();
  
  // 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");
  // ...
  form.reset();
}

Husk det hele...

øvelse 12

Saml værdier op og vis dem

Brug FormData() til at samle værdierne op og textContent til at indsætte værdien i outputtet

.textContent

new FormData()

function handleSubmit(event) {
  event.preventDefault();
  
  const formData = new FormData(form);
  // ...
  optionsOutput.textContent = formData.getAll("my_options").join(", ");
  // ...
  form.reset();
}

Checkboxes

Forms & JS

By Dannie Vinther

Forms & JS

Forms: Håndtering med JS

  • 351

More from Dannie Vinther