Google sheet Apps script | Hàm setTimeout định thời gian xóa các trường Input khi click Button

giaoanppt

5 tháng trước

Giaoan.link chia sẻ đến các bạn cách sử dụng Google sheet Apps script để xây dựng “Hàm setTimeout định thời gian xóa các trường Input khi click Button”. Hàm này rất thích hợp trong nhiều trường hợp các bạn xây dựng form nhập liệu để reset trường input.

Các bạn truy cập vào đây để tới trang tổng hợp các project excel, google sheet, apps script.

Các bài trong project ngẫu nhiên:

XEM VIDEO HƯỚNG DẪN TRÊN YOUTUBE

Mã trên trang “Code.gs”

function doGet() {
  var output = HtmlService.createTemplateFromFile('Index');   
  return output.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Mã trên trang “Index.html”

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
.container {
  width: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border: 2px solid red;
  border-radius: 10px;
  justify-content: center;
  background-color: yellow;  
  
}
.container > div {    
  text-align: left;  
  font-size: 30px;  
}

.button{
  display: block;
  border: none;
  margin: left;
  border-radius: 20px;
  padding: 10px 20px;
  background-color: #d63031;
  text-align: cneter; 
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.button:hover {
  background-color: #ee8b71;
  color: black;
}


</style>
    </style>
  </head>
  <body>
    <div style="height: 20px"></div>
    <div class="container">
     <p>
      <input  type="tex" id="name" placeholder="Họ và tên">      
      <input type="email" id="mail" placeholder="Địa chỉ email"> 
      <input type="text" id="phone" placeholder="Số điện thoại"> 
      </p>  
      <p>
      <input type="text" id="username" placeholder="Điền username">
      <input type="password" id="password" placeholder="Điền password">
      </p>      
      <button class="button" type="submit" id="dangky">Đăng ký</button>  
    </div>  


   <script>
        document.getElementById("dangky").addEventListener("click", (event) => {     
        setTimeout(function() {  
          event.preventDefault()   
          document.getElementById("name").value =""
          document.getElementById("mail").value =""
          document.getElementById("phone").value =""
          document.getElementById("username").value =""
          document.getElementById("password").value =""                 
        }, 5000);   

      })  
    </script> 

  </body>
</html>