BG Development


  Reply to this topicStart new topicStart Poll

> html post to googlesheets, js
peterhoff
Публикувано на: 14-05-2022, 11:20
Quote Post



Име: Петко Иванов
Група: Потребител
Ранг: Активен

Мнения: 240
Регистриран на: 25.07.11



Здравейте, имам една простичка форма за попълване с input тагове от bootstrap, който успях да вържа да submit-ва към една таблица в google sheets.
input таговете ги получавам в таблицата, но имам и един dropdown list с имена и искам, когато избера име просто да го изпише в дадената клетка след submit.

ето и кода, който имам.
HTML:
CODE

!doctype html>
<html lang="bg">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   <link href="style.css" rel="stylesheet">
   <title>YavlenaTeam</title>
 </head>
 <body>

   <form method="POST" class="row g-3" name="google-sheet">
   <div class="input-group mb-3">
       <label class="input-group-text" for="inputGroupSelect01">Имена</label>
       <select class="form-select" name="brokers">
         <option selected>Изберете брокер</option>
         <option value="1">1 име</option>
         <option value="2">2 име</option>
         <option value="3">3 име</option>
         <option value="4">4 име</option>
         <option value="5">5 име</option>
         <option value="6">6 име</option>
       </select>
     </div>
     <div class="form-floating mb-3" name="client">
       <input type="text" class="form-control" name="client" placeholder="Име на клиента">
       <label for="floatingInput" name="client">Име на клиента</label>
     </div>
       <div class="col-md-6" name="deposit">
         <label for="inputEmail4" class="form-label" name="deposit">Депозит</label>
         <input type="date" class="form-control" name="deposit">
       </div>
       <div class="col-md-6" name="depositReturn">
         <label for="inputPassword4" class="form-label" name="depositReturn">Депозит - Връщане</label>
         <input type="date" class="form-control" name="depositReturn">
       </div>

       <div class="row g-3" name="contract">
           <div class="col-md-6" name="contracts">
             <label for="inputEmail4" class="form-label" name="contract">Предварителен договор</label>
             <input type="date" class="form-control" name="contract">
           </div>
           <div class="col-md-6" name="notary">
             <label for="inputPassword4" class="form-label" name="notary">Изповядване</label>
             <input type="date" class="form-control" name="notary">
           </div>
           <div class="col-md-6" name="teamWork">
               <label for="inputEmail4" class="form-label" name="teamWork">Сътрудничество</label>
               <input type="text" class="form-control" name="teamWork">
             </div>
             <div class="col-md-6" name="partners">
               <label for="inputPassword4" class="form-label" name="partners">Външен брокер</label>
               <input type="text" class="form-control" name="partners">
             </div>

           <div class="form-floating mb-3" name="commission">
               <input type="number" class="form-control" name="commission" placeholder="Име на клиента">
               <label for="floatingInput" name="commission">Комисион в евро без ДДС</label>
             </div>
             <button type="submit" name="submit" class="btn btn-primary">Изпрати</button>
           </form>

           <script type="text/javascript">

                const scriptURL = 'https://script.google.com/macros/s/AKfycbxcZlumVaYGBoHu2NwPCQO5P7OW5lRsapeeDCOPghAsrp01sUQTDEHYtvkQU6leH2KX0g/exec'
                     const form = document.forms['google-sheet']
                   
                     form.addEventListener('submit', e => {
                       e.preventDefault()
                       fetch(scriptURL, { method: 'POST', body: new FormData(form)})
                         .then(response => alert("You have successfully submitted."))
                         .catch(error => console.error('Error!', error.message))
                     })
           </script>

   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </body>
</html>


Code.gs:
CODE

var sheetName = 'Sheet1'
            var scriptProp = PropertiesService.getScriptProperties()

            function intialSetup () {
              var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
              scriptProp.setProperty('key', activeSpreadsheet.getId())
            }

            function doPost (e) {
              var lock = LockService.getScriptLock()
              lock.tryLock(10000)

              try {
                  var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
                  var sheet = doc.getSheetByName(sheetName)

                  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
                  var nextRow = sheet.getLastRow() + 1

                  var newRow = headers.map(function(header) {
                    return header === 'brokers' ? document.getElementById("mySelect").value : 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()
              }
            }


моля да ми подскажете къде бъркам icon_smile.gif
PMEmail Poster
Top
peterhoff
Публикувано на: 15-05-2022, 16:57
Quote Post



Име: Петко Иванов
Група: Потребител
Ранг: Активен

Мнения: 240
Регистриран на: 25.07.11



Никой ли незнае?
PMEmail Poster
Top
Антон Яначков
Публикувано на: 22-05-2022, 01:30
Quote Post



Име: Антон Яначков
Група: Потребител
Ранг: Почетен член

Мнения: 2621
Регистриран на: 27.07.16



QUOTE (peterhoff @ 15-05-2022, 16:57)
Никой ли незнае?

За да ти се зареди избраното, трябва формата да го вземе от някъде при зареждане.
Аз бих изпратил избраното към някоя клетка на таблицата при субмитването и при новото зареждане на формата бих го прочел от набелязаната клетка в таблицата.

Но таблицата може да се забави и затова при зареждането на формата е добре да осигуриш някаква време задръжка или нещо по-хитро с някакъв флаг, който да ти гарантира случващото се.

Това мнение е било редактирано от Антон Яначков на 22-05-2022, 01:35
PMEmail PosterUsers Website
Top
DarkOne
Публикувано на: 22-05-2022, 09:13
Quote Post


Group Icon
Име: Александър Петков
Група: Администратор
Ранг: Почетен член

Мнения: 3659
Регистриран на: 30.01.04



Не ми се чете html + js, но принципно ако има някакъв проблем да се вземе стойността от <select>, може с js да се прехвърля в <input type="hidden"> и да си действаш както с другите <input>-и.


--------------------
The man who learns only what others know
is as ignorant as if he learns nothing.
The treasures of knowledge are the most rare,
and guarded most harshly.
-- Chronicle of the First Age
PMICQ
Top
2 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента: raddo

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0