我有一個只有單個欄位（DropDown）的表單，并分配了一個函式來執行它的更改。
但它不起作用。
<select type="text" id="searchtext" onchange="handleFormSubmit(this)" name="searchtext" placeholder="搜索文本">
什么地方出了錯
這是Web 應用程式 URL
代碼.gs 檔案
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
/* PROCESS FORM */
function processForm(formObject){
var result = "";
if(formObject.searchtext){//Execute if form passes search text
result = search(formObject.searchtext);
}
return result;
}
//SEARCH FOR MATCHED CONTENTS
function search(searchtext){
var spreadsheetId = '1fVBNWvZkFMOfnlt8r6fevt-ozTPweiR5oXot1GU4g2A'; //** CHANGE !!!
var dataRage = 'Data!A2:D'; //** CHANGE !!!
var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
var ar = [];
data.forEach(function(f) {
if (~f.indexOf(searchtext)) {
ar.push(f);
}
});
return ar;
}
索引.html 檔案
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
<script>
//PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i ) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener("load", preventFormSubmit, true);
//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("search-form").reset();
}
//CREATE THE DATA TABLE
function createTable(dataArray) {
if(dataArray && dataArray !== undefined && dataArray.length != 0){
var result = "<table class='table table-sm' id='dtable' style='font-size:0.8em'>"
"<thead>"
"<tr>" //Change table headings to match witht he Google Sheet
"<th scope='col'>Model</th>"
"<th scope='col'>Price</th>"
"<th scope='col'>Warranty</th>"
"</tr>"
"</thead>";
for(var i=0; i<dataArray.length; i ) {
result = "<tr>";
for(var j=0; j<dataArray[i].length; j ){
result = "<td>" dataArray[i][j] "</td>";
}
result = "</tr>";
}
result = "</table>";
var div = document.getElementById('search-results');
div.innerHTML = result;
}else{
var div = document.getElementById('search-results');
//div.empty()
div.innerHTML = "Data not found!";
}
}
</script>
<!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
</head>
<style>
body{
margin:0;
padding-top: 10px;
font-family: sans-serif;
}
*{
box-sizing: border-box;
}
.table{
width: 100%;
border-collapse: collapse;
}
.table td,.table th{
padding:12px 15px;
border:1px solid #ddd;
text-align: center;
font-size:16px;
}
.table th{
background-color: darkblue;
color:#ffffff;
}
.table tbody td:nth-child(even){
background-color: #f5f5f5;
}
table td:nth-child(1){ display:none;}
/*responsive*/
@media(max-width: 500px){
.table tr{
margin-bottom:15px;
}
.table td::before{
left:0;
font-size:15px;
font-weight: bold;
text-align: left;
}
}
</style>
<body>
<div class="container">
<!-------------------------- SEARCH FORM ----------------------------------------->
<form id="search-form" style="margin: 0 auto; width: 50%" >
<div class="form-group mx-sm-3 mb-2" >
<select type="text" class="form-control" id="searchtext" onchange="handleFormSubmit(this)" name="searchtext" placeholder="Search Text">
<option> Select </option>
<option> FLO </option>
<option> TUBULAR </option>
</select>
</div>
<button type="submit" class="btn btn-primary mb-2">Search</button>
</form>
<!-- ## SEARCH FORM ~ END -------------------------------------------->
<!-- ## TABLE OF SEARCH RESULTS ------------------------------------------>
<div id="search-results" class="table" >
<!-- The Data Table is inserted here by JavaScript -->
</div>
<!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------>
</div>
</body>
</html>
uj5u.com熱心網友回復：
修改點：
- 在您的腳本中，我擔心
formObject可能無法用google.script.run. - 你可能想在完成
document.getElementById("search-form").reset()后運行processForm。
當這些點反映在你的放映腳本中時，下面的修改怎么樣？
從：
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("search-form").reset();
}
至：
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(e => {
createTable(e);
document.getElementById("search-form").reset();
}).processForm({searchtext: formObject.value});
}
筆記：
當您修改 Google Apps 腳本時，請將部署修改為新版本。這樣，修改后的腳本就會反映在 Web Apps 中。請注意這一點。
您可以在報告“在不更改新 IDE 的 Web 應用程式 URL 的情況下重新部署 Web 應用程式”中查看詳細資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513592.html