Google 스프레드 시트로 전가 된 데이터를 보내는 Google Apps Script로 만든 HTML 양식이 있습니다. 프로젝트의 파일은 다음과 같습니다.
Code.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 () 함수를 추가하는 것을 포함하여 모든 것을 시도했습니다. 그러나 지리적 위치를 가져 오기 때문에 무엇을 해야할지 모르겠지만 양식과 함께 제출하는 방법을 모르겠습니다. 도움을 주시면 감사하겠습니다.
미리 감사드립니다!
여기 있습니다-
함수에 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
]
);
}
여기서 다음 작업을 수행했습니다.
<!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>
다음 사항 수정-
showMap
위도 및 경도 기능을 중단했습니다.showPosition
로드시 실행할 이벤트 리스너 추가showMap
함수에서 위도 및 경도의 해당 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>
내 설정에서 이것을 테스트했으며 완벽하게 작동했습니다. 추가 지원이 필요한 경우 알려주세요!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다