Gift Egbonyi

Posted on Jul 9

How to Handle Forms in JavaScript (Without Reloading the Page)

#javascript #form #dom #beginners

Handle Forms in JavaScript Without Reloading

Hey friends!

It's another mini-tutorial Wednesday, and today we’re learning how to handle forms with JavaScript.

Have you ever filled a form and it refreshed the whole page when you clicked submit? 😩

Let’s fix that and learn how to:

Get form input values
Prevent page reload
Show the result on the page
Do basic validation

Let’s build a simple form that takes your name and favourite language.

Step 1: Create the HTML Form

<form id="dev-form">
  <input type="text" id="name" placeholder="Your name" required />
  <input type="text" id="language" placeholder="Favourite language" required />
  <button type="submit">Submit</button>
</form>

<div id="result"></div>

required makes sure fields aren’t empty
#result is where we’ll display the output

🧠 Step 2: Handle the Submit with JavaScript

const form = document.getElementById('dev-form');
const result = document.getElementById('result');

form.addEventListener('submit', function (e) {
  e.preventDefault(); // stops the page from reloading

  const name = document.getElementById('name').value.trim();
  const language = document.getElementById('language').value.trim();

  if (!name || !language) {
    result.textContent = "Please fill in both fields.";
    return;
  }

  result.textContent = `👋 Hello ${name}, you love ${language}!`;
});

We:

Grabbed the form and result elements
Used addEventListener to listen for submit
Stopped the reload with e.preventDefault() also called event.preventDefault()
Read input values
Displayed a message

e.preventDefault() prevents the default behaviour of browsers reloading a page after submission.

Step 3: Optional CSS Styling

body {
  font-family: sans-serif;
  padding: 2rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 300px;
}

input {
  padding: 0.6rem;
  font-size: 1rem;
}

button {
  padding: 0.6rem;
  background: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

#result {
  margin-top: 1.5rem;
  font-weight: bold;
}

Try It Yourself on CodePen

I made a small CodePen for you to play with this form live:
👉 Open the JavaScript Form Playground on CodePen

Try submitting the form, changing the values and even adding your own validations!

💬 Over to You

Still with me? Good :)

I'd like to see your own form! Connect with me on GitHub

Was this tutorial helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

✍🏾 I’m documenting my learning loudly every Wednesday. Follow along if you're learning JavaScript too!
Let’s keep learning together!

DEV Community