Prev Next

DOM Forms

The DOM allows interaction with HTML forms, enabling developers to read and manipulate form fields, validate input, and handle form submissions dynamically using JavaScript.

Key Topics

Accessing Form Elements

Form elements can be accessed using the document.forms collection, or by using methods like getElementById and querySelector.

const form = document.forms["myForm"];
console.log(form["username"].value);

Output

(Logs the value of the username field in the form.)

Explanation: The forms collection allows you to access a form by its name or index and retrieve its elements by their names or IDs.

Reading Field Values

You can access and modify the values of form fields using their value property.

const usernameField = document.getElementById("username");
console.log(usernameField.value);
usernameField.value = "NewUsername";

Output

(Logs the current value of the username field and updates it to "NewUsername".)

Explanation: The value property of an input element gets or sets the current value of the field.

Handling Form Submission

JavaScript can intercept form submissions using the submit event to validate input or prevent default behavior.

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    const username = document.getElementById("username").value;
    console.log("Submitted username:", username);
});

Output

(Logs the submitted username and prevents form submission.)

Explanation: The addEventListener method attaches a submit event listener to the form, and event.preventDefault prevents the form's default submission behavior.

JavaScript Usage in DOM

Below is a complete DOM example demonstrating form manipulation and submission handling using JavaScript.

<!DOCTYPE html>
<html>
    <head>
        <title>DOM Forms Example</title>
    </head>
    <body>
        <form id="myForm">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" value="JohnDoe">
            <button type="submit">Submit</button>
        </form>

        <script>
            document.getElementById("myForm").addEventListener("submit", function(event) {
                event.preventDefault();
                const username = document.getElementById("username").value;
                console.log("Submitted username:", username);
            });
        </script>
    </body>
</html>

Key Takeaways

  • Accessing Forms: Use the document.forms collection or methods like getElementById.
  • Reading Field Values: Access and modify form fields using the value property.
  • Form Submission: Handle the submit event to validate inputs or prevent default actions.
  • DOM Integration: Dynamically interact with forms to improve user experience.
Prev Next