我目前正在制作費用跟蹤器。帶有用戶輸入的 HTML 表單將資料發送到 Google 表格并同時執行以下addExpense()功能;
function addExpense()
{
clothingID={'id':Date.now(),'clothingType':clothingType.value, 'brand': brand.value, 'amnt':amnt.value, };
clothingArray.push(clothingID);
count1 ;
showTotalBalance();
showDifference();
expenseHistory();
clothingType.value='';
amnt.value='';
brand.value = '';
setItemInStorage();
}
沒有事件的 HTML 表單如下所示onsubmit:
<form method = "POST" action = 'https://script.google.com/macros/s/AKfycbwo9AKU8OB5YXs_l0w3wqKoZDYp6F5C3EuarHeQVILt4CK9zaIhmGQETz7StlOc2P/exec' >
<div class="row">
<div class="six columns">
<label>Clothing type</label>
<input name = "Type" id = 'type' style = "width: 50%;" type="text" placeholder="Enter the clothing type" id="exampleEmailInput">
</div>
</div>
<div>
<label>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 = "Store" id="brand" style = "width: 24%;" type="text" placeholder="Enter the clothing brand" id="exampleEmailInput">
</div>
<button type = 'submit' class="button-primary">Add expense</button>
</form>
當我提交此表單時,資料會毫無問題地放入 Google 表格中,如下所示:

但是,我希望表單既可以執行該addExpense()功能,也可以將資料發送到 Google 表格。addExpense()以下是在表單提交時執行該函式時發生的情況:

這只有在表單元素看起來像這樣時才能實作:
<form onsubmit='addExpense()'>
當我將action屬性和onsubmit事件都放在我的表單中時:
<form method="POST" action ="https://script.google.com/macros/s/AKfycbwo9A2AKU8OB5YXs_l0w3wqKoZDYp6F5C3EuarHeQVILt4CK9zaIhmGQETz7StlOc2P/exec" onsubmit='addExpense()'>
Date()我只得到我的 Google 表格中回傳的日期(由物件生成),但該addExpense()函式作業正常:

關于為什么會發生這種情況以及如何解決這個問題的任何想法?
uj5u.com熱心網友回復:
這些行:
clothingType.value='';
amnt.value='';
brand.value = '';
服裝型別、amnt 和品牌是對相關輸入元素的實時參考。將值設定為空字串會產生這樣的效果:當您提交表單時,這些條目將是空白的(因為您將它們設定為空白!)。
我認為您這樣做的原因是在提交表單后清除表單。但是我認為您不需要這樣做,通常一旦您提交并重新加載表單,它就會自動清除。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/449465.html
標籤:javascript html 谷歌应用脚本 谷歌表格 谷歌表格 API
