如何使用JavaScript将数据从HTML表单发送到Google Spreadsheet？ [英] How to send data from HTML form to Google Spreadsheet using JavaScript?
本文介绍了如何使用JavaScript将数据从HTML表单发送到Google Spreadsheet？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试构建一个web应用程序，用于记录Google Spreadsheet中的表单中的数据。为此，我有使用JavaScript（JSON或AJAX请求也可以），但我不能使用Google Apps脚本，因为我需要用户继续使用我的网页和GAS不允许它。
我对JSON请求不太熟悉，但我试图做一个追加：毫不奇怪，它不工作，没有意外，我不知道为什么。
我不确定我用来发出请求和代码的URL是否正确，但不知道如何继续，很难知道我的代码中有什么问题。
这是我的表单：
< form name =reqFormid =reqFormmethod =postaction =accept-charset =UTF-8enctype =application / json>
< input type =hiddenname =areaid =areareadonly />
< input type =hiddenname =idNid =idNreadonly />
< input type =hiddenname =dataReqid =dataReqreadonly />
< label for =nome> * Nome：< / label>
< input type =textid =nomename =nomeplaceholder =Il tuo nome/>
< label for =cognome> * Cognome：< / label>
< input type =textid =cognomename =cognomeplaceholder =Il tuo cognome/>
< label for =mat> * Matricola：< / label>
< input type =textid =matname =matplaceholder =La tua matricola/>
< label for =mail> *电子邮件：< / label>
< input type =textid =mailname =mailplaceholder =La tua e-mail/>
< label for =testo> * Richiesta：< / label>
< button type =buttonvalue =InviaonClick =check（）> Invia< / button>
< / form>`
隐藏值被设置为提供ID号和用户的路径。
$ b
check（）函数将检查表单和（应该）发出请求并写入在GSpreadSheet中
函数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;
//检查可能的错误并设置错误信息。
//如果msg不为空，则将消息写入我的页面。
} 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）;
}
//在这里，我应该创建由我的变量构成的对象，在代码的开头我从表单读取
//并发送请求
// should将我的数据附加到我的电子表格
xhr.send（）;
code
$ b正如我前面所说，我的代码看起来类似于几个我在网上找到的那些，但它不工作，我不知道如何理解错误。
您能否给我一些提示或建议或一些可帮助我将数据附加到Google Spreadsheet 的示例
？解决方案
一个简单的电子表格包含web应用程序示例
<$ c $点击（验证）;
$（'＃txt4'）。val（''）;
$（'（'＃btn1'）。 （''）;
$（'＃txt2'）。val（''）;
$（'＃txt1'）。val（''）
}）;
函数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（一）;
返回true;
}
else
{
alert（'All fields must be completed。'）;
$ / code $ / pre
整个例子：
HTML：
<！DOCTYPE html>
< html>
< head>
< base target =_ top>
< / head>
< body>
< div id =data>
< br /> Text 1< input type =textsize =15id =txt1/>
< br /> Text 2< input type =textsize =15id =txt2/>
< br /> Text 3< input type =textsize =15id =txt3/>
< br /> Text 4< input type =textsize =15id =txt4/>
< br />< input type =buttonvalue =submitid =btn1/>
< / div>
< div id =respstyle =display：none;>
< h1>回应< / h1>
< p>您的资料已收到。< / 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（''）
}）;
函数setResponse（a）
{
if（a）
{
$（'＃data'）。css（'display'，'没有'）;
$（'＃resp'）。css（'display'，'block'）;
函数validate（）
{
var txt1 = document.getElementById（'txt1'）。 '';
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（一）;
返回true;
}
else
{
alert（'All fields must be completed。'）;
函数loadTxt（from，to）
{
document.getElementById（to）.value = document.getElementById（from）。值;
}
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）;
返回true;
}
函数doGet（）
{
var html = HtmlService.createHtmlOutputFromFile（'index'）;
return html.setXFrameOptionsMode（HtmlService.XFrameOptionsMode.ALLOWALL）
}
我简单的电子表格：
好消息是现在使用Google Chrome调试器的时间可能比开始之前好很多。
I'm trying to build a webapp that records datas from a form in a Google Spreadsheet. To do this, I have to use JavaScript (JSON or AJAX requests will work as well), but I cannot use Google Apps Script because I need the user to keep using my pages and GAS doesn't allow it.
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.
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.
That's my form:
<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>`
The hidden values are set to provide an ID Number and the user's path.
The check() function will check the form and (should) make the request and write in the 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();
}
}
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.
Could you please kindly give me some tips or advice or some example that could help me appending data to a Google Spreadsheet?
解决方案 A simple spreadsheet contained web app example
$(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.');
}
}
The entire example:
The 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>
The Apps Script:
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)
}
My simple spreadsheet:
The good news is that you're probably a lot better at using the Google Chrome debugger now than before you started.
这篇关于如何使用JavaScript将数据从HTML表单发送到Google Spreadsheet？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
