Warning: session_start(): open(/tmp/sess_561099a68f7bdfc786be9a6ed88310ac, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Clear Input Fields After Submit Using JavaScript - LearnShareIT

How To Clear Input Fields After Submit Using JavaScript

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/bootstrap@5.1.3/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/bootstrap@5.1.3/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:

Leave a Reply

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