Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript Create Submit button for form submission and another button to clear input
Form handling is a fundamental aspect of web development. A Submit button sends the form data for processing, while a Clear button allows users to reset or empty the form inputs. This functionality enhances user experience and ensures proper data entry.
In this tutorial, we'll learn how to create a form with a Submit button for handling submissions and a Clear button for resetting inputs using JavaScript. We'll also handle the actions triggered by these buttons effectively.
Creating a Submit Button for Form Submission
Below is an example of creating a submit button for form submission and another button to clear input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Submit and Clear Buttons</title>
</head>
<body>
<h2>Form with Submit and Clear Buttons</h2>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<br><br>
<!-- Submit and Clear Buttons -->
<button type="button" id="submitBtn">Submit</button>
<button type="button" id="clearBtn">Clear</button>
</form>
<div id="output"></div>
<script>
// Get references to the form and buttons
const form = document.getElementById("myForm");
const submitButton = document.getElementById("submitBtn");
const clearButton = document.getElementById("clearBtn");
const outputDiv = document.getElementById("output");
// Submit button functionality
submitButton.addEventListener("click", () => {
// Collect form data
const formData = new FormData(form);
const name = formData.get("name");
const email = formData.get("email");
// Validate inputs
if (!name || !email) {
outputDiv.innerHTML = "<p style='color: red;'>Please fill out all fields!</p>";
return;
}
// Display the form data
outputDiv.innerHTML = `
<h3>Form Submitted Successfully!</h3>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
`;
});
// Clear button functionality
clearButton.addEventListener("click", () => {
form.reset(); // Reset the form fields
outputDiv.innerHTML = "<p style='color: blue;'>Form cleared!</p>";
});
</script>
</body>
</html>
Output
When you run this code, you'll see a form with Name and Email fields, along with Submit and Clear buttons. After entering data and clicking Submit, the form data will be displayed below the form. The Clear button will reset all fields and show a confirmation message.
Using Native Form Submission
You can also use the browser's native form submission by changing the button type to "submit":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Native Form Submission</title>
</head>
<body>
<h2>Native Form Submission</h2>
<form id="nativeForm" action="#" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<button type="submit">Submit</button>
<button type="reset">Clear</button>
</form>
<div id="message"></div>
<script>
const nativeForm = document.getElementById("nativeForm");
const messageDiv = document.getElementById("message");
// Handle form submission
nativeForm.addEventListener("submit", (event) => {
event.preventDefault(); // Prevent actual submission
const formData = new FormData(nativeForm);
const username = formData.get("username");
const password = formData.get("password");
messageDiv.innerHTML = `
<h3>Login Attempt</h3>
<p><strong>Username:</strong> ${username}</p>
<p><strong>Password:</strong> ${'*'.repeat(password.length)}</p>
`;
});
// Handle form reset
nativeForm.addEventListener("reset", () => {
setTimeout(() => {
messageDiv.innerHTML = "<p style='color: green;'>Form has been reset!</p>";
}, 10);
});
</script>
</body>
</html>
Code Explanation
HTML Setup:
- The form contains input fields with appropriate types (text, email, password)
- Buttons use
type="button"for custom handling ortype="submit"/type="reset"for native behavior - Each element has unique
idattributes for JavaScript targeting
JavaScript Functionality:
Submit Button:
- Event listener captures the click event
-
FormDataAPI collects all form values efficiently - Input validation ensures required fields are filled
- Results are displayed in the DOM or can be sent to a server
Clear Button:
- Uses
form.reset()method to clear all input fields - Provides user feedback through DOM updates
Key Features
| Method | Approach | Use Case |
|---|---|---|
| Custom Submit | type="button" + addEventListener | AJAX submissions, validation |
| Native Submit | type="submit" + form action | Traditional page submissions |
| Custom Clear | form.reset() + feedback | Enhanced user experience |
| Native Reset | type="reset" | Simple form clearing |
Conclusion
Creating Submit and Clear buttons in JavaScript provides flexible form handling options. Use custom event handlers for complex validation and AJAX submissions, or leverage native form features for simpler implementations.
2K+ Views
