Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Forms are the primary way users interact with web applications. Learn how to capture, validate, and process form data with JavaScript!
e.preventDefault() on form submit to stop page reload and handle data with JavaScript instead!const form = document.querySelector('#myForm');
form.addEventListener('submit', function(e) {
e.preventDefault(); // Stop page reload
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
console.log('Name:', name);
console.log('Email:', email);
});const form = document.querySelector('#form');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Method 1: By ID
const name = document.querySelector('#name').value;
// Method 2: Form elements collection
const email = form.elements.email.value;
// Method 3: FormData API
const formData = new FormData(form);
const age = formData.get('age');
});form.addEventListener('submit', function(e) {
e.preventDefault();
// Radio button (selected value)
const gender = document.querySelector(
'input[name="gender"]:checked'
).value;
// Checkbox (checked state)
const subscribe = document.querySelector(
'#subscribe'
).checked;
console.log('Gender:', gender);
console.log('Subscribe:', subscribe);
});form.addEventListener('submit', function(e) {
e.preventDefault();
// Select dropdown
const country = document.querySelector(
'#country'
).value;
// Textarea
const message = document.querySelector(
'#message'
).value;
console.log('Country:', country);
console.log('Message:', message);
});element.value - Text inputs, textarea, selectelement.checked - Checkbox, radio (boolean)form.elements.name - By name attributeFormData(form) - All form datatext - Single line textemail - Email with validationnumber - Numeric inputcheckbox - Multiple optionsradio - Single optionsubmit - Form submittedinput - Value changed (live)change - Value committedfocus - Input focusedblur - Input lost focusinput[name="x"]:checked.valuee.preventDefault() on submit and consider using the FormData API for complex forms!