Open In App

How to clear form after submit in Javascript without using reset?

Improve
Improve
Like Article
Like
Save
Share
Report

Forms in javascript are used to take the selective or required information from the user. There are various areas and purposes to use forms, i.e, in recruitment, when applying for some kind of jobs, or for asking some types of queries. It is easy to distribute form when it is not online but when it comes to the online field one cannot distribute a form, they have to use the same structure for everyone. In this case, they create one good structure and offer it to every one whosoever wants to go through that particular process and it is easy to proceed further in the online format. 

Submitting the form is the process after filling the form in which the filled form has to be submitted to the authorities. But it is the work of the designer to play with the programming part of the form. In this section, we will learn about how to clear the form after submitting it in Javascript without using reset? 

Example: Let’s create an Html form with the help of Tables. Here take some fields in the form, i.e, name, phone number, email, description and a submit button. These fields must have ids along with then. In this code, we are using submit in type by which our form will get submitted but to make it free from the filled date we are calling a function of name fun(). Using this function we will set the value of all fields equal to nothing. This function will be written in javascript and in the script tag. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Resetting the form without reset method</title>
    <script>
        function fun(){
            document.getElementById('name').value='';
            document.getElementById('mail').value='';
            document.getElementById('phone').value='';
            }
    </script>
    <style>
        input[type=submit] {
            position: relative;
            float: right;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <b>
          clear form after submit in Javascript
          without using reset
        </b>
        <form id="d" action="/cgi-bin/test.cgi" name="geek">
            <table cellspacing="0" cellpadding="3" border="1">
                <tr>
                    <td align="center">Username</td>
                    <td>
                        <input type="text" id="name"/>
                    </td>
                </tr>
                <tr>
                    <td align="center">Email</td>
                    <td>
                        <input type="text" id="mail"/>
                    </td>
                </tr>
                <tr>
                    <td align="center">Ph no</td>
                    <td>
                        <input type="tel" id="phone"/>
                    </td>
                </tr>
                <tr>
                    <td align="center"></td>
                    <td>
                        <input onclick="fun()"
                               type="submit" value="Submit" />
                    </td>
                </tr>
            </table>
        </form>
 
    </center>
</body>
 
</html>


Output: 



Last Updated : 24 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads