How to Reset or Clear a Form using javaScript

In this tutorial we will see how to reset or clear a form using JavaScript with .reset() method.

Follow below steps to reset or clear a form using JavaScript .reset() method.

Step 1 - Create a form with `id="reset"` and add input field inside `<form>` tag according to your need.

In first step you need to create a form with id="reset" (you can take any id name but make sure that same id name used inside step 3 script code where id called) input fields and submit button.

Syntax -

<form id="reset">
<label> input name </label>
<input type=" " name=" "/>
<button type="submit" > Submit </button>
</form>

Step 2 - Create a input/button with `type="button"` and create a `onclick function` inside it.

In second step you need to create input/button with type="button" and also create onclick function.

Syntax -

<form>
<label> input name </label>
<input type=" " name=" "/>
<input type="button" onclick="newFunction()" value="reset"/>
<button type="submit" > Submit </button>
</form>

Step 3 - Now put below script code inside `<body>` tag.

In third step you need to insert Script code inside body tag.

Syntax -

<script>
function newFunction(){
document.getElementById("reset").reset() ;
}
</script>

Now you can reset or clear a form with reset button.

Below code is combination of all the above steps :-

For Example -

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- bootstrap cdn start -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
    <!-- bootstrap cdn end -->
    <!-- style start-->
    <style>
        .vertical-center {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .input_field_class {
            border: 2px solid white;
            box-sizing: border-box;
            box-shadow: 5px 5px 5px 5px grey;
        }
    </style>
    <!-- style end -->
</head>

<body>

    <div class="container-fluid" style="overflow-x: hidden;">
        <div class="row vertical-center mt-4 mx-4">
            <!-- main form start -->
            <div
                style="width:600px;height:auto;border:10px solid white;box-sizing:border-box;box-shadow:5px 5px 5px 5px grey , grey 5px 5px 5px 5px inset;border-radius:150px 5px 150px 5px;margin-bottom:30px">
                <!-- form div start here -->
                <div class='mx-5 mb-2'>
                    <form action="" method="" id="reset">
                        <label for="full_name" style="font-weight: 600;" class="form-group mt-5">Full Name :</label>
                        <input type="text" name="full_name" id="full_name" placeholder="Full name"
                            class="form-control input_field_class" required> <br>
                        <label for="email" style="font-weight: 600;" class="form-group">Email Id :</label>
                        <input type="text" name="email" id="email" placeholder="Email Address"
                            class="form-control input_field_class" required><br>
                        <label for="dob" style="font-weight: 600;" class="form-group">Date Of Birth :</label>
                        <input type="date" name="dob" id="dob" placeholder="dob" class="form-control input_field_class"
                            required><br>
                        <label for="your_self" style="font-weight: 600;" class="form-group ">About Yourself :</label>
                        <textarea name="your_self" id="your_self" class="form-control input_field_class"></textarea><br>

                        <div class="d-flex justify-content-around mt-4 mb-3"><input type="button" class="btn btn-danger"
                                onclick="newFunction()" value="Reset"><button type="submit" id="btn"
                                class="btn btn-dark">Submit</button></div>
                    </form>
                </div>
                <!-- form div end here -->
            </div>
            <!-- main form end -->
        </div>
    </div>
    <!-- js start here -->
    <script>
        function newFunction() {
            document.getElementById("reset").reset();
        }
    </script>
</body>

</html>

Output

javascript

How to Reset or Clear a Form using javaScript