在HTML表单中将单元格的值从Google Sheet设置为单选按钮,并在表单提交后更新单元格,可以通过以下步骤实现:
<form>
标签创建一个表单,并使用<input type="radio">
标签创建单选按钮。下面是一个示例代码,演示如何实现上述功能:
<!DOCTYPE html>
<html>
<head>
<title>Google Sheet单选按钮表单</title>
</head>
<body>
<form id="myForm">
<label for="option1">选项1</label>
<input type="radio" id="option1" name="option" value="Option 1">
<br>
<label for="option2">选项2</label>
<input type="radio" id="option2" name="option" value="Option 2">
<br>
<label for="option3">选项3</label>
<input type="radio" id="option3" name="option" value="Option 3">
<br>
<input type="submit" value="提交">
</form>
<script src="https://apis.google.com/js/api.js"></script>
<script>
// 加载Google Sheets API
gapi.load('client', initClient);
function initClient() {
gapi.client.init({
apiKey: 'YOUR_API_KEY',
discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
}).then(function() {
// Google Sheets API已加载并初始化
// 获取单元格的值并填充到单选按钮中
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: 'YOUR_SPREADSHEET_ID',
range: 'Sheet1!A1:A3', // 你的单元格范围
}).then(function(response) {
var values = response.result.values;
if (values && values.length > 0) {
document.getElementById('option1').value = values[0][0];
document.getElementById('option2').value = values[1][0];
document.getElementById('option3').value = values[2][0];
}
});
});
}
// 表单提交时更新Google Sheet中对应单元格的值
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var option = document.querySelector('input[name="option"]:checked').value;
gapi.client.sheets.spreadsheets.values.update({
spreadsheetId: 'YOUR_SPREADSHEET_ID',
range: 'Sheet1!B1', // 你要更新的单元格
valueInputOption: 'RAW',
values: [[option]],
}).then(function(response) {
console.log('单元格已更新');
});
});
</script>
</body>
</html>
请注意,上述示例代码中的YOUR_API_KEY
和YOUR_SPREADSHEET_ID
需要替换为你自己的API密钥和Google Sheet的ID。
这个示例代码使用了Google Sheets API的JavaScript库来获取和更新Google Sheet中的数据。在表单提交时,它会获取选中的单选按钮的值,并将其更新到Google Sheet中指定的单元格中。
推荐的腾讯云相关产品:腾讯云云开发(https://cloud.tencent.com/product/tcb)
领取专属 10元无门槛券
手把手带您无忧上云