You can use element.value method to clear input fields after submit using JavaScript. The specific steps will be covered in this article. Let’s check it out!
HTMLFormElement
A form is an HTML object that is used to be able to interact with the user. An HTML form contains its internal elements. The HTML elements used in the form are relatively diverse but the most commonly used such as input, checkbox, radio button, and submit button…
Where are forms used? Typically, forms are used to:
- Search
- Contact forms
- Shopping carts checkout
- Login and register
Submit Form Event in Javascript
Form submit event in Javascript, this is the event that helps you control the user submits form action when they click the submit button.
When sending data to the server, we often have to check whether the data format that the user enters is appropriate or not. This helps reduce the load on the server side in some cases.
For example, suppose you create a login form. In that case, if you do not use Javascript to ask users to enter enough username and password information, it is easy for them to submit continuously. This creates pressure on the server. Of course, the server side must go through one more data validation step before updating the database.
Clear input fields after submit using JavaScript
Use element.value method
When you use the element value () method, we can get and change the value of that element. Applying this approach when submitting the program will reset the value of the input in the form back to an empty string which can also be called the clear input field of the form.
Code:
<!DOCTYPE html>
<html>
<head>
<title>LearnShareIT</title>
</head>
<body>
<h1 style="color: blue">LearnShareIT</h1>
<form id="formExample" action="" name="form">
<input type="text" id="name" />
<input type="text" id="age" />
<input onclick="onSubmit()" type="submit" value="Submit" />
</form>
<script>
function onSubmit() {
document.getElementById("name").value = "";
document.getElementById("age").value = "";
}
</script>
</body>
</html>Output:
In the above example, when you select the submit input, the form will catch the onClick event and run to a function that can reset the values in the form to null. But this method seems entirely manual. You can read more about how to do it below.
Use element. reset method
This way, we will point to the form tag and use the reset method when the form submits. Take a look at the example below to learn more about this.
Code:
<!DOCTYPE html>
<html>
<head>
<title>LearnShareIT</title>
</head>
<body>
<h1 style="color: blue">LearnShareIT</h1>
<form id="formExample" action="" name="form" >
<input type="text" id="name" />
<input type="text" id="age" />
<input onclick="onSubmit()" type="submit" value="Submit" />
</form>
<script>
function onSubmit() {
document.getElementById("formExample").reset();
}
</script>
</body>
</html>Once the form is submitted, the program also runs the reset method in the above code. This will cause the form tag to be reset and the input tags inside it to be returned to the original clear state. So the result we get is the same as above, but the code will be neater. I wish you success with these methods.
Summary
To summarize, there are many ways to clear input fields after submit using JavaScript . After reading this article, we know some easy ways, such as using element. value method or element. reset method in Javascript.
Maybe you are interested:
- Check If An Element Is Read-Only Using JavaScript
- Clear Input fields after Submit using JavaScript
- Clear the Content of a Div element using JavaScript
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs
