Google sheet Apps script Webapp Form nhập liệu đơn giản- Input field, List option, responsive
Giáo án link chia sẻ đến các bạn tiếp về Google sheet Apps script Webapp Form nhập liệu đơn giản- Input field, List option, responsive. Trong form nhập liệu này, bạn có 2 loại trường là field input và List option. Form có giao diện responsive theo màng hình thiết bị. Dưới đây là link video hướng dẫn trên youtube và code apps script để bạn tham khảo.
||Tìm rất nhiều project excel, google sheet tại đây
Các project excel ngẫu nhiên:
- Giảm dung lượng PDF dễ dàng với PDF24 Creator – Miễn phí và hiệu quả
- Chuyển đổi Pdf dạng bản scan sang MS Excel chuẩn không bị lỗi font và giữ nguyên định dạng
- Chuyển định dạng file pdf dạng scan – dạng chụp hình ảnh sang MS Word định dạng chuẩn 99.9%
- Phím tắt vào BIOS và Boot Options của các hãng máy tính phổ biến
- Google sheet webapp | Form đăng ký Tự động gửi ID và QR code Check in qua địa chỉ mail
- Cách tắt Windows update và Windows Defender cực đơn giản
- Apsscript Radio Button và Input – Sự phụ thuộc của input vào Radio button
- Bạn sử dụng zalo và bị báo đầy ổ đĩa,phải làm sao
- Google sheet Webapp Login form Tocken quản lý phiên đăng nhập, gửi mail lấy lại thông tin đăng nhập
- Chuyển bảng dữ liệu từ file PDF vào Excel
Code trang “Code.gs”
/**
* This web app uses the html5-qrcode library from GitHub: https://github.com/mebjas/html5-qrcode.
* The html5-qrcode library is used to scan QR codes from the user's webcam.
*/
//Constants
const DATASHEET = "Data";
function doGet() {
let template = HtmlService.createTemplateFromFile('Index');
let html = template.evaluate().setTitle('SIMPLE ENTRY FORM');
html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
html.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return html;
}
function processForm(formObject) {
const ss = SpreadsheetApp.getActive();
const dataSheet = ss.getSheetByName(DATASHEET);
dataSheet.appendRow([
new Date().toLocaleString(),
formObject.product_name,
formObject.product_category,
formObject.quantity,
formObject.price,
formObject.productCode
]);
}
/**
* INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES
*/
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Code trang “Index.html”
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
<style>
#qr-reader {
/* Default width for all devices */
width: 100%;
box-sizing: border-box;
/* Include padding and border in width calculation */
}
@media only screen and (max-width: 600px) {
#qr-reader {
width: 100%;
}
}
</style>
</head>
<body class="bg-black text-light">
<nav class="navbar sticky-top navbar-dark bg-primary">
<div class="container-fluid " >
<a class="navbar-brand mx-auto" href="https://giaoan.link" target="_blank" style="text-align: center"><span><img src="https://giaoan.link/wp-content/uploads/2021/10/logo-giaoan-2021v2.gif" width="90px"></span><br><span>TRANG WEB CHIA SẺ TÀI LIỆU</span></a>
</div>
</nav>
<br>
<div class="container" style="border: solid 2px #aafe7d; border-radius: 10px" >
<?!= include('Form'); ?>
</div>
<div style="height: 10px;"></div>
<div class="text-center"><a href="https://www.youtube.com/@truyenhinhcamau69" target="_blank"><i style="color:red" class="fa-brands fa-youtube fa-2x"></i></a> <a href="https://www.facebook.com/ctvcamau" target="_blank"><i class="fa-brands fa-facebook fa-2x"></i></a></div><center style="font-size:12px;"><a style="color:gray;text-decoration:none" href="https://ctvcamau.vn" target="_blank"> Đài PT-TH Cà Mau<a/> © 2024 Landing page</center></div>
<?!= include('JavaScript'); ?>
</body>
</html>
Code trang “Form.html”
<div id="reader-results"></div>
<form id="InventoryForm" onsubmit="handleFormSubmit(this)">
<div style="height: 10px;"></div>
<img src="https://lh3.googleusercontent.com/pw/AP1GczOPmlGr7xjKzQLc4xV908OzSrQRVtIZVWs4MXUzuzha72BTzgpl45e_yPZQY4Rrl8-jUy5AMVrNZn6zZsLKJ3RL30uuzw-iQHjX0xOFa7JWnX3loL8=w2400" width="100%"/>
<div style="height: 5px;"></div>
<div class="mb-3 input-group">
<span class="input-group-text bg-primary text-white"><i class="bi bi-box-fill"></i></span>
<input type="text" class="form-control" id="productName" name="product_name" placeholder="Tên sản phẩm">
</div>
<div class="mb-3 input-group">
<!-- <label for="productCategory" class="form-label">Product Category:</label> -->
<span class="input-group-text bg-primary text-white"><i class="bi bi-tags-fill"></i></span>
<select class="form-select" id="productCategory" name="product_category" required>
<option disabled selected>Chọn Danh Mục Sản Phẩm</option>
<option value="Đồ điện tử">Đồ điện tử</option>
<option value="Thời trang">Thời trang</option>
<option value="Sách">Sách</option>
<option value="Loại khác">Loại khác...</option>
</select>
</div>
<div class="mb-3 input-group">
<span class="input-group-text bg-primary text-white"><i class="bi bi-123"></i></span>
<input type="number" class="form-control" id="quantity" name="quantity" placeholder="Số lượng" required>
</div>
<div class="mb-3 input-group">
<span class="input-group-text bg-primary text-white"><i class="bi bi-telephone-fill"></i></span>
<input type="number" class="form-control" id="price" name="price" placeholder="Số điện thoại" required>
</div>
<button type="submit" class="btn btn-warning mb-3 w-100 fw-bold">Submit</button>
</form>
Code trang “Javascript.html”
<script>
window.addEventListener("load", functionInit, true);
//Initialize functions onload
function functionInit(){
preventFormSubmit();
};
// 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 Data from the div
google.script.run.processForm(formObject);
const resultContainer = document.getElementById('reader-results');
resultContainer.innerHTML = '';
document.getElementById("InventoryForm").reset();
}
</script>