Я сделал эту html форму для добавления инвентаря в скрипт приложений Google для отправки данных в таблицу Google, эта форма имеет два основных поля ввода и динамическую c таблицу с добавляемыми и удаляемыми строками (иногда нам приходится добавлять больше чем 50 элементов на счет), я пытаюсь добавить метку времени и 2 основных поля ввода с каждой строкой таблицы в виде одной строки в целевой электронной таблице следующим образом:
code.gs
var url = "https://docs.google.com/spreadsheets/d/1vRmBrJTuJNvOfH_Akxm_QV4N3quoIrVPS3aNDkj3dno/edit#gid=0";
function doGet(request) {
return HtmlService.createTemplateFromFile('page').evaluate();
}
/* @Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
/* @Process Form */
function processForm(formObject) {
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("tests2");
ws.appendRow([ new Date(), formObject.invoice, formObject.client, formObject.item0, formObject.qty0 ]);
ws.appendRow([ new Date(), formObject.invoice, formObject.client, formObject.item1, formObject.qty1 ]);
ws.appendRow([ new Date(), formObject.invoice, formObject.client, formObject.item2, formObject.qty2 ]);
ws.appendRow([ new Date(), formObject.invoice, formObject.client, formObject.item3, formObject.qty3 ]);
}
стр. html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<?!= include('page.js'); ?>
<!------ Include the above in your HEAD tag ---------->
</head>
<?!= include('data'); ?>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">RMA Details</p>
<div class="form-row">
<div class="form-group col-md-3">
<label for="invoice">Invoice No</label>
<input type="number" class="form-control" id="invoice" name="invoice" placeholder="Invoice No" min="0" step="1" oninput="validity.valid||(value='');" required />
</div>
<div class="form-group col-md-9">
<label for="client">Client's Name</label>
<input type="text" class="form-control" id="client" name="client" placeholder="Client's Name" required />
</div>
<div class="form-control hidden">
<input type="number" id="rcount" name="rcount" />
</div>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Item's Name</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-8">
<input class="form-control" name="item0" placeholder="Name of the Item" id="item0" type="text" list="my_list" required />
</td>
<td class="col-sm-2">
<input class="form-control" name="qty0" placeholder="QTY" id="qty0" type="number" min="0" step="1" oninput="validity.valid||(value='');" required />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</body>
</html>
стр. js. 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();
}
$(document).ready(function () {
var counter = 1;
document.getElementById("rcount").innerHTML = counter;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" placeholder="Name of the Item" id="item' + counter + '" class="form-control" name="item' + counter + '" list="my_list" required/></td>';
cols += '<td><input type="number" placeholder="QTY" id="qty' + counter + '" class="form-control" name="qty' + counter + '" min="0" step="1" required/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1;
});
});
</script>
В (code.gs) я пытался сделать al oop on " ws.appendRow "на основе количества строк в таблице Dynami c, но не удалось этого сделать, если есть другой способ отправки данных, сообщите мне. У меня нет опыта работы со сценариями html или java, эти коды я скопировал и вставил с других страниц и отредактировал в соответствии со своими потребностями с моими очень ограниченными знаниями. заранее спасибо за помощь.