Skip to content

Latest commit

 

History

History
52 lines (48 loc) · 1.79 KB

ex_47.md

File metadata and controls

52 lines (48 loc) · 1.79 KB

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%