alert 無法彈出求解法

alert html html標籤、屬性通知表單設計

sking1225 2022-10-20 16:50:25 ‧ 803 瀏覽

分享至

經過多次混亂之後出現了這篇表單，
我想問大家我的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;
}

勞煩各位神人解救