[06] Sample AJAX for Connecting Element Form to Sever: In Case server is Spreadsheat Google Script and API's

This function is used when you send data in element form to sever using XMLHTPPSRequest.

<script data-cfasync="false" >
  (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
  
  Eksekusi();
  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 formElementsPlus = form.querySelector(".pesanawalawal");
    if (formElementsPlus) {
            formElementsPlus.style.display = "none"; // hide form
          }
          var thankYouMessage = form.querySelector(".thankyou_message");
          if (thankYouMessage) {
            thankYouMessage.style.display = "block";
   var namathankyou = document.namaku.panggilsaya.value;
   document.getElementById("siswasukses").innerHTML = namathankyou;
          }
        }
    };
    // 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);

 //untuk versi 2020G
 function KoleksiDataForm(form){
 //--------- mendefinisikan beberapa element
 var koleksielement = form.elements;
 //--------- element yang digunakan untuk element spam
 var koleksispam;


 var bidangdata = Object.keys(koleksielement).filter(function(k) {
 if (koleksielement[k].name === "koleksispam") {
        koleksispam = koleksielement[k].value;
        return false;
      }
      return true;
    }).map(function(k) {
      if(koleksielement[k].name !== undefined) {
        return koleksielement[k].name;
      }else if(koleksielement[k].length > 0){
        return koleksielement[k].item(0).name;
      }
    }).filter(function(item, pos, self) {
      return self.indexOf(item) == pos && item;
    });

    var Dataform = {};
    bidangdata.forEach(function(name){
      var element = koleksielement[name];
  // jika datanya memiliki satu nilai (value), biasanya berupa teks dalam value.
      Dataform[name] = element.value;
 
 // ketika data value-nya bukan teks, seperti value pada tag input type radio, atau tag select, maka dibuatkan array lagi dengan fungsi tambah array [.push('new Array')
 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);
          }
        }
        Dataform[name] = data.join(', ');
      }
    });

 Dataform.formDataNameOrder = JSON.stringify(bidangdata);
    Dataform.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
    Dataform.formGoogleSendEmail = form.dataset.email || ""; // no email by default

    return {data: Dataform, koleksispam: koleksispam};
  }

  function submitVersi2020G(event) {  // handles form submit without any jquery
 
  Eksekusi();

  event.preventDefault();           // we are submitting via xhr below
    var form = event.target;
    var formData = KoleksiDataForm(form) ;// getFormData(form);
    var data = formData.data;

    // If a honeypot field is filled, assume it was done so by a spam bot.
    if (formData.koleksispam) {
      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 formElementsPlus = form.querySelector(".pesanawalawal");
    if (formElementsPlus) {
            formElementsPlus.style.display = "none"; // hide form
          }
          var thankYouMessage = form.querySelector(".thankyou_message");
          if (thankYouMessage) {
            thankYouMessage.style.display = "block";
     var namathankyou = document.namaku.panggilsaya.value;
   document.getElementById("siswasukses").innerHTML = namathankyou;
  
          }
        }
    };
    // 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 loadedd() {
    // bind to the submit event of our form
    var forms = document.querySelectorAll("form.gformV2020G");
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener("submit", submitVersi2020G, false);
    }
  };
  document.addEventListener("DOMContentLoaded", loadedd, false);
//selesai versi 2020G
  
  function disableAllButtons(form) {
    var buttons = form.querySelectorAll("button");
    for (var i = 0; i < buttons.length; i++) {
            buttons[i].innerHTML = "Sedang Proses";
   buttons[i].disabled = true;
    }
  }
})();
  </script>