How to Clear Form Data After Submission in HTML and JavaScript

After submitting a form on an HTML page, you might want to clear the data in the input fields for user convenience or to prepare the form for the next submission. This article provides a comprehensive guide on how to accomplish this using JavaScript. We'll explore different methods and best practices for clearing form data after submission.

HTML Form Example

Here is a simple example of an HTML form with two input fields: Name and Email, and a submit button. After submission, we will clear the form using JavaScript.

HTML Structure

!DOCTYPE html
html langen
head
    meta charsetUTF-8
    meta nameviewport contentwidthdevice-width, initial-scale1.0
    titleForm Example/title
    script
        function clearForm() {
            ('myForm').reset();
        }
    /script
/head
body
    form idmyForm
        label fornameInputName:/label
        input typetext idnameInput namename
        br
        label foremailInputEmail:/label
        input typeemail idemailInput nameemail
        br
        input typesubmit valueSubmit onclickclearForm(); return false;
    /form
/body
/html

Explanation:

The form has two input fields: Name and Email, and a submit button. The `clearForm` function calls `reset()` on the form element, which clears all input fields. The `onsubmit` event of the form calls `clearForm()`, and prevents the default submission behavior with `return false`.

Alternative: Using a Submit Handler

If you want to perform some actions before clearing the form, you can modify the `onsubmit` function to handle the submission and then clear the form afterward:

form idmyForm onsubmithandleSubmit(); return false;
    label fornameInputName:/label
    input typetext idnameInput namename
    br
    label foremailInputEmail:/label
    input typeemail idemailInput nameemail
    br
    input typesubmit valueSubmit
/form

Define the `handleSubmit` function to process the form data as needed before calling `clearForm`.
Assigning an Empty Value
If you want to clear a specific field, for example, the Name field, you can set its value to null:
form idmyForm
    First name: input typetext idfirstName namefirstName
    br
    Last name: input typetext idlastName namelastName
    br
    input typesubmit valueSubmit onclick('firstName').value  null; ('lastName').value  null; return false;
/form

Additionally, you can clear all form fields using the form reset method:
form idmyForm
    input typetext idnumquest namenumquest
    br
    input typesubmit valueSubmit onclick('myForm').reset(); return false;
/form

Catching the Click Event in JavaScript
If you want to clear a field with a button, you can catch the click event in a JavaScript function and then clear it. For example, if you have a field called Name, you can use this logic:
div idmyFormContainer
    form idregisteration controllersomeController
        label fornameInputName:/label
        input typetext idnameInput namename
        br
        label forlastNameInputLast Name:/label
        input typetext idlastNameInput namelastName
        br
        button typebutton onclickclearFields();Submit/button
    /form
/div

The JavaScript function `clearFields` can be defined as follows:
script
    function clearFields() {
        ;
        ;
    }
/script

Thus, the form is reset after submitting the form data.
Keywords: HTML form clearing, JavaScript form reset, form submission processing
Related Abbreviations:
HTML – HyperText Markup Language (standard language for creating web pages)
JavaScript (JS) – Programming language used to make web pages interactive