JAVASCRIPT / INTERACTIVE PRACTICE

Build a greeting form

Turn a typed name into a friendly message. Keep the page open and help users when they leave the name empty.

Requirements

Handle the form submission, whether someone clicks Say hello or presses Enter in the input. Prevent the default page navigation.
Read the current name and remove spaces from its start and end.
For a name such as Mia, display exactly Hello, Mia! For an empty or spaces-only name, display exactly Please enter your name.
Update the message on every submission. Display names as plain text, even if they contain angle brackets.

Try an empty name, spaces only, Mia, then Sam with spaces around it. Finally clear the input and submit again. Each submission must replace the previous message. Check solution runs these cases in a fresh preview; it also tests a name containing angle brackets.

Related lessons

Functions — run a callback for each submission.
Conditions — choose between a reminder and a greeting.
Working with the DOM — read input and update the message.
Inputs and submit events — handle the button and Enter with the form’s event.

Before you code

HTML and CSS are supplied. Write JavaScript for these elements:

<form id="greeting-form" novalidate>
  <label for="name">Your name</label>
  <input id="name" name="name" type="text">
  <button type="submit">Say hello</button>
</form>
<p id="greeting" role="status"></p>

The form intentionally has no required attribute, so you can practice checking empty input yourself. The preview keeps submissions on this page for safety; the checks still verify that your listener prevents the default action.

Need an introduction? Read about inputs and submit events. You can also practice click events with the counter first.

Progress loads in this browser

Write JavaScript for the supplied form. This practice supports the three documented IDs, input.value, textContent, submit listeners, and event.preventDefault(). Run code applies your edits.

Try the working greeting form

Submit a name with Say hello, then try Enter. Change the name, add spaces around it, and submit an empty input. This reference runs independently of your code and does not complete the practice.

Mia → Hello, Mia! Empty or spaces only → Please enter your name. The page stays open, and the latest message replaces the previous one.

const form = document.querySelector("#greeting-form");
const nameInput = document.querySelector("#name");
const message = document.querySelector("#greeting");

// Listen for the form's submit event.
// Keep the page open, then read the current name.
// Ignore spaces at the start and end.
// Show a greeting, or ask for a name when it is empty.

Run your code, then try the preview here.

Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →

Reset your code

This replaces your draft with the starter code. Your completed achievement stays saved.

Open one hint at a time, try a change, and check again. The complete code stays in the separate explained solution.

Hint 1: observe the result

Try a name, spaces only, and a different name in the reference. Which inputs count as empty? What changes after every submission?

Hint 2: react to the form

A form can be submitted with its button or the Enter key. Handle the action shared by both, and think about the browser behavior you want to stop.

Hint 3: read the latest input

The name may change between submissions. Read it when the event happens, then consider whether spaces around it should count.

Hint 4: choose and replace the message

An empty name and a real name need different messages. Make sure a later submission replaces the previous result. Use a text update so names containing angle brackets remain literal text.

See the explained solution

const form = document.querySelector("#greeting-form");
const nameInput = document.querySelector("#name");
const message = document.querySelector("#greeting");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const name = nameInput.value.trim();

  if (name === "") {
    message.textContent = "Please enter your name.";
    return;
  }

  message.textContent = "Hello, " + name + "!";
});

The submit listener receives an event. preventDefault stops the form's usual navigation. Reading value inside the listener gets the current input; trim removes surrounding spaces. The if branch handles an empty name and returns early. Otherwise, textContent displays a greeting as plain text. Opening the solution does not mark the practice complete.

Build a greeting form

Requirements

Related lessons

Before you code

Try the working greeting form

Live preview