Convert the contact form to vanilla JS.

This commit is contained in:
Fredrik Jonsson 2022-12-21 13:39:50 +01:00
commit 331be7ebe4

View file

@ -3,59 +3,48 @@
* A JavaScript file for the contact form.
*/
(function ($) {
(function () {
'use strict';
// Contact form.
$('.contact-form').each(function (e) {
var $contact_form = $(e);
var $contact_button = $contact_form.find('.form-submit');
var contact_action = '/php/contact.php';
const form = document.querySelector('.contact-form');
const button = form.querySelector('.form-submit');
const action = form.getAttribute('data-protect');
const body = document.querySelector('body');
// Display the hidden form.
$contact_form.removeClass('hidden');
// Display the hidden form.
form.classList.remove('hidden');
// Wait for a mouse to move, indicating they are human.
$('body').on('mousemove', function () {
// Unlock the form.
$contact_form.attr('action', contact_action);
$contact_button.first().removeAttribute('disabled');
});
function activateForm() {
form.setAttribute('action', action);
button.removeAttribute('disabled');
}
// Wait for a touch move event, indicating that they are human.
$('body').on('touchmove', function () {
// Unlock the form.
$contact_form.attr('action', contact_action);
$contact_button.first().removeAttribute('disabled');
});
// A tab or enter key pressed can also indicate they are human.
$('body').on('keydown', function (e) {
if ((e.keyCode === 9) || (e.keyCode === 13)) {
// Unlock the form.
$contact_form.attr('action', contact_action);
$contact_button.first().removeAttribute('disabled');
}
});
// Mark the form as submitted.
$contact_button.on('click', function () {
$contact_form.addClass('js-submitted');
});
// Display messages.
if (location.search.substring(1) !== '') {
switch (location.search.substring(1)) {
case 'submitted':
$('.contact-submitted').removeClass('hidden');
break;
case 'error':
$('.contact-error').removeClass('hidden');
break;
}
// Wait for a mouse to move, indicating they are human.
body.addEventListener('mousemove', () => activateForm());
// Wait for a touch move event, indicating that they are human.
body.addEventListener('touchmove', () => activateForm());
// A tab or enter key pressed can also indicate they are human.
body.addEventListener('keydown', function (e) {
if ((e.key === 'Tab') || (e.key === 'Enter')) {
activateForm();
}
});
})(u);
// Mark the form as submitted.
button.addEventListener('click', () => form.classList.add('js-submitted'));
// Display messages.
if (location.search.substring(1) !== '') {
switch (location.search.substring(1)) {
case 'submitted':
document.querySelector('.contact-submitted').classList.remove('hidden');
break;
case 'error':
document.querySelector('.contact-error').classList.remove('hidden');
break;
}
}
})();