Googleスプレッドシートのフォームからデータを記録するwebappを構築しようとしています。これを行うには、にのJavaScriptを使用する必要があります（JSONまたはAJAXリクエストも同様に動作します）。はGoogle Apps Scriptを使用できません。JavaScriptを使用してHTMLフォームからGoogleスプレッドシートにデータを送信するにはどうすればよいですか？

私はJSONリクエストにあまり精通していませんが、私は1つ追加しようとしました。驚きではなく、うまく動作せず、驚くこともありません。

私は私が要求してコードを作るために使用されるURLが正しいですが、続行する方法を非常によく知っていない、それは私のコードで間違っているのかを知ることは非常に困難だか分かりません。

私のフォームです：

<form name="reqForm" id="reqForm" method="post" action="" accept-charset="UTF-8" enctype="application/json"> 
      <input type="hidden" name="area" id="area" readonly/> 
      <input type="hidden" name="idN" id="idN" readonly/> 
      <input type="hidden" name="dataReq" id="dataReq" readonly /> 
      <label for="nome">* Nome:</label> 
      <input type="text" id="nome" name="nome" placeholder="Il tuo nome" /> 
      <label for="cognome">* Cognome:</label> 
      <input type="text" id="cognome" name="cognome" placeholder="Il tuo cognome" /> 
      <label for="mat">* Matricola:</label> 
      <input type="text" id="mat" name="mat" placeholder="La tua matricola" /> 
      <label for="mail">* E-mail:</label> 
      <input type="text" id="mail" name="mail" placeholder="La tua e-mail" /> 
      <label for="testo">* Richiesta:</label> 
      <textarea id="testo" name="testo" placeholder="Che cosa vuoi chiedere?"></textarea> 
      <button type="button" value="Invia" onClick="check()">Invia</button> 
     </form>`

隠された値は、ID番号とユーザーのパスを提供するように設定されています。

check()機能は、フォームをチェックして、（はず）要求を行うと、私が前に言ったようにGSpreadSheet

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 && 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(); 
    } 
    }

に書きますが、私のコードは私がオンラインで見つけるいくつかのものに似ていますが、それは働いていないと私は何が間違っているかを理解する方法を知らない。

私は助けてくれるヒントやアドバイス、または助けてくれる例を教えてくださいGoogleスプレッドシートにデータを追加してもよろしいですか？

出典

2017-06-17 Simone

なぜあなたはXMLHttpRequestと$ .ajaxを使っていますか？それはちょっとばかりです。 elseにifがどこにありますか？ – mplungjan

この目的に使用されているapiに従ってくださいhttps://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append –

@mplungjan本当に申し訳ありません...これは私には新しく、私はAJAXやXMLHttpRequestに精通していません...私にいくつかのヒントを教えてください。お返事のための – Simone

簡単なスプレッドシートに含まれるWebアプリケーションの例

$(function() { 
     $('#btn1').click(validate); 
     $('#txt4').val(''); 
     $('#txt3').val(''); 
     $('#txt2').val(''); 
     $('#txt1').val('') 
     }); 
function validate() 
{ 
    var txt1 = document.getElementById('txt1').value || ' '; 
    var txt2 = document.getElementById('txt2').value || ' '; 
    var txt3 = document.getElementById('txt3').value || ' '; 
    var txt4 = document.getElementById('txt4').value || ' '; 
    var a = [txt1,txt2,txt3,txt4]; 
    if(txt1 && txt2 && txt3 && txt4) 
    { 
     google.script.run 
     .withSuccessHandler(setResponse) 
     .getData(a); 
     return true; 
    } 
    else 
    { 
     alert('All fields must be completed.'); 
    } 
}

全体例：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 
    <div id="data"> 
    <br />Text 1<input type="text" size="15" id="txt1" /> 
    <br />Text 2<input type="text" size="15" id="txt2" /> 
    <br />Text 3<input type="text" size="15" id="txt3" /> 
    <br />Text 4<input type="text" size="15" id="txt4" /> 
    <br /><input type="button" value="submit" id="btn1" /> 
    </div> 
    <div id="resp" style="display:none;"> 
    <h1>Response</h1> 
    <p>Your data has been received.</p> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
     $('#btn1').click(validate); 
     $('#txt4').val(''); 
     $('#txt3').val(''); 
     $('#txt2').val(''); 
     $('#txt1').val('') 
     }); 

     function setResponse(a) 
     { 
     if(a) 
     { 
      $('#data').css('display','none'); 
      $('#resp').css('display','block'); 
     } 
     } 

     function validate() 
     { 
     var txt1 = document.getElementById('txt1').value || ' '; 
     var txt2 = document.getElementById('txt2').value || ' '; 
     var txt3 = document.getElementById('txt3').value || ' '; 
     var txt4 = document.getElementById('txt4').value || ' '; 
     var a = [txt1,txt2,txt3,txt4]; 
     if(txt1 && txt2 && txt3 && txt4) 
     { 
      google.script.run 
      .withSuccessHandler(setResponse) 
      .getData(a); 
      return true; 
     } 
     else 
     { 
      alert('All fields must be completed.'); 
     } 
     } 

     function loadTxt(from,to) 
     { 
      document.getElementById(to).value = document.getElementById(from).value; 
     } 

    console.log('My Code'); 
    </script> 
    </body> 
</html>

ザ・Appsスクリプト：

function getData(a) 
{ 
    var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss"); 
    a.push(ts); 
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Login').appendRow(a); 
    return true; 
} 

function doGet() 
{ 
    var html = HtmlService.createHtmlOutputFromFile('index'); 
    return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) 

}

私の簡単なスプレッドシート：

良いニュースは、あなたが開始する前に、あなたはおそらく今よりもGoogle Chromeのデバッガを使用しての多くの方だということです。

出典

2017-06-17 18:18:34 Cooper

私が間違っていると私を訂正してください：あなたのコードは自分のデータを私のスプレッドシートに書き込むGoogle App Scriptに送りますか？ – Simone

関数getData（a）は、サーバー上のgsファイルにあります。このコードは単純なWebアプリケーションから来ています。これは、テキスト値の配列を送信しています。 – Cooper

はい、Webアプリケーションからスプレッドシートにバインドされたスクリプトにデータを送信し、そのたびに新しいデータの行が追加されます。注：htmlファイル全体は含まれていません。私は 'フォーム'それ自体を使用していませんが、最終的にはデータがクライアントからサーバーに移動してから、設定された応答を介してクライアントに戻るということです。 – Cooper

JavaScriptを使用してHTMLフォームからGoogleスプレッドシートにデータを送信するにはどうすればよいですか？

答えて

簡単なスプレッドシートに含まれるWebアプリケーションの例

関連する問題