I have an HTML form whose data I would like to be sent to a Google Sheet. This is done through Apps Script.

Here is the Apps Script code:

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()
  }
}

I made a simple HTML form to test it out, and it seemed to have worked. Here is the code for it:

    <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>

However, when I made my own form, it did not seem to work. Here is the code for the actual HTML Form:

<form method="POST" action = "MY_WEB_APP_URL"id = "clothingExpenses" class = 'display'>
           <div  style = 'text-align:center;' >
              <div style = 'text-align:center;' >
              <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'  onclick="addExpense()">Add expense</button>
   <button type = 'submit'  onclick="closeExpenseForm()">Close form</button>

 </form>

addExpense() function:

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();

    
   
}

The web app URL in the second HTML form has been removed as I am not sure if it should be keep it private or not.

CodePudding user response：

After numerous suggestions from the community and as confirmed by OP the issue was caused by:

clothingType.value='';

amnt.value='';

AND

brand.value = '';

In the *addExpense()* function