我有一个问题。我试着用appscript制作一个谷歌表单侧边栏表单。我遵循了youtub*的教程，修改了我的代码。这里有一个问题；SubmitRecord(("不能正常工作。当按钮点击时，没有任何响应。我只是想知道我的代码的主要问题是什么。
这是条码
function AddArsipForm()
{
var form = HtmlService.createHtmlOutputFromFile('Arsip').setTitle('TAMBAH ARSIP');
SpreadsheetApp.getUi().showSidebar(form);
}
function addMenu()
{
var menu = SpreadsheetApp.getUi().createMenu('Custom');
menu.addItem('Tambah Arsip', 'AddArsipForm');
menu.addToUi();
}
function onOpen(e)
{
addMenu();
}
function AddRecord(nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir, tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas, kode_ruang, nomor_lemari, nomor_boks, nomor_folder) {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName("Data");
if(nomor != '' && klasifikasi != '' && kode_unitcipta != '' && uraian != '' && kurunwaktu_awal != '' && kurunwaktu_akhir != '' && tingkat_perkembangan != '' && media_simpan != '' && kondisi_fisik != '' && jumlah_berkas != '' && kode_ruang != '' && nomor_lemari != '' && nomor_boks != '' && nomor_folder!= '')
{
dataSheet.appendRow([nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir, tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas, kode_ruang, nomor_lemari, nomor_boks, nomor_folder, new Date()]);
return "<span style="font-weight: bold" >Data telah terekam!</span>";
}
else
{
return "<span style="font-weight: bold; color: red" >Data Belum Lengkap</span>";
}
}
function getAllKlasifikasi()
{
var ss= SpreadsheetApp.getActiveSpreadsheet();
var klasifikasiSheet = ss.getSheetByName("KODE KLASIFIKASI");
var [headers, ...data] = klasifikasiSheet.getDataRange().getValues();
return data;
}
这是HTML代码
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<style>
.narrow
{
margin-bottom: 0.5rem;
}
</style>
<script>
function SubmitRecord()
{
document.getElementById("displayReturn").innerHTML = "";
var nomor = document.getElementById("nomor").value;
var klasifikasi = document.getElementById("klasifikasi").value;
var kode_unitcipta = document.getElementById("kode_unitcipta").value;
var kode_unitcipta = document.getElementById("uraian").value;
var kurunwaktu_awal = document.getElementById("kurunwaktu_awal").value;
var kurunwaktu_akhir = document.getElementById("kurunwaktu_akhir").value;
var tingkat_perkembangan = document.getElementById("tingkat_perkembangan").value;
var media_simpan = document.getElementById("media_simpan").value;
var kondisi_fisik = document.getElementById("kondisi_fisik").value;
var jumlah_berkas = document.getElementById("jumlah_berkas").value;
var kode_ruang = document.getElementById("kode_ruang").value;
var nomor_lemari = document.getElementById("nomor_lemari").value;
var nomor_boks = document.getElementById("nomor_boks").value;
var nomor_folder = document.getElementById("nomor_folder").value;
google.script.run.withSuccessHandler(returnBack)
.AddRecord(nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir, tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas, kode_ruang, nomor_lemari, nomor_boks, nomor_folder);
}
function returnBack(stringBack)
{
document.getElementById("displayReturn").innerHTML = stringBack;
document.getElementById("nomor").value = '';
document.getElementById("klasifikasi").value = '';
document.getElementById("kode_unitcipta").value = '';
document.getElementById("uraian").value = '';
document.getElementById("kurunwaktu_awal").value = '';
document.getElementById("kurunwaktu_akhir").value = '';
document.getElementById("tingkat_perkembangan").value = '';
document.getElementById("media_simpan").value = '';
document.getElementById("kondisi_fisik").value = '';
document.getElementById("jumlah_berkas").value = '';
document.getElementById("kode_ruang").value = '';
document.getElementById("nomor_lemari").value = '';
document.getElementById("nomor_boks").value = '';
document.getElementById("nomor_folder").value = '';
}
function GetKlasifikasi()
{
google.script.run.withSuccessHandler(function(ar)
{
var klasifikasi = document.getElementById("klasifikasi");
console.log(ar);
let option = document.createElement("option");
option.value = "";
option.text = "";
klasifikasi.appendChild(option);
ar.forEach(function(item, index)
{
let option = document.createElement("option");
option.value = item[1];
option.text = item[0];
klasifikasi.appendChild(option);
});
}).getAllKlasifikasi();
};
</script>
</head>
<body>
<form>
<div style="padding: 10px" >
<div class="form-row" >
<div class="form-group col-md-6 narrow" >
<label for="nomor" style="margin-bottom: 0rem" >Nomor</label>
<input type="text" id="nomor" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="klasifikasi" style="margin-bottom: 0rem" >Klasifikasi</label>
<select id="klasifikasi" class="form-control" ></select>
</div>
</div>
<div class="form-row" >
<div class="form-group col-md-6 narrow" >
<label for="last_name" style="margin-bottom: 0rem" >Last Name</label>
<input type="text" id="last_name" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="street" style="margin-bottom: 0rem" >Street</label>
<input type="text" id="kode_unitcipta" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="uraian" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="kurunwaktu_awal" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="kurunwaktu_akhir" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="tingkat_perkembangan" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="media_simpan" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="kondisi_fisik" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="jumlah_berkas" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="kode_ruang" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="nomor_lemari" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="nomor_boks" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<label for="city" style="margin-bottom: 0rem" >City</label>
<input type="text" id="nomor_folder" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<input type="button" value="Submit" onclick="SubmitRecord()" class="btn btn-primary" />
</div>
</div>
</form>
<div id="displayReturn" ></div>
</div>
<script>GetKlasifikasi(); </script>
</body>
</html>
我没有办法对此进行测试，但假设您的服务器端代码正常工作。
首先，我会把所有的脚本放到页面的正文部分。第二，有一个放错地方的</div>，如下所示。第三，我喜欢使用缩进来识别代码块/html。我会将SubmitRecord中的所有值放入一个数组中，然后将该数组传递给服务器端函数。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<style>
.narrow
{
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<form>
<div style="padding: 10px" >
<div class="form-row" >
<div class="form-group col-md-6 narrow" >
<label for="nomor" style="margin-bottom: 0rem" >Nomor</label>
<input type="text" id="nomor" class="form-control" />
</div>
</div>
.
.
.
<div class="form-row">
<div class="form-group col-md-6 narrow" >
<input type="button" value="Submit" onclick="SubmitRecord()" class="btn btn-primary" />
</div>
</div>
</div> <! -- this div was misplaced -->
</form>
<div id="displayReturn" ></div>
<! -- </div> -->
<script>
function SubmitRecord() {
document.getElementById("displayReturn").innerHTML = "";
var nomor = document.getElementById("nomor").value;
.
.
.
var nomor_folder = document.getElementById("nomor_folder").value;
google.script.run.withSuccessHandler(returnBack)
.AddRecord(nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir, tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas, kode_ruang, nomor_lemari, nomor_boks, nomor_folder);
}
function returnBack(stringBack) {
document.getElementById("displayReturn").innerHTML = stringBack;
.
.
.
document.getElementById("nomor_folder").value = '';
}
function GetKlasifikasi() {
google.script.run.withSuccessHandler(function(ar)
{
var klasifikasi = document.getElementById("klasifikasi");
.
.
.
}).getAllKlasifikasi();
};
GetKlasifikasi();
</script>
</body>
</html>