Как разместить данные из формы HTML в нескольких строках на листе Google?

Question

** ОБНОВЛЕНО ** У меня есть форма html, которая добавляется в лист Google при его отправке. В настоящее время одно из полей (выбор имени студента) принимает несколько значений (которые я бы хотел разместить в отдельных строках на странице Google), но отображается только первое выбранное значение. Я не уверен, как сделать так, чтобы множественные выборы отображались в виде отдельных строк.

Вот код html для формы. Параметры STUDENT NAME [] заполняются функцией, которая извлекает имена из списка (здесь не показано).

        <form id = "entry" name="entry" style="display:none">
        <b>Select Date:</b> <input type = "date" id = "date" name = "Date[]">
        <b>Your Name: </b> <input type = "text" id = "person" name = "Name[]">
        <!-- Student Name Selection Section -->
        <b> Student Name:</b>
        <select multiple size = "10" id = "students" name = "Student Name[]" ></select>
        <br><b>Type: </b>
        <input type = "text" id = "type" list = "typeList" name = "Type[]">
            <datalist id = "typeList">
                <option name = "Baseline">Baseline</option>
                <option name = "Trial">Trial</option>
            </datalist>
        <br>
        <!-- Domain/Unit/Skill Section (dependent on previous selection) -->
        <br><b>Domain: </b>
        <input type = "text" id="domain" list = "domainList" onchange="getUnits($('#domain').val())" name = "Domain[]">
        <datalist id = "domainList"></datalist>
        <br><b>Unit: </b>
        <input type = "text" id ="unit" list = "unitList" onchange="getSkills($('#unit').val())" name = "Unit[]">
        <datalist id = "unitList"></datalist>
        <br><b>Skill: </b>
        <input type = "text" id="skill" list = "skillList" name = "Skill[]">
        <datalist id = "skillList"></datalist>
        <br><b>Prompting Level: </b>
        <input type = "text" id = "promptingLevel" list = "promptingLevelList" name = "Prompting Level[]">
        <datalist id = "promptingLevelList"></datalist>
        <!-- <input type = "button" id = "addline" value = "Add Another Entry"> -->
        <input id="submit" type="submit" value="Submit" class="btn btn-info">
    </form>

Следующая часть, в которой публикуется запись:

   //post submission
   const form = document.forms["entry"];
    $('#entry').submit(function(e){
        e.preventDefault(); fetch('https://script.google.com.....',
              {method: 'POST', mode: 'no-cors', body: new FormData(form)})
              .then(response => console.log('Success!', response))
              .catch(error => console.error('Error!', error.message))
    });

А затем в скрипте Служб Google это срабатывает при отправке формы:

var sheetName = 'Submissions';
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 === 'timestamp' ? new Date()
      : 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()
  }
}

Я добавил [] в конец имен полей в форме, но я не уверен, что делать дальше.

Answer 1

Я решил это.

Я добавил эту функцию:

    function serializeSelects (select) {
        var array = [];
        select.each(function(){ array.push($(this).val()) });
        return array;
    }

И когда пользователь нажимает кнопку подтверждения, я изменил код для вызова этой функции, а затем l oop через все варианты и отправьте форму каждый раз:

           //post submission
    $('#entry').submit(function(e){
        //turn multiple students selected into an array
        saved_names = $('#student').val();
        student_names = serializeSelects($(".student_names"));
        //rotate through array of students and submit form each time
        for (var i = 0; i < student_names[0].length; i++) {
            $('#student').val(student_names[0][i]);
            const form = document.forms["entry"];
            e.preventDefault(); fetch('https://script.google.com/macros....',
              {method: 'POST', mode: 'no-cors', body: new FormData(form)})
              .then(response => console.log('Success!', response))
              .catch(error => console.error('Error!', error.message))
            var btn = $(document.activeElement).attr('id');
        }

Answer 2

Если вы хотите просто получить значение <select>, вы можете использовать функцию jquery следующим образом:

$("#option_id").change(function(){
   //this will fetch the value of your select option.
   var select_value = $("#option_id option:selected").text();
}

. Вы можете использовать jquery для отправки данных из вашего html на листы гугл. Вот демо-код для вас:

function PostToGoogle(){
   var field1 = $("field_name").val();
   var field2 = $("field_name").val();

   //Validate if any field is empty
   if(field1 == ''){
       alert("Please fill your name");
       document.getElementById("nameField").focus();
    }

    .
    .


    $.ajax({
        url = "paste your google sheets url here",
        data: {"input_field_name": field1, "input_field_name": field2, .... },
        type: "POST",
        dataType: "xml",
        success: function(d){
           //show your success message
        },
        error: function(x,y,z){
            //show your error message
            $("form").hide();
       }
    });
}

. Вы можете использовать эту функцию при событии щелчка при отправке формы для ввода данных в листы Google. Каждый раз, когда пользователь заполняет форму, он будет сохранен на странице Google в новой строке.