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

Lad den forblive åben...

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 =

variabel

JavaScript

querySelector(

function()

addEventListener()

textContent

)

h1

"        "

document.

const heading =

JavaScript

querySelector(

function()

addEventListener()

textContent

)

h1

"        "

document.

const heading =

document.querySelector("h1").

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

"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 preventLinksFromNavigating(event) {
  event.preventDefault(); /* Gør ikke som du plejer */
}

firstLink.addEventListener('click', preventLinksFromNavigating);

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

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

Stop browserens reload og nulstil felterne med ved submit.

.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

  • 178

More from Dannie Vinther