How to reset or clear a form using JavaScript with .reset() method


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


Related Topics