Progressive Full Stack Application Development with Live Projects

Shopping cart
No products in the cart.
Using Forms in Javascript
JavaScript Lesson

Using Forms in Javascript

Using forms in JavaScript involves several key aspects, including validation, preventing default form submission, reading form values, and updating form values. Below, I’ll cover these concepts with examples to help you get started.

1. Handling Form Submission

To handle form submission in JavaScript, you’ll typically use an event listener. This allows you to control what happens when a user submits the form.

Example HTML Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Example</title>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <br>
        <button type="submit">Submit</button>
    </form>

    <script src="script.js"></script>
</body>
</html>

JavaScript: Handling Form Submission

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('myForm');

    form.addEventListener('submit', function(event) {
        // Prevent the form from submitting in the traditional way
        event.preventDefault();

        // Get form values
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;

        // Perform validation
        if (!name || !email) {
            alert('Please fill in all fields.');
            return;
        }

        // Process form values (e.g., send to server or update the UI)
        console.log(`Name: ${name}`);
        console.log(`Email: ${email}`);

        // Optionally, you can clear the form after submission
        form.reset();
    });
});

2. Validating Form Data

Validation can be handled manually in JavaScript or using HTML5 attributes like required, pattern, and minlength.

Manual Validation Example

In the previous example, simple validation checks if the fields are empty. More complex validation can be added as needed.

HTML5

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">Submit</button>
</form>

HTML5 validation will automatically prevent form submission if the fields don’t meet the criteria (e.g., required, valid email format).

3. Reading Form Values

You can access form values using JavaScript by selecting the form elements and reading their properties.

Example: Reading Values

const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
console.log(`Name: ${name}`);
console.log(`Email: ${email}`);

4. Updating Form Values

You can also programmatically update form values using JavaScript.

Example: Updating Values

// Set new values
document.getElementById('name').value = 'John Doe';
document.getElementById('email').value = 'john.doe@example.com';

5. Submitting the Form Programmatically

You can also submit the form programmatically using JavaScript if needed:

// This will trigger the form's submit event and any attached event listeners
form.submit();

However, if you’re handling the submission with custom logic (like using AJAX), you might want to avoid using form.submit() directly and handle the data manually.

Conclusion

By handling form submissions, performing validation, and reading/updating values programmatically, you can create dynamic and interactive forms. This provides a better user experience and allows for more sophisticated interactions in your web applications.

Leave a Reply