How To Clear Input Fields After Submit Using JavaScript

Posted on by Christopher
Clear Input fields after Submit using JavaScript

Let me show you how to clear input fields after submit using JavaScript. We have the following methods: Set the field’s value to an empty string or call the reset() method on the form. Check out the information provided in this article. Let’s go into detail now.

Clear input fields after submit using JavaScript

Set the field’s value to an empty string

The first method you can try is to set the input field’s value to an empty string after pressing submit. Whenever you submit, the value of the input will be reset to empty.

To do that, we do the following:

  1. Add the 'click' event listener for your button.
  2. Set the value of the input field to an empty string when you click the button.

Take a look at the following sample program:

Here is the HTML file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo</title>
        <link rel="stylesheet" href="./index.css">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <h4>Enter your message</h4>
            <input type="text" id="message" name="message" size="50" />
            <button id="myButton" type="submit" class="btn btn-primary">Send</button>

            <script src="main.js"></script>
        </div>
    </body>
</html>

The JavaScript that handles the logic of your program:

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handleClick(event) {
    event.preventDefault();
    const messageInput = document.getElementById('message');
    messageInput.value = '';
});

Output:

If there are multiple input fields, you can use the querySelectorAll() to get the collection and the forEach() method to iterate over each element and set the value to null.

For instance:

const inputFields = document.querySelectorAll('#username, #email, #phone');

inputFields.forEach(inputField => {
  	inputField.value = '';
});

Call the reset() method on the form

In case you work with input fields inside a form, you can use the HTMLFormElement.reset() method. This is also the second method I want to mention.

The HTMLFormElement.reset() method restores the default values ​​of the form element. That means when you submit the form, the input fields will be set to null.

Syntax:

HTMLFormElement.reset()

To do that, we do the following:

  1. Add the 'submit' event listener to your form.
  2. Call the reset() method every time the user submits the form.

Here is an example for you:

In main.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link rel="stylesheet" href="./index.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <form id="myForm" class="row g-3">
            <div class="col-md-3">
                <label for="inputEmail" class="form-label">Email</label>
                <input type="email" class="form-control" id="inputEmail">
            </div>

            <div class="col-md-3">
                <label for="inputPhone" class="form-label">Phone Number</label>
                <input type="text" class="form-control" id="inputPhone">
            </div>

            <div class="col-12">
              	<button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </form>

        <script src="main.js"></script>
    </div>
</body>
</html>

In main.js:

const form = document.getElementById('myForm');

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

Output:

In the two examples for the two methods above, we have used event.preventDefault() to prevent the page from reloading every time you submit.

Summary

So that’s the end of the article. I showed you how to clear input fields after submit using JavaScript. You can practice the mentioned methods and see the results. Good luck in your project.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *