Skip to main content

Exercise 47

  • Create the following folder/file structure:
/ex_47
  |-- index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Form Checkbox</title>
  </head>
  <body>
    <form
      action="save_user.html"
      method="post"
      enctype="application/x-www-form-urlencoded"
      name="login"
    >
      <input type="checkbox" name="superheroe" value="Wolverine" /> Wolverine
      <input type="checkbox" name="superheroe" value="The Invisible Woman" />
      The Invisible Woman
      <input type="checkbox" name="superheroe" value="Iron Man" /> Iron Man
      <input type="checkbox" name="superheroe" value="Superman" /> Superman
      <input type="checkbox" name="superheroe" value="" /> Daredevil
      <input type="checkbox" name="superheroe" value="The Flash" /> The Flash
      <input type="checkbox" name="superheroe" value="Captain America" />
      Captain America
      <input type="checkbox" name="superheroe" value="Wonder Woman" /> Wonder
      Woman
      <input type="checkbox" name="superheroe" value="Spider-Man" /> Spider-Man
      <input type="checkbox" name="superheroe" value="Batman" /> Batman
      <input type="submit" name="submit" value="Submit" />
    </form>
  </body>
</html>

index.html​

  • Create a basic HTML document
  • Create a script tag on the document head element
  • Select the form element using any of the JavaScript selectors
  • Add a form submit event handler and prevent the default behaviour
  • Show the following message when the user submits the form:
    • Show the following message if the user doesn't select any superheroes:
    Please at least select a superheroe
    • Show the following message if the user only selects one superheroe
    The best superheroe is: %selectedSuperhero%
    • Show the following message if the user selects many superheroes
    The best superheores are: %listOfSuperheroesNames%