如何為HTML表單提供post操作和onClick操作到按鈕？

我有一個 HTML 表單，我希望將其資料發送到 Google 表格。這是通過 Apps 腳本完成的。

這是 Apps 腳本代碼：

const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function initialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow()   1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

我制作了一個簡單的 HTML 表單來測驗它，它似乎奏效了。這是它的代碼：

    <form 
  method="POST" 
  action="https://script.google.com/macros/s/AKfycbwo9A2AKU8OB5YXs_l0w3wqKoZDYp6F5C3EuarHeQVILt4CK9zaIhmGQETz7StlOc2P/exec"
>
  <input name="Email" type="email" placeholder="Email" required>
  <input name="Name" type="text" placeholder="Name" required>
  <button type="submit">Send</button>
</form>

但是，當我制作自己的表格時，它似乎不起作用。這是實際 HTML 表單的代碼：

<form method="POST" action = "MY_WEB_APP_URL"id = "clothingExpenses" class = 'display'>
           <div  style = 'text-align:center;' class="row">
              <div style = 'text-align:center;' class="six columns">
              <label style = ' padding-bottom: 1pt; text-align:center;' for="exampleEmailInput">Clothing type</label>
            <input  name = "Type" id = 'type' astyle = "width: 50%;" type="email" placeholder="Enter the clothing type" id="exampleEmailInput">
                </div>
                </div>
            <div>
          <label style = ' padding-bottom: 1pt;' for="exampleEmailInput">Amount</label>
           <input name = "Amount" id="amnt" style = "width: 24%;" type="number" placeholder="Enter number" id="exampleEmailInput">
                </div>
                 <div>
             <label style = 'padding-bottom: 1pt;' for="exampleEmailInput">Clothing brand</label>
          <input name = "Brand" id="brand" style = "width: 24%;" type="text" placeholder="Enter the clothing brand" id="exampleEmailInput">
          </div>
                
            
 <button type = 'submit' class="button-primary" onclick="addExpense()">Add expense</button>
   <button type = 'submit' class="button-primary" onclick="closeExpenseForm()">Close form</button>

 </form>

addExpense()功能：

function addExpense()
{



        // A value clothingID stores the values of each clothing expense. 
        clothingID={'id':Date.now(),'clothingType':clothingType.value, 'brand': brand.value, 'amnt':amnt.value, };
        //It is then pushed into the clothingArray array. 
        clothingArray.push(clothingID);
        count1  ;
        showTotalBalance();
        showDifference();
        expenseHistory();
        clothingType.value='';
        amnt.value='';
        brand.value = '';
        setItemInStorage();

    
   
}

第二個 HTML 表單中的 Web 應用程式 URL 已被洗掉，因為我不確定它是否應該保密。

uj5u.com熱心網友回復：

在社區提出了許多建議并經 OP 確認后，問題是由以下原因引起的：

clothingType.value=''; amnt.value='';

AND 

brand.value = '';

在addExpense()函式中

標籤：javascript html 谷歌应用脚​​本 谷歌表格 谷歌表格 API

上一篇：如何解決這個問題？來自Google應用程式腳本的TwitterApiv1.1發布多部分請求（附加端點）總是出錯

下一篇：多列展開腳本