Skip to main content

Handling Form Submissions in JavaScript DOM (Live Playground)

In this tutorial, we will explore how to handle form submissions using JavaScript DOM. This is essential for creating interactive web applications that process user input.

Form Submission Event​

JavaScript allows you to listen for the submit event on a form. This event is triggered when the form is submitted, either by pressing the "Enter" key while a form element is focused or by clicking the "Submit" button.

To handle the form submission, you can attach an event listener to the form using the addEventListener() method. In the event handler function, you can process the form data and perform actions, such as sending the data to the server or displaying a confirmation message.

Example: Basic Form Submission Handling​

HTML
<form id="myForm">
  <input type="text" name="username" placeholder="Username" />
  <input type="password" name="password" placeholder="Password" />
  <button type="submit">Submit</button>
</form>
JavaScript
const form = document.getElementById('myForm');

form.addEventListener('submit', function (event) {
  event.preventDefault();

  const username = form.elements['username'].value;
  const password = form.elements['password'].value;

  console.log('Form submitted with the following data:');
  console.log('Username:', username);
  console.log('Password:', password);
});

In this example, we use event.preventDefault() to prevent the default form submission behavior, which would reload the page. This allows us to handle the form submission using JavaScript without disrupting the user experience.

Live Playground, Try it Yourself

Validating Form Data​

Before processing the form data, you may want to validate it to ensure that it meets specific requirements. You can use JavaScript to perform validation checks and display error messages if the data is not valid.

Example: Form Validation​

HTML
<form id="myForm">
  <input type="text" name="username" placeholder="Username" />
  <input type="password" name="password" placeholder="Password" />
  <p id="errorMessage" style="color: red;"></p>
  <button type="submit">Submit</button>
</form>
JavaScript
const form = document.getElementById('myForm');
const errorMessage = document.getElementById('errorMessage');

form.addEventListener('submit', function (event) {
  event.preventDefault();

  const username = form.elements['username'].value;
  const password = form.elements['password'].value;

  if (username === '' || password === '') {
    errorMessage.textContent = 'Please fill in all fields.';
    return;
  }

  if (password.length < 6) {
    errorMessage.textContent = 'Password must be at least 6 characters long.';
    return;
  }

  errorMessage.textContent = '';

  console.log('Form submitted with the following data:');
  console.log('Username:', username);
  console.log('Password:', password);
});

In this example, we perform two validation checks:

  1. Ensure that both the username and password fields are filled in.
  2. Ensure that the password is at least six characters long.

If the data is not valid, we display an error message and prevent the form submission.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, we have learned how to handle form submissions using JavaScript DOM. This knowledge is essential for creating interactive web applications that process user input, perform validation checks, and display feedback to the user.