Øvelse 10: Læs query stringen

Formularen har nu action="/event-pass.html" og method="get". Det betyder, at den sender felternes værdier til opsamlingssiden som en query string i URL’en.

Submit formularen, læg mærke til query stringen i previewets adresselinje, og opret derefter params med URLSearchParams på opsamlingssiden.

<form action="/event-pass.html" method="get" aria-label="Event-pass formular">
    <div class="form-group">
      <label for="nickname">Nickname</label>
      <input id="nickname" name="nickname" type="text" value="PixelPanda" minlength="2" required aria-describedby="nickname-error">
      <p class="error-message" id="nickname-error">Skriv mindst to tegn</p>
    </div>

    <div class="form-group">
      <label for="portfolio">Portfolio (valgfrit)</label>
      <p id="portfolio-hint">Brug en fuld URL, fx https://example.com</p>
      <input id="portfolio" name="portfolio" type="url" value="https://example.com" aria-describedby="portfolio-hint portfolio-error">
      <p class="error-message" id="portfolio-error">Skriv en gyldig URL</p>
    </div>

    <div class="form-group">
      <fieldset aria-describedby="reason-error">
        <legend>Hvad håber du at få med hjem?</legend>
        <label for="inspiration">
          <input id="inspiration" name="reason" type="radio" value="inspiration" checked required>
          Inspiration
        </label>
        <label for="tools">
          <input id="tools" name="reason" type="radio" value="tools">
          Praktiske værktøjer
        </label>
        <label for="network">
          <input id="network" name="reason" type="radio" value="network">
          Nye kontakter
        </label>
      </fieldset>
      <p class="error-message" id="reason-error">Vælg én mulighed</p>
    </div>

    <div class="form-group">
      <label for="hype">Hype-niveau</label>
      <input id="hype" name="hype" type="range" min="0" max="100" value="60">
    </div>

    <div class="form-group">
      <label for="guidelines">
        <input id="guidelines" name="guidelines" type="checkbox" value="accepted" required aria-describedby="guidelines-error">
        Jeg accepterer eventets retningslinjer
      </label>
      <p class="error-message" id="guidelines-error">Du skal acceptere retningslinjerne</p>
    </div>

    <button type="submit">Lav event-pass</button>
  </form>

const eventPass = document.querySelector(".event-pass");

if (eventPass) {
  const paramsString = location.search;

  // Opret et URLSearchParams-objekt fra paramsString
  
}

Opgavebeskrivelse