Как отправить пользовательскую форму на лист Google в несколько строк? - PullRequest
Новая
       17

Как отправить пользовательскую форму на лист Google в несколько строк?

0 голосов
/ 26 сентября 2019

Я хочу разрешить пользователю отправлять пользовательскую форму, отправляемую в наш Google Spreadhseet.Суть в том, что я хочу разрешить пользователю отправлять форму, которая будет добавляться к нескольким строкам в таблице Google.

У меня есть код, который позволяет пользователю отправлять форму, которая будет добавляться на страницу Google один раз.,Если я попытаюсь продублировать эти поля, и пользователь отправит две строки, лист Google захватит только первую строку, а не обе строки.

Таблица Google Spread 

     |field_1|field_2|field_3|field_4|
Row 1|       |       |       |       |
Row 2|       |       |       |       |

HTML - FORM 

<form id="test-form">
        <!-- ROW -->
        <div>
            <label>Field 1</label>
            <input type="text" name="field_1" placeholder="Field 1" />
        </div>

        <div>
            <label>Field 2</label>
            <input type="text" name="field_2" placeholder="Field 2" />
        </div>

        <div>
            <label>Field 3</label>
            <input type="text" name="field_3" placeholder="Field 3" />
        </div>

        <div>
            <label>Field 4</label>
            <input type="text" name="field_4" placeholder="Field 4" />
        </div>

        <!-- ROW 2 -->
        <div>
            <label>Field 1</label>
            <input type="text" name="field_1" placeholder="Field 1" />
        </div>

        <div>
            <label>Field 2</label>
            <input type="text" name="field_2" placeholder="Field 2" />
        </div>

        <div>
            <label>Field 3</label>
            <input type="text" name="field_3" placeholder="Field 3" />
        </div>

        <div>
            <label>Field 4</label>
            <input type="text" name="field_4" placeholder="Field 4" />
        </div>
        <div>
            <button type="submit" id="submit-form">Submit</button>
        </div>
    </form>

Jquery 

     var $form = $('form#test-form'),
            url = 'https://script.google.com/macros/s/*******/'

        $('#submit-form').on('click', function (e) {
            e.preventDefault();

            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                data: $form.serializeArray(),
                success: function (s) {
                    console.log('SUCCESS: FORM SENT', s)
                },
                error: function (e) {
                    console.log('ERROR: FORM NOT SENT', e)
                }
            });
        });

Code.gs 

    function doGet(e){
    return handleResponse(e);
    }

    var SHEET_NAME = "Sheet1";

    var SCRIPT_PROP = PropertiesService.getScriptProperties(); 

    function doPost(e){
    return handleResponse(e);
    }

    function handleResponse(e) {
    var lock = LockService.getPublicLock();
    lock.waitLock(30000);  // wait 30 seconds before conceding defeat.

    try {
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);
    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = []; 

    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);

    return ContentService
          .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
          .setMimeType(ContentService.MimeType.JSON);
    } catch(e){
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
    } finally { //release lock
    lock.releaseLock();
    }
    }
    function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

1 Ответ

0 голосов
/ 26 сентября 2019

Я не могу воспроизвести ваш код, но я предлагаю вам

заменить код jquery с помощью google.script.run , позвонить

и изменить свой код следующим образом:

Code.gs 

 function doGet(e){
    return HtmlService.createHtmlOutputFromFile('index');  
    }

 var SHEET_NAME = "Sheet1";
 var SCRIPT_PROP = PropertiesService.getScriptProperties(); 

 function handleResponse(row1,row2) {
     var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
     var sheet = doc.getSheetByName(SHEET_NAME); 
     sheet.appendRow(row1);
     sheet.appendRow(row2);
    }
    function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

index.html 

<html>
  <head>
    <base target="_top">
  </head>
  <body>
 <form id="test-form">
        <!-- ROW -->
        <div>
            <label>Field 1</label>
            <input type="text" name="field_1" placeholder="Field 1" />
        </div>

        <div>
            <label>Field 2</label>
            <input type="text" name="field_2" placeholder="Field 2" />
        </div>

        <div>
            <label>Field 3</label>
            <input type="text" name="field_3" placeholder="Field 3" />
        </div>

        <div>
            <label>Field 4</label>
            <input type="text" name="field_4" placeholder="Field 4" />
        </div>

        <!-- ROW 2 -->
        <div>
            <label>Field 1</label>
            <input type="text" name="field_1" placeholder="Field 1" />
        </div>

        <div>
            <label>Field 2</label>
            <input type="text" name="field_2" placeholder="Field 2" />
        </div>

        <div>
            <label>Field 3</label>
            <input type="text" name="field_3" placeholder="Field 3" />
        </div>

        <div>
            <label>Field 4</label>
            <input type="text" name="field_4" placeholder="Field 4" />
        </div>
        <div>
            <button type="submit" id="submit-form" onclick="myJSFunction()">Submit</button>
        </div>
    </form>

  <script> 
 function myJSFunction(){
 var row1=[];
   row1.push(document.getElementsByName("field_1")[0].value);
   row1.push(document.getElementsByName("field_2")[0].value);
   row1.push(document.getElementsByName("field_3")[0].value);
   row1.push(document.getElementsByName("field_4")[0].value);
  var row2=[];
   row2.push(document.getElementsByName("field_1")[1].value);
   row2.push(document.getElementsByName("field_2")[1].value);
   row2.push(document.getElementsByName("field_3")[1].value);
   row2.push(document.getElementsByName("field_4")[1].value);
   google.script.run.handleResponse(row1,row2);
 }
</script> 
  </body>
</html>
...