javascript - 从 html 中获取 Checkbox 数据以将其保存在 Google 表格中
问题描述
所以,我目前正在制作一个网站,用户将在其中填写他的信息,然后必须选择各种复选框,让管理员知道他/她需要的所有服务,现在我可以检索简单的信息,如姓名、电子邮件、电话号码,并且可以成功将其发送到管理员的电子邮件,但是即使对于未选中的复选框,工作表也显示“打开”存在问题。我无法解决这个问题,我只想显示他选择的特定用户的数据,而不是他/她没有选择的数据。
这是我的 html 表单:-
<div class="form-group col-md-6">
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor" name="programs">Select Programs</span>
<form action="https://script.google.com/macros/s/AKfycbxL1JOIFNoOLyqaiQFaOM-b70ceKnRRScc1yCm7zW4wsf_15CrJcx_3/exec">
<ul class="items">
<li><input type="checkbox" class="form-control" name="tracheostomy-care" />Tracheostomy Care </li>
<li><input type="checkbox" class="form-control" name="post-stroke-care" />Post-Stroke Care</li>
<li><input type="checkbox" class="form-control" name="feeding-tube-care" />Feeding Tube Care </li>
<li><input type="checkbox" class="form-control" name="bedsore-management" />Bed Sore Management </li>
<li><input type="checkbox" class="form-control" name="speech-therapy" />Speech Therapy </li>
<li><input type="checkbox" class="form-control" name="catheter-care" />Catheter Care</li>
<li><input type="checkbox" class="form-control" name="cardiac-care" />Cardiac Care</li>
<li><input type="checkbox" class="form-control" name="parkinsons-care" />Parkinsons Care</li>
<li><input type="checkbox" class="form-control" name="craniotomy-care" />Craniotomy Care</li>
<li><input type="checkbox" class="form-control" name="pulmonary-care" />Pulmonary Care</li>
<li><input type="checkbox" class="form-control" name="orthopaedic-care"/>Orthopaedic Care</li>
</ul>
</form>
这是我的谷歌“script.gs”:-
// if you want to store your email server-side (hidden), uncomment the next line
var TO_ADDRESS = "bhattanugrah07@gmail.com";
// spit out all the keys/values from the form in HTML for email
// uses an array of keys if provided or the object to determine field order
function formatMailBody(obj, order) {
var result = "";
if (!order) {
order = Object.keys(obj);
}
// loop over all keys in the ordered form data
for (var idx in order) {
var key = order[idx];
result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + sanitizeInput(obj[key]) + "</div>";
// for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value,
// and append it to the `result` string created at the start.
}
return result; // once the looping is done, `result` will be one long string to put in the email body
}
// sanitize content from the user - trust no one
// ref: https://developers.google.com/apps-script/reference/html/html-output#appendUntrusted(String)
function sanitizeInput(rawInput) {
var placeholder = HtmlService.createHtmlOutput(" ");
placeholder.appendUntrusted(rawInput);
return placeholder.getContent();
}
function doPost(e) {
try {
Logger.log(e); // the Google Script version of console.log see: Class Logger
record_data(e);
// shorter name for form data
var mailData = e.parameters;
// names and order of form elements (if set)
var orderParameter = e.parameters.formDataNameOrder;
var dataOrder;
if (orderParameter) {
dataOrder = JSON.parse(orderParameter);
}
// determine recepient of the email
// if you have your email uncommented above, it uses that `TO_ADDRESS`
// otherwise, it defaults to the email provided by the form's data attribute
var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;
// send email if to address is set
if (sendEmailTo) {
MailApp.sendEmail({
to: String(sendEmailTo),
subject: "Contact form submitted",
// replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
htmlBody: formatMailBody(mailData, dataOrder)
});
}
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"success",
"data": JSON.stringify(e.parameters) }))
.setMimeType(ContentService.MimeType.JSON);
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}
/**
* record_data inserts the data received from the html form submission
* e is the data received from the POST
*/
function record_data(e) {
var lock = LockService.getDocumentLock();
lock.waitLock(30000); // hold off up to 30 sec to avoid concurrent writing
try {
Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
// select the 'responses' sheet by default
var doc = SpreadsheetApp.getActiveSpreadsheet();
var sheetName = e.parameters.formGoogleSheetName || "responses";
var sheet = doc.getSheetByName(sheetName);
var oldHeader = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var newHeader = oldHeader.slice();
var fieldsFromForm = getDataColumns(e.parameters);
var row = [new Date()]; // first element in the row should always be a timestamp
// loop through the header columns
for (var i = 1; i < oldHeader.length; i++) { // start at 1 to avoid Timestamp column
var field = oldHeader[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);
// mark as stored by removing from form fields
var formIndex = fieldsFromForm.indexOf(field);
if (formIndex > -1) {
fieldsFromForm.splice(formIndex, 1);
}
}
// set any new fields in our form
for (var i = 0; i < fieldsFromForm.length; i++) {
var field = fieldsFromForm[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);
newHeader.push(field);
}
// more efficient to set values as [][] array than individually
var nextRow = sheet.getLastRow() + 1; // get next row
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// update header row with any new data
if (newHeader.length > oldHeader.length) {
sheet.getRange(1, 1, 1, newHeader.length).setValues([newHeader]);
}
}
catch(error) {
Logger.log(error);
}
finally {
lock.releaseLock();
return;
}
}
function getDataColumns(data) {
return Object.keys(data).filter(function(column) {
return !(column === 'formDataNameOrder' || column === 'formGoogleSheetName' || column === 'formGoogleSendEmail' || column === 'honeypot');
});
}
function getFieldFromData(field, data) {
var values = data[field] || '';
var output = values.join ? values.join(', ') : values;
return output;
}
解决方案
如果你使用这样的东西怎么办......
<div class="form-group col-md-6">
<div class="dropdown-check-list" tabindex="100">
<span class="anchor" name="programs">Select Programs</span>
<form action="https://script.google.com/macros/s/AKfycbxL1JOIFNoOLyqaiQFaOM-b70ceKnRRScc1yCm7zW4wsf_15CrJcx_3/exec">
<select class="items" id="list1">
<option class="form-control" name="tracheostomy-care" />Tracheostomy Care </option>
<option class="form-control" name="post-stroke-care" />Post-Stroke Care</option>
<option class="form-control" name="feeding-tube-care" />Feeding Tube Care </option>
<option class="form-control" name="bedsore-management" />Bed Sore Management </option>
<option class="form-control" name="speech-therapy" />Speech Therapy </option>
<option class="form-control" name="catheter-care" />Catheter Care</option>
<option class="form-control" name="cardiac-care" />Cardiac Care</option>
<option class="form-control" name="parkinsons-care" />Parkinsons Care</option>
<option class="form-control" name="craniotomy-care" />Craniotomy Care</option>
<option class="form-control" name="pulmonary-care" />Pulmonary Care</option>
<option class="form-control" name="orthopaedic-care"/>Orthopaedic Care</option>
</select>
</form>
检查这些:
推荐阅读
- c# - 需要一个 lambda 表达式来包含一个 where 子句
- c# - 在 Web 应用程序中嵌入 SFML 窗口
- spring - Spring-多模块未加载bean-获取异常无法加载ApplicationContext
- r - echarts4r:像在 d3heatmap 中一样缩放
- database-design - 国际邮寄地址的正确字段是什么?
- azure-iot-hub - 将设备数据从一个组织(组织/客户端 A)中的 IoThub 流式传输到完全不同组织(组织/客户端 B)中的 IoThub
- kentico - 访问页面子项中的附件 - Kentico
- c++ - C++ 中 Eigen 对角矩阵类型的高效存储
- c++ - CLIPS 性能问题
- apache-kafka - 试图了解过滤器不起作用