05/11/2024
Latest:

Uncategorized 

Googlesheet Apps script Webapp | Form nhập liệu có kiểm tra Input và cấu trúc địa chỉ email

giaoanppt 0 Comments

Giaoan.link chia sẻ đến các bạn một project mới về Googlesheet Apps script Webapp – Form nhập liệu có kiểm tra Input và cấu trúc địa chỉ email.

  • Ở project này Form nhập liệu thiết kế dạng Responsive, đáp ứng với mọi kích thước màn hình. 
  • Kiểm tra các trường input, hiển thị thông báo theo tùy chỉnh về nội dung, màu sắc.
  • Kiểm tra cấu trúc địa chỉ email xem có đúng không

Các bạn có thể xem video demo ở link bên dưới và code apps script cung cấp ở đây, bạn có thể xây dựng cho riêng mình.

Xem, tìm các project về excel và google apps script ở đây

Các project ngẫu nhiên:


Code apps script trên trang “Code.gs”

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

//Constants
const DATASHEET = "Data";

function processForm(formObject) {
  const ss = SpreadsheetApp.openById("1HEBPocTxmVjcIsszE2m2F2O6VkqthKDl7bRytRleEhw")
  const dataSheet = ss.getSheetByName(DATASHEET);
  
  dataSheet.appendRow([
    new Date().toLocaleString(),
    formObject.name.toUpperCase(),
    formObject.email,
    formObject.phone,
    formObject.subject,
    formObject.message
  ]);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Code trên trang “Index.html”

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
        <?!= include('css'); ?>  
  </head>
  <body>
    <div class="contact" >
      <h2>FORM NHẬP LIỆU - <font style="color: yellow">RESPONSIVE</font><br>CÓ KIỂM TRA ĐỊA CHỈ EMAIL</h2>
      <form id="InventoryForm" onsubmit="handleFormSubmit(this)">       
        <div class="div-flex">
              <div class="input-field field">
                <input type="text" placeholder="Họ và tên" name="name" id="name" class="item" autocomplete="off">
                <div class="error-txt">Họ tên bắt buộc điền</div>
              </div>

              <div class="input-field field">
                <input type="text" placeholder="Địa chỉ mail" name="email" id="email" class="item" autocomplete="off">
                <div class="error-txt mail">Địa chỉ mail bắt buộc</div>
              </div>
        </div>
        <div class="div-flex">
            
              <div class="input-field field">
                <input type="text" maxlength="11" placeholder="Số điện thoại" name="phone" id="phone" class="item" autocomplete="off">
                <div class="error-txt">Số điện thoại không bỏ trống</div>
              </div>

              <div class="input-field field">
                <input type="text" placeholder="Tên chủ đề" name="subject" id="subject" class="item" autocomplete="off">
                <div class="error-txt">Chủ đề bắt buộc điền</div>
              </div>
        </div>
        <div class="div-flex">
            <div class="textarea-field field">
              <textarea name="message" id="message"  rows="10" placeholder="Nội dung tin nhắn của bạn" class="item" autocomplete="off"></textarea>
              <div class="error-txt">Nội dung tin nhắn không bỏ trống</div> 
            </div>
        </div>
            <button type="submit" id="btn"> Gửi đi</button>        
        </div>        
      </form>
    </div>  
        <?!= include('javascript'); ?>  
  </body>
</html>

Code trên trang “css.html”

<style>
*{
  margin: 50;
  padding: 50;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{  
  min-height: 100vh;    
  background: #fcffde;
}

.contact{
  width: 700px;  
  border: 2px solid #e0e0de;
  border-radius: 15px;
  box-shadow: 3px 3px 5px #989696;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-buttom: 50px;
  background: #1f242d;
  
}


.contact h2{  
  font-size: 30px;
  font-weight: bold;  
  color: #0ef;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 10px #0ef;
}
.contact form{  
 text-align: center;

}


.div-flex{
  display: flex;  
  align-items: center;
  justify-content:center;
  gap: 20px;

  
}


.input-field{
  width: 290px;
}

.field .item{
  width: 100%;
  padding: 18px;
  background: transparent;
  border: 2px solid #0ef;
  outline: none;
  border-radius: 6px;
  font-size: 16px;
  color: #edededed;
  margin: 12px 0;
}

.textarea-field{
  width: 600px; 
}

.field.error .item{
  border-color: red;
}

.field .item::placeholder{
  color: grey;
}

.field .error-txt{
  font-size: 14px;
  color: #d93075;
  text-align: left;
  margin: -5px 0 10px;
  display: none;
}

.field.error .error-txt{
  display: block;
}

form .textarea-field .error-txt{
margin-top: -10px;
}

form .textarea-field .item{
  resize: none;
}

form button{
  padding: 12px 32px;
  background: #0ef;
  border: none;
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 10px #0ef;
  font-size: 16px;
  color: #333;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
  transition: .5s;
}

form button:hover{
  box-shadow: none;
}

@media(max-width: 800px){
  .div-flex{
  display: block;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.input-field{
  width: 100%;
}

.textarea-field{
  width: 100%;
}

.contact form{
 text-align: center;
 width: 100%;
}

.contact{
  width: 100%;
  padding: 20px;
}
}

</style>

Code trên trang “javascript.html”

<script>
  window.addEventListener("load", functionInit, true); 

  //Initialize functions onload
  function functionInit(){
    preventFormSubmit();   
  };

  const form = document.querySelector("form");
  const fullName = document.getElementById("name");
  const email = document.getElementById("email");
  const phone = document.getElementById("phone");
  const subject = document.getElementById("subject");
  const mess = document.getElementById("message");
  const emailRegex = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,3})(\.[a-z]{2,3})?$/;
  const errorTxtEmail = document.querySelector(".error-txt.mail");

  

  // Prevent forms default behaviour (Prevent reloading the page)
 

// Prevent forms default behaviour (Prevent reloading the page)
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');

    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      
      });
    }
  } 

  /**
   * The handleFormSubmit() function passes the formObject to the processForm 
   * function in the Code.gs file
   */
  function handleFormSubmit(formObject) {
    // Get the QR data from the div
    if(fullName.value!="" && email.value!="" && phone.value!="" && subject.value!="" && message.value!=""){
      if(email.value.match(emailRegex)){
    google.script.run.processForm(formObject);
    document.getElementById("InventoryForm").reset();
      }
    }    
  }

  btn.addEventListener("click", checkInputs);

  

function checkInputs(){
  const items = document.querySelectorAll(".item");
  for(const item of items){
    if(item.value == ""){
      item.classList.add("error");
      item.parentElement.classList.add("error");
    }

   if(items[1].value != ""){
      checkEmail()
    }

    items[1].addEventListener("keyup", () => {
      checkEmail();
    });


    item.addEventListener("keyup",() => {
      if(item.value != ""){
       item.classList.remove("error");
      item.parentElement.classList.remove("error");   
      }else{
        item.classList.add("error");
        item.parentElement.classList.add("error");
      }
    });
  }
}

function checkEmail(){
  const emailRegex = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,3})(\.[a-z]{2,3})?$/;

  const errorTxtEmail = document.querySelector(".error-txt.mail");

  if(!email.value.match(emailRegex)){
    email.classList.add("error");
    email.parentElement.classList.add("error");

    if(email.value != ""){
      errorTxtEmail.innerText = "Vui lòng đúng địa chỉ email!"
    }else{
      errorTxtEmail.innerText = "Địa chỉ email không được bỏ trống!"
    }  
  }else{
    email.classList.remove("error");
    email.parentElement.classList.remove("error");
  }
}


 
</script>