我怎样才能给一个 HTML 表单同时给按钮一个 post 动作和一个 onClick 动作？

Question

我有一个 HTML 表单，我想将其数据发送到 Google Sheet。这是通过 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 表单中的网络应用程序 URL 已删除，因为我不确定是否应将其保密。

Answer 1

经过社区的大量建议并经 OP 确认，问题是由以下原因引起的：

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

AND 

brand.value = '';

在addExpense()函数中

我怎样才能给一个 HTML 表单同时给按钮一个 post 动作和一个 onClick 动作？

How can I give an HTML form both a post action and an onClick action to button?

html

javascript

google-sheets

google-apps-script

google-sheets-api