JavaScript can select form elements using document.forms, getElementById(), or querySelector().
let form = document.getElementById("myForm");
let username = document.querySelector("#username");
let email = document.forms["myForm"]["email"];To get user input:
let usernameValue = document.getElementById("username").value;
console.log(usernameValue);To set an input value dynamically:
document.getElementById("username").value = "DefaultUser";The submit event triggers when a form is submitted. Use event.preventDefault() to prevent page reload.
document.getElementById("myForm").addEventListener("submit", event => {
event.preventDefault();
console.log("Form submitted!");
});Example of collecting form data:
document.getElementById("myForm").addEventListener("submit", event => {
event.preventDefault();
let username = document.getElementById("username").value;
let email = document.getElementById("email").value;
console.log(`Username: ${username}, Email: ${email}`);
});Validating input fields ensures data correctness before submission.
document.getElementById("myForm").addEventListener("submit", event => {
let username = document.getElementById("username").value;
let email = document.getElementById("email").value;
if (username === "" || email === "") {
event.preventDefault();
alert("All fields are required!");
}
});if (username.length < 3) {
alert("Username must be at least 3 characters long.");
}Use regular expressions to check if an email is valid.
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert("Enter a valid email address.");
}Instead of alert(), error messages can be displayed near the input field.
document.getElementById("myForm").addEventListener("submit", event => {
let username = document.getElementById("username").value;
let errorDiv = document.getElementById("error-message");
if (username.length < 3) {
event.preventDefault();
errorDiv.textContent = "Username must be at least 3 characters long.";
} else {
errorDiv.textContent = "";
}
});<input type="text" id="username">
<div id="error-message" style="color: red;"></div>
JavaScript can validate inputs as users type using the input or keyup event.
document.getElementById("username").addEventListener("input", event => {
let value = event.target.value;
document.getElementById("live-output").textContent = value;
});<input type="text" id="username">
<p>Live Output: <span id="live-output"></span></p>
document.getElementById("subscribe").addEventListener("change", event => {
console.log(event.target.checked ? "Subscribed" : "Unsubscribed");
});<input type="checkbox" id="subscribe">
document.querySelectorAll('input[name="gender"]').forEach(radio => {
radio.addEventListener("change", event => {
console.log("Selected gender:", event.target.value);
});
});<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female">
JavaScript can detect changes in dropdowns and retrieve selected values.
document.getElementById("country").addEventListener("change", event => {
console.log("Selected country:", event.target.value);
});<select id="country">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
</select>Using JavaScript, forms can be auto-filled dynamically.
document.getElementById("autoFill").addEventListener("click", () => {
document.getElementById("username").value = "JohnDoe";
document.getElementById("email").value = "john@example.com";
});<button id="autoFill">Auto-Fill Form</button>
JavaScript allows dynamic handling of user input through forms, validation, and event listeners. The next section will focus on Web APIs, including local storage, geolocation, and Fetch API, for interacting with browser capabilities.