Reading Time: 3 minutes

4,940 Views

There are several ways to reset form data using javascript and jquery. Inside this article we will see few methods using jquery where we will reset or clear form data in a very easy way.

This tutorial is going to give you a concept i.e How to clear form data using jQuery. We will see 3 different methods where we will reset form data. You can use any one if you are looking to clear your form data using javascript or jquery.

Learn More –

Let’s get started.

Example #1 – Clear Form Data

Here, you can copy the code and run it into your system.

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>How to Clear Form Data Using jQuery</title>
</head>

<body>
    <form id="my-form">
        <label>First Name:</label>
        <input type="text" name="name" placeholder="Enter name...">
        <input type="submit" value="Submit">
    </form>
    <button type="button" onclick="resetForm();">Reset</button>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function resetForm() {
        document.getElementById("my-form").reset();
    }

</script>

</html>

document.getElementById(“my-form”).reset(); -> Resetting form data

Example #2 – Clear Form Data

Here, you can copy the code and run it into your system.

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>How to Clear Form Data Using jQuery</title>
</head>

<body>
    <form id="my-form">
        <label>First Name:</label>
        <input type="text" name="name" placeholder="Enter name...">
        <input type="submit" value="Submit">
    </form>
    <button type="button" id="btnReset">Reset</button>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("#btnReset").click(function() {
            $("#my-form")[0].reset();
        });
    });

</script>

</html>

$(“#my-form”)[0].reset(); -> Resetting form data

Example #3 – Clear Form Data

Here, you can copy the code and run it into your system.

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>How to Clear Form Data Using jQuery</title>

</head>

<body>
    <form id="my-form">
        <label>First Name:</label>
        <input type="text" name="fname">
        <input type="submit" value="Submit">
    </form>
    <button type="button" id="btnReset">Reset</button>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("#btnReset").click(function() {
            $("#my-form").trigger("reset");
        });
    });

</script>

</html>

$(“#my-form”).trigger(“reset”); -> Resetting form data

We hope this article helped you to How to clear form data using jQuery Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.