title: How to send data from HTML form to Google Spreadsheet using JavaScript?
body: <p>I'm trying to build a webapp that records datas from a form in a Google Spreadsheet. To do this, I <strong>have</strong> to use JavaScript (JSON or AJAX requests will work as well), but I <strong>cannot</strong> use Google Apps Script because I need the user to keep using my pages and GAS doesn't allow it.</p>
  
  <p>I'm not so much versed in JSON requests but I tried to make an append one: no surprise, it's not working and no surprise, I don't know why.</p>
  
  <p>I'm not sure the URL I used to make the request and the code are correct, but not knowing very well how to proceed, it's quite difficult to know what's wrong in my code.</p>
  
  <p>That's my form:</p>
  
  <pre><code>    &lt;form name="reqForm" id="reqForm" method="post" action="" accept-charset="UTF-8" enctype="application/json"&gt;
              &lt;input type="hidden" name="area" id="area" readonly/&gt;
              &lt;input type="hidden" name="idN" id="idN" readonly/&gt;
              &lt;input type="hidden" name="dataReq" id="dataReq" readonly /&gt;
              &lt;label for="nome"&gt;* Nome:&lt;/label&gt;
              &lt;input type="text" id="nome" name="nome" placeholder="Il tuo nome" /&gt;
              &lt;label for="cognome"&gt;* Cognome:&lt;/label&gt;
              &lt;input type="text"  id="cognome" name="cognome" placeholder="Il tuo cognome" /&gt;
              &lt;label for="mat"&gt;* Matricola:&lt;/label&gt;
              &lt;input type="text" id="mat" name="mat" placeholder="La tua matricola" /&gt;
              &lt;label for="mail"&gt;* E-mail:&lt;/label&gt;
              &lt;input type="text" id="mail" name="mail" placeholder="La tua e-mail" /&gt;
              &lt;label for="testo"&gt;* Richiesta:&lt;/label&gt;
              &lt;textarea id="testo" name="testo" placeholder="Che cosa vuoi chiedere?"&gt;&lt;/textarea&gt;
              &lt;button type="button" value="Invia" onClick="check()"&gt;Invia&lt;/button&gt;
          &lt;/form&gt;`
  </code></pre>
  
  <p>The hidden values are set to provide an ID Number and the user's path.</p>
  
  <p>The <code>check()</code> function will check the form and (should) make the request and write in the GSpreadSheet</p>
  
  <pre><code>    function check() {
  
  document.getElementById('errorForm').innerHTML = "";
  
  var a = document.getElementById('area').value;
  var idN = document.getElementById('idN').value;
  var n = document.getElementById('nome').value;
  var c = document.getElementById('cognome').value;
  var m = document.getElementById('mat').value;
  var em= document.getElementById('mail').value;
  var t = document.getElementById('testo').value;
  
  // check the possible errors and set error messages.
      // if msg is not empty, writes the messages in my page.
  
  } else if(msg == "") {
      var xhr = new XMLHttpRequest();
      var key = mySheetKey, sName =  mySheetName, url = "https://sheets.googleapis.com/v4/spreadsheets/"+key+"/values/"+ sName + ":append?valueInputOption=USER_ENTERED";
  
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-type", "application/json");
      xhr.onreadystatechange = function() {
          if(xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
              var json = JSON.parse(xhr.responseText);
          }
      // Here I should create the object made of my variables I read 
      // from my form at the beginning of the code and send the request that
      // should append my datas to my Spreadsheet
  
      xhr.send();
      } 
      }
  </code></pre>
  
  <p>As I said before, my code look similar to several ones I found online but it's not working and I don't know how to understand what's wrong. </p>
  
  <p>Could you please kindly give me some tips or advice or some example that could help me <strong>appending data to a Google Spreadsheet</strong>?</p>