Javascript Form Events Submit Input Change Complete Guide
Understanding the Core Concepts of JavaScript Form Events submit, input, change
submit Event
The submit event is triggered when a form is submitted to the server. It is often used for form validation and to execute JavaScript functions before the form data is sent to the server. By using event.preventDefault(), you can prevent the default form submission behavior and handle the form data using JavaScript.
Example:
<form id="myForm">
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission
var username = document.querySelector('input[name="username"]').value;
if (username === '') {
alert('Username is required!');
return; // Stop execution
}
// Proceed with form submission or further processing
alert('Form submitted successfully!');
});
</script>
input Event
The input event is fired when the value of an input, textarea, or select element is modified. This event is ideal for real-time validation and updating form data as the user types. Unlike the change event, the input event fires immediately upon any value change, making it suitable for dynamic interactions.
Example:
<input type="text" id="username" placeholder="Type your username">
<script>
document.getElementById('username').addEventListener('input', function(event) {
var value = event.target.value;
if (value.length < 5) {
document.getElementById('username').style.borderColor = 'red';
} else {
document.getElementById('username').style.borderColor = 'green';
}
});
</script>
change Event
The change event occurs when an input element loses focus and its value has been modified since gaining focus. This event is often used for form fields that do not require immediate feedback (e.g., dropdowns, checkboxes, and radio buttons). It is more suitable when the action should occur after the user has finished interacting with the control.
Example:
Online Code run
Step-by-Step Guide: How to Implement JavaScript Form Events submit, input, change
Example 1: Handling Form Submission with submit Event
This example will show you how to handle the form submission event. When the user clicks the submit button, an alert will show the input values without submitting the form to the server.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submit Event</title>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>
<button type="submit">Submit</button>
</form>
<script src="form.js"></script>
</body>
</html>
JavaScript (form.js):
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
alert('Username: ' + username + '\nEmail: ' + email);
});
Explanation:
- HTML: We create a simple form with two input fields and a submit button.
- JavaScript: We add an event listener to the form for the
submitevent. When the form is submitted,event.preventDefault()is called to stop the default action (submitting the form). We then retrieve the values of the input fields and display them in an alert.
Example 2: Handling Input Changes with input Event
This example will show you how to respond to every keystroke in an input field. An alert will show the current value of the input field as the user types.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Input Event</title>
</head>
<body>
<h2>Input Event Example</h2>
<label for="userInput">Type something:</label>
<input type="text" id="userInput">
<script src="form.js"></script>
</body>
</html>
JavaScript (form.js):
document.getElementById('userInput').addEventListener('input', function(event) {
const currentValue = event.target.value;
console.log('Current Value:', currentValue);
// Optionally, you could show a real-time update in another HTML element.
document.getElementById('display').innerText = 'You typed: ' + currentValue;
});
Additional HTML for Display (<div id="display"></div>):
<div id="display"></div>
Explanation:
- HTML: An input field for the user to type.
- JavaScript: We add an event listener to the input field for the
inputevent. Each time the user types in the input field, the value is retrieved and displayed in adiv.
Example 3: Handling Change Events with change Event
This example will show you how to handle the change event, which fires when an input changes its value and loses focus.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Change Event</title>
</head>
<body>
<form id="changeForm">
<label for="changeInput">Type and then click outside:</label>
<input type="text" id="changeInput">
<br><br>
<label for="changeSelect">Choose an option:</label>
<select id="changeSelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</form>
<div id="changeDisplay"></div>
<script src="form.js"></script>
</body>
</html>
JavaScript (form.js):
Login to post a comment.