当我的表单中有 onsubmit 事件时，为什么我的 HTML 表单不能正确地将用户输入发送到 Google 表格？

Question

我目前正在制作费用跟踪器。带有用户输入的 HTML 表单将数据发送到 Google Sheet 并同时执行以下 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();

    
   
}

没有 onsubmit 事件的 HTML 表单看起来像这样：

     <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 Sheet 中没有问题，因此：

但是，我希望表单既执行 addExpense() 函数，又将数据发送到 Google Sheets。这是在提交表单时执行 addExpense() 函数时发生的情况：

这只有在表单元素如下所示时才能实现：

 <form  onsubmit='addExpense()'>

当我将 action 属性和 onsubmit 事件都放置到我的表单中时：

<form method="POST"  action ="https://script.google.com/macros/s/AKfycbwo9A2AKU8OB5YXs_l0w3wqKoZDYp6F5C3EuarHeQVILt4CK9zaIhmGQETz7StlOc2P/exec" onsubmit='addExpense()'>

我只得到 Google Sheet 中返回的日期（由 Date() 对象生成），但是 addExpense() 函数工作正常：

关于为什么会发生这种情况以及如何解决这个问题的任何想法？

Answer 1

这些行：

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

clothingType、amnt 和 brand 是对相关输入元素的实时引用。将值设置为空字符串会产生以下效果：当您提交表单时，这些条目将为空白（因为您将它们设置为空白！）。

我认为您这样做的原因是为了在表单提交后将其清除。但是我认为您不需要，通常一旦您提交并重新加载表单，它就会自动清除。

当我的表单中有 onsubmit 事件时，为什么我的 HTML 表单不能正确地将用户输入发送到 Google 表格？

Why does my HTML form not send user input to Google Sheets properly when I have an onsubmit event in my form?

html

javascript

google-sheets

google-apps-script

google-sheets-api