我已经开始使用 Apps 脚本创建表单，使用 materializecss 创建具有 3 种不同布局的菜单。
- 当我将我的 URL 嵌入新的 Google 协作平台时，它不使用布局(模态)，我需要知道如何选择 3 个边栏选项之一。
- 提交后，表单数据将发布到电子表格，但不会重定向到其他页面。
- 似乎会在不验证数据的情况下进行重定向，if语句未连接到重定向功能。
function doGet(request) {
return HtmlService.createTemplateFromFile(`form`).evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(filename){
var url="https://docs.google.com/spreadsheets/d/1sRKhZY27YVY4xMLJs9qAn_lAumaUKT1AH1SgeBrKk_E/edit#gid=0";
var ss= SpreadsheetApp.openByUrl;
var ws=ss.getSheetByName("data");
}
function onOpen(){
var ui=SpreadsheetApp.getUi();
ui.createMenu("My Menu")
.addItem("Sidebar form", "showInsidebarform")
.addItem("Modal Dialog form", "showInmodaldialogform")
.addItem("Modeless Dialog form", "showInmodelessdialog")
.addToUi();
}
//OPEN THE FORM IN SIDEBAR
function showInsidebarform() {
var userform=HtmlService.createTemplateFromFile("form").evaluate().setTitle("Subscribe");
SpreadsheetApp.getUi().showSidebar(userform);
}
//OPEN THE FORM IN MODAL DIALOG
function showInmodaldialogform() {
var userform=HtmlService.createTemplateFromFile("form").evaluate();
SpreadsheetApp.getUi().showModalDialog(userform, "Subscribe");
}
//OPEN THE FORM IN MODELESS DIALOG
function showInmodelessdialog() {
var userform=HtmlService.createTemplateFromFile("form").evaluate();
SpreadsheetApp.getUi().showModelessDialog(userform, "Subscribe");
}
function appenData(data){
var ws=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("data");
ws.appendRow([data.name,data.email]);
}<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name" type="text" class="validate">
<label for="name">First Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="text" class="validate">
<label for="email">email</label>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div><!--end row-->
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameBox=document.getElementById("name");
var emailBox=document.getElementById("email");
document.getElementById("btn").addEventListener("click",addRecord);
function addRecord(){
var name=nameBox.value;
var email=emailBox.value;
if(name.trim().length==0||email.trim().length==0){
M.toast({html: 'Name and email are required'})
}
else{
var data={
name:nameBox.value,
email:emailBox.value,
};
}
google.script.run.appenData(data);
nameBox.value="";
emailBox.value="";
self.location="https://www.theapothecary.app/homedoctor"
};
</script>
</body>
</html>我在这里发布了我的完整代码，它归功于:https://www.youtube.com/watch?v=4SqsK3Vh42Q&lc=UgzHk8aEXCtiDyh8e0B4AaABAg.9ZmDWeons-P9ZmyFFSUhEJ
最佳答案
如果你想做一个注册系统我推荐php
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name" type="text" class="validate">
<label for="name">First Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="text" class="validate">
<label for="email">email</label>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div><!--end row-->
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameBox=document.getElementById("name");
var emailBox=document.getElementById("email");
document.getElementById("btn").addEventListener("click",addRecord);
function addRecord(){
var name=nameBox.value;
var email=emailBox.value;
if(name.trim().length==0||email.trim().length==0){
M.toast({html: 'Name and email are required'})
}
else{
var data={
name:nameBox.value,
email:emailBox.value,
};
window.open("https://www.theapothecary.app/homedoctor")
}
google.script.run.appenData(data);
nameBox.value="";
emailBox.value="";
self.location="https://www.theapothecary.app/homedoctor"
};
</script>
</body>
</html>
如果这不是您问题的答案。能不能解释清楚问题出在哪里
关于javascript - 如何选择模式来显示我的表单并重定向到提交表单上的外部 URL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71562006/