Вопрос:

Динамический выпадающий список в форме HTML с использованием Google App Script

javascript html forms google-apps-script

1067 просмотра

4 ответа

1 Репутация автора

После долгой охоты (в последнее время я живу и дышу StackOverflow ), я решил довести мою проблему до всех вас.

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

Посмотрите, что у меня есть ниже, и дайте мне знать, если у вас есть какое-либо понимание или вы можете направить меня в правильном направлении. Спасибо!!

//basic function that builds the form using indexEvent.html as the template
function doGet(e) {
     return HtmlService
     .createTemplateFromFile('index')
     .evaluate()
     .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

//Simple function to find the wanted sheet by it's independent ID
function getSheetById(id) {
   return SpreadsheetApp.getActive().getSheets().filter(
      function(s) {return s.getSheetId() === id;}
   )[0];
}

//Gets existing values in Column "B" and lump into 1-D array
function getList() {
    var ss = SpreadsheetApp.openById('sheet ID');
    var sheet = getSheetById(240411081); 
    var list  = sheet.getRange(2, 2, sheet.getLastRow()-1, 1).getValues();
    var values  = list.toString().split(",");
    
    return values;
}
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
  <body>
    <form id="Form" onload="addList()">
      <div>
        <label for="List">Select Value:</label><br>
        <input list="list" name="list" placeholder="Choose Value" required> -->
          <datalist id="dropdownList">
          <!-- 
          This is where I am trying to dynamical add <option> tags 
          EXAMPLE:
            <option value="values[0]" />
            <option value="values[1]" />
            <option value="values[2]" />
            ... and so on
          -->
          </datalist>
      </div>
    </form>
  </body>
  
  <script>
    function addList() {
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(addListValues)
        .getList();
    }

    function addListValues(values) {
      var list = document.getElementById('dropdownList');   
        for (var i = 0; i < values.length; i++) {
          list.appendChild('<option value="' + values[i] + '" />');
        }
    }

    function onFailure(err) {
      alert('There was an error!' + err.message);
    }
  </script>
  
<html>
    

Автор: Alex Boothe Источник Размещён: 13.12.2018 09:21

Ответы (4)


0 плюса

32714 Репутация автора

Как насчет этой модификации?

Модифицированный скрипт:

  • В formтеге нет события загрузки.
    • В этом измененном сценарии я изменил на <body onload="addList()">.
  • Есть некоторые проблемы в datalistHTML и Javascript.
    • В inputтеге измените на list="dropdownList".
    • В Javascript, когда значения добавляются datalist, он использует document.createElement("option").

Модифицированный скрипт:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
  <body onload="addList()"> <!-- Modified -->
    <form id="Form"> <!-- Modified -->
      <div>
        <label for="List">Select Value:</label><br>
        <input list="dropdownList" name="list" placeholder="Choose Value" required> --> <!-- Modified -->
          <datalist id="dropdownList">
          <!-- 
          This is where I am trying to dynamical add <option> tags 
          EXAMPLE:
            <option value="values[0]" />
            <option value="values[1]" />
            <option value="values[2]" />
            ... and so on
          -->
          </datalist>
      </div>
    </form>
  </body>

  <script>
    function addList() {
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(addListValues)
        .getList();
    }

    function addListValues(values) {
      var list = document.getElementById('dropdownList');   
      for (var i = 0; i < values.length; i++) {
        var option = document.createElement("option"); // Modified
        option.value = values[i]; // Modified
        list.appendChild(option); // Modified
      }
    }

    function onFailure(err) {
      alert('There was an error!' + err.message);
    }
  </script>

<html>

Замечания:

  • В этом модифицированном сценарии предполагается, что сценарий на стороне GAS работает нормально.

Рекомендации:

Автор: Tanaike Размещён: 14.12.2018 12:26

0 плюса

12043 Репутация автора

Попробуй это;

HTML:

google.script.run//I often put this sort of thing in the ready function or windows.load
  .withSuccessHandler(function(vA) {
    $('#sel1').css('background-color','#ffffff');
    updateSelect(vA);
  })
  .getSelectOptions();

function updateSelect(vA,id){//the id allows me to use it for other elements
  var id=id || 'sel1';
  var select = document.getElementById(id);
  select.options.length = 0; 
  for(var i=0;i<vA.length;i++)
  {
    select.options[i] = new Option(vA[i],vA[i]);
  }
}

гс:

function getSelectOptions()
{
  sortOptions();
  var ss=SpreadsheetApp.openById(getGlobal('gSSID'));
  var sh=ss.getSheetByName('Options');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var options=[];
  for(var i=0;i<vA.length;i++)
  {
    options.push(vA[i][0]);
  }
  return vA;
}
Автор: Cooper Размещён: 14.12.2018 12:32

0 плюса

1 Репутация автора

Я нашел проблемы и сделал соответствующие изменения:

Возвращаемое значение Возвращаемое значение, использующее обработчик успеха, НЕ может вернуть любое значение, кроме строки. Итак, способ обойти это (можно найти на другой странице StackOverflow ) заключается в использовании:

ГАЗ:

// GAS 

function getList() {
    var ss = SpreadsheetApp.openById('sheet ID');
    var sheet = getSheetById(240411081); 
    var list  = sheet.getRange(2, 2, sheet.getLastRow()-1, 1).getValues();
    var values  = list.toString().split(",");
    
    return JSON.stringify(values); //Modified
}

Функция JSON stringify преобразует массив в строковые значения, которые допустимо возвращать. В HTML вы должны проанализировать JSON для реформирования массива. В противном случае другие сценарии будут работать.

ПРИМЕЧАНИЕ. Я добавил JQuery для упрощения вызова HTML-элементов.

HTML:

<body onload="addList();">
 <form id="form">
    <div>
       <input list="List" name="eventList" placeholder="-- Select Event --" required>
          <datalist id="List"> 
             <option>Loading...</option>       
          </datalist>
    </div>     
 </form>
 </body>

 <script>
  function addList() {
         google.script.run.withSuccessHandler(writeList).withFailureHandler(onFail) 
           .getEventList();
  }

  function writeList(list) {
      var dropdown = $("#List");
      dropdown.empty();
      var options = JSON.parse(list); //Modified
      var sortOpt = options.sort();
         if (options.length > 0) {
             for ( var i = 0; i < sortOpt.length; i++) {
                 if (i == 0) {dropdown.append('<option>CUSTOM</option>');}
                   dropdown.append('<option>' + sortOpt[i] + '</option>');
             }
         }
   }
  
  function onFail() {
    alert("This action failed to complete.");
  }
 </script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 </script>
 </html>

Спасибо тем, кто предоставил решения моего вопроса.

Автор: Alex Boothe Размещён: 15.12.2018 03:02

0 плюса

1 Репутация автора

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

form.html:

<!DOCTYPE html>
<html>
<body>

<style>

body {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: white;
}

</style>


<link href='/static/forms/client/css/3145455273- 
mobile_formview_st_ltr.css' type='text/css' rel='stylesheet' media='screen 
and (max-device-width: 721px)'>



<div class="ss-form-container">
<div class="ss-header-image-container"><div class="ss-header-image-image"> 
<div class="ss-header-image-sizer"></div></div></div>

<div class="ss-top-of-page"><div class="ss-form-heading"><h1 class="ss- 
form-title" dir="ltr">Test</h1>
<div class="ss-form-desc ss-no-ignore-whitespace" dir="ltr">WELD DATE 00</div>

<div class="ss-required-asterisk" aria-hidden="true" id="Required">* Required</div></div></div>

<br><br>

<div class="ss-form">
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"    
 onload="if(submitted) 
{window.location='https://sites.google.com/site/formredirection/';}"> 
</iframe>
<form action="https://docs.google.com/forms/d/e/formid/formResponse" 
method="post" target="hidden_iframe" 
onsubmit="submitted=true;">


<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-item-required ss-select"><div class="ss- 
form-entry">
<label class="ss-q-item-label" for="entry_890244015"><div class="ss-q- 
title">JOINT
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"> 
</label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>



<select name="entry.890244015" id="entry_890244015" aria-label="JOINT  " 
aria-required="true" required=""><option value=""></option>
<option value="OPTION 01">OPTION 01</option> <option value="OPTION 
02">OPTION 02</option> <option value="OPTION 03">OPTION 03</option> 
<option value="OPTION 04">OPTION 04</option></select>
</div></div></div>


<input type="hidden" name="draftResponse" value=" 
[null,null,&quot;-8333688893315580231&quot;]
">
<input type="hidden" name="pageHistory" value="0">



<input type="hidden" name="fbzx" value="-8333688893315580231">
<div class="ss-send-email-receipt" style="margin-bottom: 4px;" dir="ltr"> 
<label for="emailReceipt" style="display:inline;"></label></div>


<input type="submit" name="submit" value="Submit" id="ss-submit" 
class="jfk-button jfk-button-action "></form></div></div>

</body>
</html>

server.gs:

function doGet() {
return HtmlService.createTemplateFromFile('form.html')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


// GAS 

function getList() {
var ss = SpreadsheetApp.openById('1a-tZPwhuE4gcLsKBpIPYvYE3aIZAitH3aKRrk4ITkmA');
var sheet = getSheetById(1450437200); 
var list  = sheet.getRange(2, 2, sheet.getLastRow()-1, 1).getValues();
var values  = list.toString().split(",");

return JSON.stringify(values); //Modified
}

Это ссылка на страницу Google: https://docs.google.com/spreadsheets/d/1a-tZPwhuE4gcLsKBpIPYvYE3aIZAitH3aKRrk4ITkmA/edit#gid=1450437200

Не могли бы вы посоветовать мне любую дополнительную модификацию. заранее спасибо

Автор: Mahmoud Bayoumi Размещён: 11.08.2019 07:04
Вопросы из категории :
32x32