Google Apps script connected wit Google Sheet for Data Purpose

Question

I have been trying to make HTML Code to to connect to google Sheet to paste data but my code is still appearing an error even while making it i do not know what is the reason someone can please look into this matter.

The problem is that Form window is not getting open to fill the form for submission of data in google sheets.

I would really appreciate the help.

Here is sheet attached link

https://docs.google.com/spreadsheets/d/1qFNb5NPuJBvgG7u3UxcNcf4h6hu2lkuabP7emLc7pwE/edit?usp=sharing

<!DOCTYPE html>
<html>
   <head>
      <base target="_top">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      <script>
         function AddRow()
         {
           var Invoice = document.getElementById("Invoice").value;
           var  InvoiceDate = document.getElementById("InvoiceDate").value;
           var Code = document.getElementById("Code").value;
           var Size = document.getElementById("Size").value;
           var ProductName = document.getElementById("ProductName").value;
           var Transaction = document.getElementById("Transaction").value;
           var StockQty = document.getElementById("StockQty").value;
           var MRP = document.getElementById("MRP").value;
         
           if(InvoiceDate != '' && Code != '' && Size != '' && ProductName != '' && Transaction != '' && StockQty != '' && MRP != '')
           {
           google.script.run.AddRecord(InvoiceDate, Code, Size, ProductName, Transaction,   StockQty,   MRP);
           document.getElementById("Invoice").value = '';
           document.getElementById("InvoiceDate").value = '';
           document.getElementById("Code").value = '';
           document.getElementById("Size").value = '';
           document.getElementById("ProductName").value = '';
           document.getElementById("Transaction").value = '';
           document.getElementById("StockQty").value = '';
           document.getElementById("MRP").value = '';
           document.getElementById("display_error").innerHTML = "";
           }
           else
           {
           document.getElementById("display_error").innerHTML = "Please Enter All Information!";
           }
         }
      </script>
   </head>
   <body>
      <div style="padding: 10px;" >
         <form>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Timestamp">Invoice</label>
                  <input type="text" id="Timestamp" class="form-control" />
               </div>
               <div class="form-group col-md-3">
                  <label for="Name">InvoiceDate</label>
                  <input type="text" id="Name" class="form-control" />
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Shift">Code</label>
                  <input type="text" id="Shift" class="form-control" />
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Product">Size</label>
                  <input type="text" id="Product" class="form-control" />
               </div>
               <div class="form-group col-md-3">
                  <label for="Batch">ProductName</label>
                  <input type="text" id="Batch" class="form-control" />
               </div>
               <div class="form-group col-md-3">
                  <label for="Machine" >Transaction</label>
                  <input type="text" id="Machine" class="form-control" />
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="MfgExp" >StockQty</label>
                  <input type="text" id="MfgExp" class="form-control "/>
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Yield" >MRP</label>
                  <input type="text" id="Yield" class="form-control "/>
               </div>
            </div>
            <div class="form-group col-md-3">
               <input type="button" value="Submit" class="btn btn-primary" onclick="AddRow()" />
               <div id="display_error" style="color: red" ></div>
            </div>
         </form>
      </div>
   </body>
</html>

Sir The Script function not found, when i try to open the form. — user14286902
Your element id's in the script don't match what's in your html — Cooper
For example there is no element with id 'Invoice'. The form opens for me just fine. The problems start when you try to run AddRow(); You need to learn how to use console.log. Check chrome support for more info on that — Cooper
Simplify your code just use one text box and one button and get that working and then move on to bigger things later. — Cooper

Aerials Aerials · Accepted Answer · 2020-10-07T15:11:10

I believe you are confusing labels with input element ids.

When you write var Invoice = document.getElementById("Invoice").value;, you are telling the script to find the element with id="Invoice" in your HTML.

As you can tell when you press the submit button the console will show the error: "Cannot get value property of null" which means it was not able to find an element with the id supplied to document.getElementById. <-- Read this docs before continuing.

Solution:

Change your HTML <input> elements' id attributes to correspond to the value that you are passing as id parameter to document.getElementById

Example:

From your HTML code I extracted the following lines, please see the comments:

<script>
var Invoice = document.getElementById("Invoice").value; // Here you are saying id="Invoice".
</script>
<div class="form-group col-md-3">
   <label for="Timestamp">Invoice</label>
   <input type="text" id="Timestamp" class="form-control" />  <!-- Here: id="Timestamp" -->
</div>

So that is why you are getting errors. Map the input id's correctly. But more importantly reading up on HTML and JavaScript would help a lot.

Google Apps script connected wit Google Sheet for Data Purpose

1 Answers

Solution:

Example: