HTML-форма боковой панели не передает данные в Google Sheet

Я пытаюсь создать HTML-форму боковой панели, которая добавляет данные, введенные в форму, в качестве новой строки листа при нажатии кнопки «Отправить». Мне удалось создать боковую панель и HTML-форму, но я не могу понять, как отправить данные, введенные в форму, и добавить строку. Я новичок в программировании и не могу понять, почему это не работает — я следовал нескольким урокам точно так, как показано, и ни один из них, похоже, не работает.

Вот часть javascript:

//@OnlyCurrentDoc

function onOpen() {
 SpreadsheetApp
   .getUi()
   .createMenu("Intake Form")
   .addItem("Show Intake Form", "showAdminSidebar")
   .addToUi();
}

function showAdminSidebar() {
 var widget = HtmlService.createHtmlOutputFromFile("Intake Form.html");
 widget.setTitle("Intake Form");
 SpreadsheetApp.getUi().showSidebar(widget);
}

function appendRowFromFormSubmit(form) {
 var row = [form.jobID, form.customerName, form.customerAddress, form.customerPostcode, form.customerPhone, form.customerEmail, form.applianceMake, form.applianceModel, form.reportedFault, form.servicesRequired, form.serviceLocation, form.inspectionFee, form.call-outFee];
 SpreadsheetApp.getActiveSheet(Worksheet).appendRow(row);
}

Вот код HTML-формы:

<!DOCTYPE html>
<html>
 <head>
   <base target = "_top">
   <script>
     function submitForm() {
       google.script.run.appendRowFromFormSubmit(document.getElementById("intakeForm"));
     }

</script>
 </head>
 <body>
   <h2>Enter Customer Details</h2>
   <form id = "intakeForm">
     <label for = "jobID">Job ID</label>
     <input type = "text" id = "jobID" name = "jobID"><br><br>
     <label for = "customerName">Customer Name</label>
     <input type = "text" id = "customerName" name = "customerName"><br><br>
     <label for = "customerAddress">Customer Address</label>
     <input type = "text" id = "customerAddress" name = "customerAddress"><br><br>
     <label for = "customerPostcode">Customer Postcode</label>
     <input type = "text" id = "customerPostcode" name = "customerPostcode"><br><br>
     <label for = "customerPhone">Customer Phone</label>
     <input type = "text" id = "customerPhone" name = "customerPhone"><br><br>
     <label for = "customerEmail">Customer email</label>
     <input type = "text" id = "customerEmail" name = "customerEmail"><br><br>
     <label for = "applianceMake">Appliance Make</label>
     <input type = "text" id = "applianceMake" name = "applianceMake"><br><br>
     <label for = "applianceModel">Appliance Model</label>
     <input type = "text" id = "applianceModel" name = "applianceModel"><br><br>
     <label for = "reportedFault">Reported Fault</label>
     <input type = "text" id = "reportedFault" name = "reportedFault"><br><br>
     <div>
       <label for = "servicesRequested">Services Requested:</label><br>
       <input type = "checkbox" id = "inspection" name = "servicesRequested" value = "Inspection" multiple>
       <label for = "inspection">Inspection</label><br>
       <input type = "checkbox" id = "servicing" name = "servicesRequested" value = "Servicing">
       <label for = "servicing">Servicing</label><br>
       <input type = "checkbox" id = "repairs" name = "servicesRequested" value = "Repairs">
       <label for = "repairs">Repairs</label><br>
       <input type = "checkbox" id = "refurbishedAppliance" name = "servicesRequested" value = "Refurbished Appliance">
       <label for = "refurbishedAppliance">Refurbished Appliance</label><br><br>
       <div>
       <label for = "serviceLocation">Services Requested:</label><br> 
       <input type = "checkbox" id = "atWorkshop" name = "serviceLocation" value = "At Workshop">
       <label for = "atWorkshop">At Workshop</label><br>
       <input type = "checkbox" id = "onsite" name = "serviceLocation" value = "Onsite">
       <label for = "onsite">Onsite</label><br>
       <div>
     <label for = "inspectionFee">Inspection Fee</label>
     <input type = "text" id = "inspectionFee" name = "inspectionFee"><br><br>
     <label for = "calloutFee">Call-out Fee</label>
     <input type = "text" id = "calloutFee" name = "calloutFee"><br><br>
    <input type = "button" value = "Submit" onclick = "submitForm();">
   </form>
 </body>
</html>

Есть идеи, как добавить данные формы в новую строку, когда я нажимаю «Отправить»?

Наверное, вам стоит подать заявку preventDefault(). См. Code.gs и index.html в Формы.

— 02.09.2024 19:49

forms google-sheets google-apps-script web-applications

02.09.2024 17:28

JS - События опций формы

В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот...

CSS - Стили, связанные с вводом формы

Общими стилями ввода для форм являются Input (включая Text, Radio, checkbox), Select и Textarea, из которых Input относительно прост, поэтому в этой...

Создание многостраничной формы заявления о приеме на работу с помощью Angular

Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для...

Проверка дублирующего ввода с помощью этой простой функции JavaScript

Это моя html форма, обернутая в таблицу:

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ниже есть пара проблем, их может быть больше.

Следующая строка неверна
```
SpreadsheetApp.getActiveSheet(Worksheet).appendRow(row);
```
SpreadsheetApp.getActiveSheet не должен включать параметр. Ссылка. https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app#getActiveSheet()
Элементы DIV HTML-формы имеют открывающий тег <div>, но не имеют закрывающего тега </div>.

Было бы лучше, если бы вы потратили некоторое время на изучение устранения неполадок в проектах Apps Script. Начните с чтения https://developers.google.com/apps-script/guides/support/troubleshooting

Связанный

Значение пароля для ввода данных на боковой панели Google Sheet

02.09.2024 18:38

Ответ принят как подходящий

С моей стороны работает следующее:

Code.gs модуль;

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Intake Form')
    .addItem("Show Intake Form", "showAdminSidebar")
    .addToUi();
}

// Sidebar
function showAdminSidebar() {
  var widget = HtmlService.createHtmlOutputFromFile("Intake Form.html");
  widget.setTitle("Intake Form");
  SpreadsheetApp.getUi().showSidebar(widget);
}

// Inserting data from the form
function addData(array) {
  SpreadsheetApp.getActiveSheet().appendRow(array);
}

Intake Form.html модуль;

<!DOCTYPE html>
<html>
 <head>
    <base target = "_top">
    <style>
      body {
        background: #A5B6B5;
        background-image: linear-gradient(rgba(203, 255, 84, 0.5) .05em, transparent .1em), linear-gradient(90deg, rgba(203, 255, 84, 0.5) .02em, transparent .1em);
        background-size: 1em 1em;
      }
    </style>
    <script>
      function submitForm() {
        // Select all 'input' elements with type= 'text' or type= 'checkbox' where checkbox type input elements are 'checked'
        const inputs = document.querySelectorAll('input[type = "text"],input[type = "checkbox"]:checked');
        let array = [];

        for (const input of inputs) {
          array.push(input.value);
        }

        if (array.join('') == '') {
          alert('The form is empty!');
          return;
        }

        // Send data to the sheet
        google.script.run.addData(array);

        // Clear form
        inputs.forEach(input => input.value = '');
      }
     </script>
 </head>
 
 <body>
   <h2>Enter Customer Details</h2>
   <form id = "intakeForm">
     <label for = "jobID">Job ID</label>
     <input type = "text" id = "jobID" name = "jobID"><br><br>
     <label for = "customerName">Customer Name</label>
     <input type = "text" id = "customerName" name = "customerName"><br><br>
     <label for = "customerAddress">Customer Address</label>
     <input type = "text" id = "customerAddress" name = "customerAddress"><br><br>
     <label for = "customerPostcode">Customer Postcode</label>
     <input type = "text" id = "customerPostcode" name = "customerPostcode"><br><br>
     <label for = "customerPhone">Customer Phone</label>
     <input type = "text" id = "customerPhone" name = "customerPhone"><br><br>
     <label for = "customerEmail">Customer email</label>
     <input type = "text" id = "customerEmail" name = "customerEmail"><br><br>
     <label for = "applianceMake">Appliance Make</label>
     <input type = "text" id = "applianceMake" name = "applianceMake"><br><br>
     <label for = "applianceModel">Appliance Model</label>
     <input type = "text" id = "applianceModel" name = "applianceModel"><br><br>
     <label for = "reportedFault">Reported Fault</label>
     <input type = "text" id = "reportedFault" name = "reportedFault"><br><br>
     <div>
        <label for = "servicesRequested">Services Requested:</label><br>
        <input type = "checkbox" id = "inspection" name = "servicesRequested" value = "Inspection" multiple>
        <label for = "inspection">Inspection</label><br>
        <input type = "checkbox" id = "servicing" name = "servicesRequested" value = "Servicing">
        <label for = "servicing">Servicing</label><br>
        <input type = "checkbox" id = "repairs" name = "servicesRequested" value = "Repairs">
        <label for = "repairs">Repairs</label><br>
        <input type = "checkbox" id = "refurbishedAppliance" name = "servicesRequested" value = "Refurbished Appliance">
        <label for = "refurbishedAppliance">Refurbished Appliance</label><br><br>
      </div>
      <div>
        <label for = "serviceLocation">Services Requested:</label><br> 
        <input type = "checkbox" id = "atWorkshop" name = "serviceLocation" value = "At Workshop">
        <label for = "atWorkshop">At Workshop</label><br>
        <input type = "checkbox" id = "onsite" name = "serviceLocation" value = "Onsite">
        <label for = "onsite">Onsite</label><br>
      </div>
     <label for = "inspectionFee">Inspection Fee</label>
     <input type = "text" id = "inspectionFee" name = "inspectionFee"><br><br>
     <label for = "calloutFee">Call-out Fee</label>
     <input type = "text" id = "calloutFee" name = "calloutFee"><br><br>
    <input type = "button" value = "Submit" onclick = "submitForm();">
   </form>
 </body>
</html>

02.09.2024 19:54

Другие вопросы по теме

Есть ли способ отобразить изображение в таблице HTML непосредственно из ячейки Google Таблиц?

Доступ к другим данным листа изнутри ARRAYFORMULA

Я хочу повторить строку в ответе формы листов Google на основе значения даты для последовательных дат

Форматирование пользовательского интерфейса кнопки листа

Подсчитайте, сколько раз подряд появляются группы из трех нулей (0)

Вставить значение ответов формы в таблицу в Google DOC

Автозаполнение MaterializeCSS не работает

Как получить список всех имен листов, содержащих «неделю», которые обновляются при редактировании

Значение подсчета в ячейках выше

Как перечислить все комбинации значений из двух столбцов, разделенных точкой с запятой, в Excel/Sheets?

HTML-форма боковой панели не передает данные в Google Sheet

Ответы 2

Другие вопросы по теме

Похожие вопросы