在 Google Apps 脚本中提交 HTML 表单时如何发送地理定位和输入
Posted
技术标签:
【中文标题】在 Google Apps 脚本中提交 HTML 表单时如何发送地理定位和输入【英文标题】：How to send geolocation along with inputs when submiting HTML form in Google Apps Script 【发布时间】：2019-11-27 19:00:28 【问题描述】：我有一个使用 Google Apps 脚本制作的 html 表单，该表单将输入的数据发送到 Google 表格中。以下是项目中的文件：
代码.gs
function doGet(request)
return HtmlService.createTemplateFromFile('Index').evaluate();
/* @Include javascript and CSS Files */
function include(filename)
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
/* @Process Form */
function processForm(formObject)
var url = "URL OF GOOGLE SHEET";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([formObject.local,
formObject.direcao,
formObject.carro,
formObject.quilometragem,
formObject.observacao,
Utilities.formatDate(new Date(), "GMT-3", "dd/MM/yyyy HH:mm:ss")
]);
Index.html
<!DOCTYPE html>
<html>
<script type="text/javascript">
function showPosition()
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position)
// Get location data
var latlong = position.coords.latitude + ", " + position.coords.longitude;
</script>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-left">Uso Frota</p>
<div class="form-group">
<label for="local">Local</label>
<input type="text" class="form-control" id="local" name="local">
</div>
<div class="form-group">
<label for="direcao">Direcao</label>
<select class="form-control" id="direcao" name="direcao">
<option selected disabled hidden style='display: none' value=''></option>
<option value="Chegada">Chegada</option>
<option value="Saida">Saida</option>
<option value="Chegada/Saida">Chegada/Saida</option>
</select>
</div>
<div class="form-group">
<label for="carro">Carro</label>
<select class="form-control" id="carro" name="carro">
<option selected disabled hidden style='display: none' value=''></option>
<option value="Opt1">Opt1</option>
<option value="Opt2">Opt2</option>
<option value="Opt3">Opt3</option>
</select>
</div>
<div class="form-group">
<label for="quilometragem">Quilometragem</label>
<input type="text" class="form-control" id="quilometragem" name="quilometragem">
</div>
<div class="form-group">
<label for="observacao">Observacao</label>
<input type="text" class="form-control" id="observacao" name="observacao">
</div>
<button type="submit" class="btn btn-primary btn-block">Enviar</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
JavaScript.html
<script>
// Prevent forms from submitting.
function preventFormSubmit()
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++)
forms[i].addEventListener('submit', function(event)
event.preventDefault();
);
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject)
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
</script>
一切正常。但是，我正在尝试添加要与表单中的输入一起提交的用户地理位置。我不希望用户做任何事情，它需要在用户单击提交按钮时提交。我已经尝试了所有方法，包括添加您可以在 Index.html 文件中找到的 showPosition() 和 showMap() 函数。但是，我不知道如何处理它，因为它可以获取地理位置，但我不知道如何让它与表单一起提交。任何帮助表示赞赏。
提前致谢！
【问题讨论】：
您可以将位置放入表单中的隐藏文本元素中。我认为您也可以将该数据添加到 handleForSubmit() 函数中的表单对象。 【参考方案1】：给你-
-
代码.gs
刚刚将 formObject.lat 和 formObject.long 组件添加到 processForm 函数中。
function doGet(request)
return HtmlService.createTemplateFromFile('Index').evaluate();
/* @Include JavaScript and CSS Files */
function include(filename)
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
/* @Process Form */
function processForm(formObject)
var url = "URL OF GOOGLE SHEET";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow(
[
formObject.local,
formObject.direcao,
formObject.carro,
formObject.quilometragem,
formObject.observacao,
Utilities.formatDate(new Date(), "GMT-3", "dd/MM/yyyy HH:mm:ss"),
formObject.lat,
formObject.long
]
);
-
Index.html
在这里做了以下事情-
将所有脚本组件移至 JavaScript.html 在表单中添加了 2 个隐藏的输入组件（纬度和经度）<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this);">
<p class="h4 mb-4 text-left">Uso Frota</p>
<div class="form-group">
<label for="local">Local</label>
<input type="text" class="form-control" id="local" name="local">
</div>
<div class="form-group">
<label for="direcao">Direcao</label>
<select class="form-control" id="direcao" name="direcao">
<option selected disabled hidden style='display: none' value=''></option>
<option value="Chegada">Chegada</option>
<option value="Saida">Saida</option>
<option value="Chegada/Saida">Chegada/Saida</option>
</select>
</div>
<div class="form-group">
<label for="carro">Carro</label>
<select class="form-control" id="carro" name="carro">
<option selected disabled hidden style='display: none' value=''></option>
<option value="Opt1">Opt1</option>
<option value="Opt2">Opt2</option>
<option value="Opt3">Opt3</option>
</select>
</div>
<div class="form-group">
<label for="quilometragem">Quilometragem</label>
<input type="text" class="form-control" id="quilometragem" name="quilometragem">
</div>
<div class="form-group">
<label for="observacao">Observacao</label>
<input type="text" class="form-control" id="observacao" name="observacao">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="lat" name="lat">
<input type="hidden" class="form-control" id="long" name="long">
</div>
<button type="submit" class="btn btn-primary btn-block">Enviar</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
-
JavaScript.html
修改了以下内容-
将showMap 函数破坏为纬度和经度
添加了事件侦听器以在加载时运行 showPosition
将值从showMap 函数分配给 lat & long 对应的 html 隐藏表单元素
<script>
function showPosition()
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position)
// Get location data
var lat = position.coords.latitude;
var geo1 = document.getElementById("lat");
geo1.value = lat;
var long = position.coords.longitude;
var geo2 = document.getElementById("long");
geo2.value = long;
// Prevent forms from submitting.
function preventFormSubmit()
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++)
forms[i].addEventListener('submit', function(event)
event.preventDefault();
);
window.addEventListener('load', preventFormSubmit);
window.addEventListener('load', showPosition);
function handleFormSubmit(formObject)
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
</script>
在我的设置上对此进行了测试，效果很好。如果您还需要任何进一步的帮助，请告诉我！
【讨论】：
非常有趣。能分享一下表格和表格吗？我正在尝试制作一个表格来捕获用户的地理位置 谢谢！函数handleFormSubmit 中用什么代替formObject？无法使其正常工作。 @Sourabh Choraria以上是关于在 Google Apps 脚本中提交 HTML 表单时如何发送地理定位和输入的主要内容，如果未能解决你的问题，请参考以下文章
我可以混合 jqueryui 和 google app 脚本表单提交吗