How to Clear Form Data Using jQuery

Share this Article
Reading Time: 3 minutes
347 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.

Buy Me a Coffee

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.

Learn More about jQuery & Javascript Concept