Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
a day ago

What is the solution for correcting the form submission handler code when employing a static email sender on a JavaScript website?

I have used a static email sender in my project, and it worked fine when I used it a few times. However, when I tried to use the form submission handler code in this project, it didn't work. As a result, I can send and receive emails, but I am forced to access a JSON file that displays the data that was sent. I tried to fix the issue for a while, but here is the HTML code for my website:




    
    
    
    
    Visual Databases


    
    
    
    

name:


email:

the issue:



thank you!

Main Page Download Tutorial report issue
And here is the code for "form-submission-handler.js":

(function() {
    // get all data in form and return object
    function getFormData(form) {
      var elements = form.elements;
      var honeypot;
  
      var fields = Object.keys(elements).filter(function(k) {
        if (elements[k].name === "honeypot") {
          honeypot = elements[k].value;
          return false;
        }
        return true;
      }).map(function(k) {
        if(elements[k].name !== undefined) {
          return elements[k].name;
        // special case for Edge's html collection
        }else if(elements[k].length > 0){
          return elements[k].item(0).name;
        }
      }).filter(function(item, pos, self) {
        return self.indexOf(item) == pos && item;
      });
  
      var formData = {};
      fields.forEach(function(name){
        var element = elements[name];
        
        // singular form elements just have one value
        formData[name] = element.value;
  
        // when our element has multiple items, get their values
        if (element.length) {
          var data = [];
          for (var i = 0; i < element.length; i++) {
            var item = element.item(i);
            if (item.checked || item.selected) {
              data.push(item.value);
            }
          }
          formData[name] = data.join(', ');
        }
      });
  
      // add form-specific values into the data
      formData.formDataNameOrder = JSON.stringify(fields);
      formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
      formData.formGoogleSendEmail
        = form.dataset.email || ""; // no email by default
  
      return {data: formData, honeypot: honeypot};
    }
  
    function handleFormSubmit(event) {  // handles form submit without any jquery
      event.preventDefault();           // we are submitting via xhr below
      var form = event.target;
      var formData = getFormData(form);
      var data = formData.data;
  
      // If a honeypot field is filled, assume it was done so by a spam bot.
      if (formData.honeypot) {
        return false;
      }
  
      disableAllButtons(form);
      var url = form.action;
      var xhr = new XMLHttpRequest();
      xhr.open('POST', url);
      // xhr.withCredentials = true;
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            form.reset();
            var formElements = form.querySelector(".form-elements")
            if (formElements) {
              formElements.style.display = "none"; // hide form
            }
            var thankYouMessage = form.querySelector(".thankyou_message");
            if (thankYouMessage) {
              thankYouMessage.style.display = "block";
            }
          }
      };
      // url encode form data for sending as post data
      var encoded = Object.keys(data).map(function(k) {
          return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
      }).join('&');
      xhr.send(encoded);
    }
    
    function loaded() {
      // bind to the submit event of our form
      var forms = document.querySelectorAll("form.gform");
      for (var i = 0; i < forms.length; i++) {
        forms[i].addEventListener("submit", handleFormSubmit, false);
      }
    };
    document.addEventListener("DOMContentLoaded", loaded, false);
  
    function disableAllButtons(form) {
      var buttons = form.querySelectorAll("button");
      for (var i = 0; i < buttons.length; i++) {
        buttons[i].disabled = true;
      }
    }
  })();
Note that while most of this code is taken from different projects, I have modified it to suit this project's requirements.
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
It seems like there might be an issue with the form submission handler code not working properly. The code is using XMLHttpRequest to submit the form data to a Google Sheet via a server. However, the code seems to be failing to submit the data. One potential solution might be to check the Google Sheet settings to ensure that the form is properly authorized to submit data. Additionally, double-checking the form's action URL to make sure it is correctly formatted might also be helpful. Other potential issues could be related to the code itself. Try debugging it to see if there are any syntax errors or other issues. Make sure that the scripts are being loaded properly in the HTML file and that there are no conflicts between files.
;