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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
24 Apr, 2023
Like Article
Save Article