Preface: Total noob here.
So I'm trying to create a page where:
- Provide a form where a user can enter a phone no.
- Check if the number is in pre-filled sheet (Google sheets), and if it has a corresponding message matched to it.
- Display message depending if there is a match; display generic rejection message if no match or number.
HTML:
<form id="signup-form" method="post" action="#">
<input type="tel" name="tel" id="phone" placeholder="eg. 123456789" />
<input type="submit" value="Receive message" />
</form>
JS:
(function() {
"use strict";
(function() {
var $form = document.querySelectorAll('#signup-form')[0],
$submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
$message;
if (!('addEventListener' in $form))
return;
$message = document.createElement('span');
$message.classList.add('message');
$form.appendChild($message);
$message._show = function(type, text) {
$message.innerHTML = text;
$message.classList.add(type);
$message.classList.add('visible');
};
$message._hide = function() {
$message.classList.remove('visible');
};
$form.addEventListener('submit', function(event) {
event.stopPropagation();
event.preventDefault();
$message._hide();
$submit.disabled = true;
window.setTimeout(function() {
$form.reset();
$submit.disabled = false;
$message._show('success', 'Have a nice day.');
}, 750);
});
})();
})();
I've been trying for the past 3 days, and I know I'm probably missing on quite a lot of stuff here- How can we make this functional?
