[Go Make Things] How To Clear All Of The Fields In A Form With Vanilla JS

Once the form is successfully submitted, there’s a good chance you’ll want to clear all of the fields in the form.

Fortunately, vanilla JS has a handy little method for doing just that: HTMLFormElement.reset().


document.addEventListener('submit', function (event) {

// Prevent default form submit
event.preventDefault();

// Clear the form fields
// event.target is the thing that triggered the event, in this case, the form
event.target.reset();

});


The HTMLFormElement.reset() method resets all fields in a form back to their default values. This means that if you had a specified value property on a field, and the user changed it, it would revert to the original instead of emptying completely.

Here’s a demo.

The HTMLFormElement.reset() method works in all modern browsers, and IE9 and above.

You would like - how to disable a form when submitting it with Ajax or an API.

0
0
191
Welcome to CodeXpress Forum Script - Download NL script Free


No comments. Be first to post a comment.

Reply to this article


Welcome, Guest: Join to reply login to reply!

♣ Post Statistic

1 guest(s) viewing this topic

Related Post

[go Make Things] Free Icons For Use In Your Projects [go Make Things] Run A Function After A Specified Amount Of Time Using Vanilla Js [go Make Things] Finding Remote Web Dev Jobs [go Make Things] Can Junior Developers Ask Too Many Questions? [go Make Things] How To Clear All Of The Fields In A Form With Vanilla Js

♣ CodeXpress Statistic

Welcome, Guest: Join CodeXpress Login

17 Members, 135 topics and 9 posts
Date: Friday 01 July 2022 at 03:33 AM

Top 5 Contributors

People who started the most discussions on codexpress.

  1. 17
  2. 92
  3. 3
  4. 11
  5. 1

Sections

CodeXpress / General:
Politics, Business, Investment, Career, Autos, Counties, Properties, Agriculture, Health, Travel, Family, Culture, Religion, Food, Pets, Romance, Diaspora, Africa, International Forum, World List Directory, How To,
Science/Technology:
Programing, Webmasters, Computers, Phones, Art, Graphics & Video, Technology Market, CSS, Innovation, PHP 7x, Vanilla JS, Software Updates,

♣ Users Online: (2)

0 Members and 2 Guests online in last 5 minutes!


Sections:

Food, Business, International Forum, World List Directory, Diaspora, Technology Market, CSS, Innovation, Phones, Vanilla JS, Lifestyle, Theatre/Comedy, Fashion, Celebrities, Gossip,

CodeXpress - Copyright © 2019 - 2022 Marshall Unduemi. All rights reserved. See How To Advertise.
Disclaimer: Every CodeXpress member is solely responsible for anything that he/she posts or uploads on CodeXpress.