const inputContainer = document.getElementById('wfb_subscription-input-container');
const input = document.getElementById('wfb_subscription-input');
const inputField = document.getElementById('wfb_subscription-input-field');
const button = document.getElementById('wfb_subscription-button');
const errorMessage = document.getElementById('wfb_input-field-error-message');
const successMessage = document.getElementById('wfb_input-field-success-message');
inputContainer.addEventListener('click', (event) => {
input.classList.toggle("wfb_show");
inputField.focus();
});
inputField.addEventListener("mouseover", (event) => {
if (inputField.value == undefined || inputField.value == null || inputField.value == "") {
input.classList.add("wfb_active-input-field");
inputField.classList.add("wfb_active-input-field");
}
});
inputField.addEventListener("input", (event) => {
input.classList.remove("wfb_active-input-field");
inputField.classList.remove("wfb_active-input-field");
errorMessage.classList.remove("wfb_show");
});
function sendData() {
var email = jQuery(inputField).val();
var data = {
email: email
};
jQuery.ajax({
type: "post",
url: "/blog/api-call",
data: data,
success: function (response) {
console.log('SUCCESS BLOCK');
gtag('event', 'signup', { 'event_category': 'blog', 'event_label': window.location.pathname});
},
error: function (response) {
console.log('ERROR BLOCK');
}
});
}
function submitResponse(event) {
event.preventDefault();
var email = inputField.value;
var isEmailValid = validateEmail(email);
if (! isEmailValid) {
errorMessage.classList.add("wfb_show");
input.classList.add("wfb_show_error");
} else {
errorMessage.classList.remove("wfb_show");
input.classList.remove("wfb_show");
input.classList.remove("wfb_show_error");
successMessage.classList.add("wfb_show");
button.classList.add("wfb_hide");
inputField.classList.add("wfb_hide");
inputContainer.classList.add("wfb_hide");
sendData();
}
}
function validateEmail(email) {
var re = /^(([^<>()[\].,;:\s@"]+(.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
button.addEventListener("click", submitResponse);