cetcweb/contact.js at main · CodeitLina/cetcweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
function sendMail() {
    //this function is used to send an email to the site owner
    let params = {
        cname: document.getElementById('contactName').value,
        email: document.getElementById('contactEmail').value,
        message: document.getElementById('contactMessage').value
    };

    if (!params.cname || !params.email || !params.message) {
        alert("All fields are required.");
        return;
    }

    const submitButton = document.getElementById('form-submit');
    submitButton.innerHTML = "Submitting...";

    emailjs.send("service1", "george13", params).then(function(response) {
        alert("Email sent!");
        submitButton.innerHTML = "Submitted!";
        console.log("SUCCESS!", response.status, response.text);
    }, function(error) {
        console.error("FAILED...", error);
        alert("Failed to send email. Please try again.");
    });
}

document.addEventListener("DOMContentLoaded", function () {
    'use strict';

    const form = document.querySelector('.needs-validation');
    const inputs = form.querySelectorAll('.form-control');

    inputs.forEach(input => {
        const validFeedback = input.parentElement.querySelector('.valid-feedback');
        const invalidFeedback = input.parentElement.querySelector('.invalid-feedback');

        // Hide validation messages initially
        if (validFeedback) validFeedback.style.display = 'none';
        if (invalidFeedback) invalidFeedback.style.display = 'none';

        input.addEventListener('input', () => {
            if (input.checkValidity()) {
                input.classList.add('is-valid');
                input.classList.remove('is-invalid');
                if (validFeedback) validFeedback.style.display = 'block';
                if (invalidFeedback) invalidFeedback.style.display = 'none';
            } else {
                input.classList.add('is-invalid');
                input.classList.remove('is-valid');
                if (validFeedback) validFeedback.style.display = 'none';
                if (invalidFeedback) invalidFeedback.style.display = 'block';
            }
        });

        input.addEventListener('blur', () => {
            if (input.value.trim()) {
                if (input.checkValidity()) {
                    input.classList.add('is-valid');
                    input.classList.remove('is-invalid');
                    if (validFeedback) validFeedback.style.display = 'block';
                    if (invalidFeedback) invalidFeedback.style.display = 'none';
                } else {
                    input.classList.add('is-invalid');
                    input.classList.remove('is-valid');
                    if (validFeedback) validFeedback.style.display = 'none';
                    if (invalidFeedback) invalidFeedback.style.display = 'block';
                }
            } else {
                input.classList.remove('is-valid', 'is-invalid');
                if (validFeedback) validFeedback.style.display = 'none';
                if (invalidFeedback) invalidFeedback.style.display = 'none';
            }
        });
    });

    form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
        }
        form.classList.add('was-validated');
    }, false);
});