Как отправить данные HTML-формы в Google Sheets
Вставка
- Опубліковано 1 кві 2023
- Смотрим как (1) устроена HTML-форма, (2) CSS-стили для неё, (3) как устроена функция doPost() в Google Таблице и (4) как устроен JavaScript на HTML-странице (спойлер - используется Fetch API)
👉 [01:08] 1. Как устроена форма на HTML
👉 [03:53] 2. CSS-оформление
👉 [04:53] 3. JavaScript в Google Таблицах
👉 [12:09] 3. JavaScript в HTML-документе
Код из примера: codepen.io/htmllabru/pen/ExeMWYw
было полезно. Спасибо за труд!
Шикарное видео 🎉
Отличное видео! Спасибо большое, очень классный кейс разобрали !
Эдуард, спасибо за отзыв!
Спасибо, мне очень помогло
Спасибо! Годный туториал, переделал правда на PHP через CURL, потому что стандартное PHP API гугла слишком замороченное
Класс, рад, что пригодилось!
Здравствуйте! А можете показать код как переделали?
Видос спустя год, круто
это так, верно подметили
здравствуйте! возможна ли работа скрипта, если на странице больше одной формы? У меня работает только в первой, на других страницах тоже работает только первая из форм.
Спасибо!
Приветствую! У форм разные атрибуты id?
У меня вот такая ошибка в консоли браузера: TypeError: Cannot set properties of null (setting 'action') со ссылкой на строку: form.action = URL_APP; Url своей таблицы я вставлял. Что это может быть?
Фрагмент с определением формы ( const form = document.querySelector("#form");) присутствует?
а если неизвестное количество данных может прийти в POST запросе, как тогда это обработать в APPS script?
получать JSON-массив объектов, бегать по ним через .forEach и сохранять
Ваш код не заработает при обращении к гугл-скрипту. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled
В codepen я указал URL_APP с измененным адресом, в константу нужно подставить свой URL развернутого приложения.
Код ещё раз протестировал - работает, отправляет записи в форму (даже с некорректным свойством "cors").
Благодаря вашему комментарию, нашел ошибку в указании cors (нет свойства "cors" , есть свойство "mode"). Когда снимал видео, не заметил, а fetch воспринял это как значение по умолчанию (mode:"cors") - потому работало. Спасибо 👍.
Добавил комментарий в код на codepen.
Тысяча лайков 😊 спасибо 😊
рад, что пригодилось)
Спасибо, намучался с этими CORS. Внутри гугла данные отправляются и принимаются, а вот с внешнего ресурса api настройку хотел, а там ещё больше танцев с получением ключей. Ответы от сервера не нужны, CORS выключил и заработало.
mode: 'cors'
Привет. А можешь сделать ролик как изображение прикрепить из формы в таблицу
Интересно, подумаю над этим 👍
мне просто надо не просто номер паспорта вводить, а фотку прикреплять. За это делюсь как с поля даты нормально заполнить таблицу. В гугл скрипте date = date.split("-").reverse().join(".");@@HtmllabRu
Вопрос - запрос (ftech) отдает 401 код - в чем может быть проблема?
в видео логин и пароль не отправляются, мб что-то с развертыванием?
+ такая же ошибка. Без понятия поч не работает(
@@HtmllabRu тоже ловлю 401(не авторизован), и еще Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type') для if( result.type === 'success' ).
@@HtmllabRu как быть?
@@user-jl1bc2zv3f в URL_APP свой URL развернутого приложения указали ?
А забрать обратно с таблицы на html страницу можно ?
Да, там есть обработчик doGet
@@HtmllabRu так это можно как бэкэнд использовать получается я обзорно посмотрел это видео теперь подробно изучу , спасибо !
@@kv3453 , встречал упоминание что используют как хранилище данных сайта, чтобы пользователю через таблицы контент было легче менять)
А если в форме есть select? Что в скриптах?
Дописал codepen для статического select. Для динамического (на основе ячеек из таблицы), нужно делать лишний запрос и формировать элементы option налету
выдает сообщение "Ошибка!" не могу понять в чем она,
код скопировал поменял только ссылки приложения и ссылки страницы
Попробуйте перед alert со словами об ошибки вывести объект с результатом: console.log(result) - возможно вывод в консоли поможет разобраться в причине ошибки
кодсоль выдает ошибку ) ReferenceError: Cannot access 'result' before initialization
отчего так может быть, подскажите пожалуйста?
@@HtmllabRu
а также вот такую
Access to fetch at 'script.google.com/macros/s/AKfycbxSacbvDJyqkon1wHfeBtEmjW0JgpfM41ylfpl1OjnijDExwPhATKd6gA464-fXvdwx/exec' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
там проблема с cors Ваш fetch запрос сейчас не отправляется@@HtmllabRu
@@user-ci9rg4vp7p в константе URL_APP указали свой адрес веб-приложения на Google Apps Script? Спрашиваю, потому что столкнулся с тем, что некоторые копирую код, но не разворачивают своё приложение.
Хорошее видео, но у меня почуму-то вместо alert появляется текстовый вывод с сообщением
Что пишет?
Насколько я знаю, форма по-умолчанию отправляется как раз Постом а не Гетом.
по-умолчанию - GET.
Звука нету
Совсем плохо со звуком? (