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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title>Reseting 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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.