Interacting with Forms

Interacting with Forms

Forms are one of the most common ways users interact with web pages. JavaScript lets you read input values, handle submissions, and validate data before it is sent.

Preventing Default Behavior

var form = document.querySelector('form');

form.addEventListener('submit', function(e) {
    e.preventDefault(); // Stops the page from reloading
    console.log('Form submitted!');
});

By default, submitting a form reloads the page. e.preventDefault() stops this, letting you handle the submission with JavaScript.

Reading Input Values

<form id="my-form">
    <input type="text" id="username" placeholder="Username">
    <input type="email" id="email" placeholder="Email">
    <textarea id="message"></textarea>
    <button type="submit">Submit</button>
</form>

var form = document.querySelector('#my-form');

form.addEventListener('submit', function(e) {
    e.preventDefault();

    var username = document.querySelector('#username').value;
    var email = document.querySelector('#email').value;
    var message = document.querySelector('#message').value;

    console.log(username, email, message);
});

The .value property gives you the current content of an input, textarea, or select element.

Input Events

Event	Fires When
input	Value changes (every keystroke)
change	Value changes and input loses focus
focus	Input gains focus
blur	Input loses focus
submit	Form is submitted

Real-time Input Tracking

var input = document.querySelector('#username');

input.addEventListener('input', function(e) {
    console.log('Current value:', e.target.value);
    document.querySelector('#preview').textContent = e.target.value;
});

Resetting a Form

form.addEventListener('submit', function(e) {
    e.preventDefault();
    // Process data...
    form.reset(); // Clears all inputs back to default
});

Key Takeaways

• e.preventDefault() stops the form from reloading the page
• Read input values with .value
• Use the input event for real-time tracking; change for on-blur updates
• form.reset() clears all form fields back to their defaults