經過多次混亂之後出現了這篇表單,
我想問大家我的html表單填寫完送出,
應該要彈出 alert 標籤內的"註冊成功"來提醒填表人已完成填表,
但是填完送出後通知卻沒有跳出來,
資料是完成轉移了,驗證也發揮效果了,唯獨這點我搞不清楚。
程式碼有點亂,畢竟我不是寫程式的,只能空白的情況下上網找指令標籤自己填,多多包涵。
▼ html表單程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>連結試算表 - 表單Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 連結Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous">
</script>
<style>
.container-contact {
padding: 20px;
text-align: center;
color: white;
background-color: rgb(42, 165, 159);
width: 100%;
}
.container-contact h3 {
font-size: 30px;
text-align: center;
padding: 20px;
}
.btn {
width: 100%;
font-size: 20px;
margin: 20px 0px 20px 0px;
background-color: rgb(6, 117, 119);
color: rgb(255, 255, 255);
border-radius: 20px;
transition: 1s;
}
.btn:hover {
background-color: rgb(178, 224, 84);
color: black;
}
input {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container-contact">
<h3>保固登錄</h3>
<div class="row">
<!--第一欄-->
<div class="col-sm-2">
</div>
<!--第二欄-->
<div class="col-sm-8">
<form id="myForm" action="<?!= getScriptUrl(); ?>" method="POST">
<div class="row">
<!--名稱-->
<div class="col-sm-6 form-group">
<br>
<label> 姓名 </label>
<input class="form-control" id="name" name="name"
placeholder="姓名" type="text" required="required" />
</div>
<!-- 電話 格式 -->
<div class="col-sm-6 form-group">
<br>
<label> 聯絡電話 </label>
<input class="form-control" type="tel" id="userhphone" name="userhphone" pattern="[0-9]{10}"
placeholder="請輸入09xxxxxxxx格式" required="required" />
</div>
<!--生日-->
<div class="col-sm-6 form-group">
<br>
<label> 出生日期 </label>
<input class="form-control" type="date" id="happy" name="happy"
placeholder="請輸入生日" required="required" />
</div>
<!--e-mail-->
<div class="col-sm-6 form-group">
<br>
<label> Email </label>
<input class="form-control" id="email" name="email"
placeholder="請輸入Email" type="email" required="required" />
</div>
<!-- 產品 格式 -->
<div class="col-sm-6 form-group">
<p></p>
<label> 產品 </label>
<p></p>
<select class="form-control" id="catordog" name="catordog" required="required" >
<option value=""selected disabled style="background-color: #E0E0E0;">請選擇您購買的產品</option>
<option value="太空寶寶點讀筆">太空寶寶點讀筆</option>
</select>
</div>
<!-- 地址 格式 -->
<div class="col-sm-6 form-group">
<br>
<label> 聯絡地址 </label>
<input class="form-control" type="text" id="address" name="address"
placeholder="例:台中市龍井區*段***巷**弄**號" required="required">
</div>
<!-- isbn 格式 -->
<div class="col-sm-6 form-group">
<br>
<label> 產品序號 </label>
<input class="form-control" type="tel" id="isbn" name="isbn" pattern="[0-9]{10}"
placeholder="詳見電池蓋上的編號共10碼" required="required" />
</div>
<!-- 日期 格式 -->
<div class="col-sm-6 form-group">
<br>
<label> 購買日期 </label>
<input class="form-control" type="date" id="userbirthday" name="userbirthday"
placeholder="購買日期" required="required" />
</div>
<!-- 店家 格式 -->
<div class="col-sm-6 form-group">
<br>
<label> 購買通路 </label>
<input class="form-control" type="text" id="shop" name="shop"
placeholder="例:博客來..." required="required">
</div>
<!-- 發票 格式 -->
<br>
<div class="col-sm-6 form-group">
<br>
<label> 發票號碼 </label>
<input class="form-control" type="text" id="bill" name="bill" pattern="[a-zA-Z]{2}-[0-9]{8}"
placeholder="請輸入xx-xxxxxxxx格式" required="required" />
</div>
<p></p>
<div class="col-md-12 form-group">
<input type="radio" name="sex" id="female" required="required" />
<label><a style="color:rgb(255, 251, 0);">歡迎加入</a>
<a href="https://zh-tw.facebook.com/weesing123/" target="_blank" style="color:rgb(255, 251, 0);">華碩文化粉絲團</a>
<a style="color:rgb(255, 251, 0);">與</a>
<a href="https://www.youtube.com/channel/UCcd0sGMrNzj5FpHdEsz63EA/featured" target="_blank" style="color:rgb(255, 251, 0);">Youtube頻道</a>
<a style="color:rgb(255, 251, 0);">,好書資訊不漏接!</a>
</label>
</div>
</div>
<!-- -->
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn" type="submit" id="submitButton">送出</button>
</div>
</form>
</div>
<!--第三蘭-->
<div class="col-sm-2">
</div>
<!-- JavaScript程式 -->
<script>
//抓輸入的值
function getValues(){
var name=document.getElementById("name");
var email=document.getElementById("email");
var userbirthday=document.getElementById("userbirthday");
var happy=document.getElementById("happy");
var shop=document.getElementById("shop");
var catordog=document.getElementById("catordog");
var address=document.getElementById("address");
var bill=document.getElementById("bill");
var isbn=document.getElementById("isbn");
var userhphone=document.getElementById("userhphone")
var rowData={
name:name.value,
email:email.value,
userbirthday:userbirthday.value,
userhphone:userhphone.value,
happy:happy.value,
shop:shop.value,
catordog:catordog.value,
address:address.value,
bill:bill.value,
isbn:isbn.value
};
//上傳資料
google.script.run.addData(rowData);
//清除表單上資料
document.getElementById("myForm").reset();
//完成後訊息
alert("已註冊成功!");
}
document.getElementById("submitButton").addEventListener("click", getValues);
</script>
</body>
</html>
▼ assp script的gs
// 連結HTML檔案
function doGet(){
var html=HtmlService.createTemplateFromFile("form");
var check=html.evaluate();
var show =check.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return show;
}
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
Logger.log(url);
return url;
}
// 新增資料到試算表
function doPost(e){
// 抓時間
var currentDate=new Date();
// 取得目前的試算表檔案
var ss=SpreadsheetApp.getActiveSpreadsheet();
// 抓試算表名稱
// 請輸入您的試算表名稱在這裡
var ws=ss.getSheetByName("註冊保固");
//插入資料
ws.appendRow([currentDate, e.parameter.name, e.parameter.email, e.parameter.userbirthday, e.parameter.userhphone, e.parameter.happy, e.parameter.shop, e.parameter.catordog, e.parameter.address, e.parameter.bill, e.parameter.isbn,]);
var html=HtmlService.createTemplateFromFile("form");
var check=html.evaluate();
var show =check.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return show;
}
勞煩各位神人解救