ajaxify_content_form.html 1.0 KB

123456789101112131415161718192021222324252627282930
  1. <script>
  2. var contactForm = document.querySelector('form'),
  3. inputEmail = contactForm.querySelector('[name="email"]'),
  4. textAreaMessage = contactForm.querySelector('[name="content"]'),
  5. sendButton = contactForm.querySelector('button');
  6. sendButton.addEventListener('click', function(event){
  7. event.preventDefault();
  8. sendButton.innerHTML = '{{ site.text.contact.ajax.sending }}';
  9. var xhr = new XMLHttpRequest();
  10. xhr.open('POST', '//formspree.io/{{ site.email }}', true);
  11. xhr.setRequestHeader("Accept", "application/json")
  12. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  13. xhr.send(
  14. "email=" + inputEmail.value +
  15. "&message=" + textAreaMessage.value);
  16. xhr.onloadend = function (res) {
  17. if (res.target.status === 200){
  18. sendButton.innerHTML = '{{ site.text.contact.ajax.sent }}';
  19. }
  20. else {
  21. sendButton.innerHTML = '{{ site.text.contact.ajax.error }}';
  22. }
  23. }
  24. });
  25. </script>