Блог

В Google листе есть поля: Имя клиента, Мобильный телефон, Электронная почта, День рождения и годовщина

Например, в Google Листе есть следующие данные : имя: прасад, мобильный телефон 9999999, электронная почта xxx@gmial.com День рождения:11/1/1990 День рождения:11/1/2020

В HTML: Имя клиента раскрывается, значения будут поступать из таблицы Google

Мне нужно, чтобы, если имя клиента выбрано из выпадающего списка, все поля заполнялись на основе выбора из Google листа

Например: если я выберу имя прасад, остальное заполнится в соответствии с таблицей Google в приведенном выше примере

 HTML Code :

<h3>Customer Details</h3>

   
 
      <label>Customer Name: : <br>
      <input list="Customer_Name"  name="Customer_Name" ></label>
      <datalist id="Customer_Name" >
      <option value="" style="display:none;"></option> 
        <?!= getVendors(); ?>
      </datalist></td> 

    
    Customer Mobie Number:<br>
    <input type="number" name="Customer_Mobie_Number">
    <br>
    
    Customer Email:<br>
    <input type="email" name="Customer_Email">
    <br>
    
   Birthday Date:<br>
    <input type="date" name="Birthday">
    <br>


JS:

    function getVendors() {
      var active = SpreadsheetApp.getActive();
      var sheet = active.getSheetByName("Cus_Details");
      var lastRow = sheet.getLastRow();
      var myRange = sheet.getRange("A2:A"   lastRow); 
      var data    = myRange.getValues();
      var optionsHTML = "";
      for (var i = 0; i < data.length; i =1) {
        optionsHTML  = '<option>'   data[i][0]   '</option>';
      };
      return optionsHTML;
    }
 

Я считаю, что ваша цель заключается в следующем.

• Когда раскрывающийся список «Customer_Name» изменяется, вы хотите извлечь значения из строки и поместить в каждый входной тег Mobile,Email,Birthday,anniversary .
• Ваша электронная таблица имеет заголовок Customer Name,Mobile,Email,Birthday,anniversary .

В этом случае, как насчет следующей модификации?

Сторона HTML и Javascript:

 <h3>Customer Details</h3>
<label>Customer Name: : <br>
  <input list="Customer_Name" id="list" name="Customer_Name"></label>
<datalist id="Customer_Name">
  <option value="" style="display:none;"></option>
  <?!= getVendors(); ?>
</datalist></td>
Customer Mobie Number:<br>
<input type="number" id="Customer_Mobie_Number" name="Customer_Mobie_Number">
<br>
Customer Email:<br>
<input type="email" id="Customer_Email" name="Customer_Email">
<br>
Birthday Date:<br>
<input type="date" id="Birthday" name="Birthday">
<br>
Anniversary Date:<br>
<input type="date" id="Anniversary" name="Anniversary">
<br>
<script>
  document.getElementById("list").addEventListener("change", setValues);

  function setValues(e) {
    google.script.run.withSuccessHandler(([b, c, d, e]) => {
      document.getElementById("Customer_Mobie_Number").value = b;
      document.getElementById("Customer_Email").value = c;
      document.getElementById("Birthday").value = d;
      document.getElementById("Anniversary").value = e;
    }).getValues(e.target.value);
  }
</script>
 

Сторона сценария Google Apps:

 function getValues(e) {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Cus_Details");
  var lastRow = sheet.getLastRow();
  var range = sheet.getRange("A2:A"   lastRow).createTextFinder(e).matchEntireCell(true).findNext();
  return range.offset(0, 1, 1, 4).getValues()[0].map(e => e instanceof Date ? e.toISOString().split("T")[0] : e);
}
 

Примечание:

• Когда я увидел ваш HTML и ваше образцовое изображение, мне показалось, что «Дата годовщины» и теги ниже «Дата годовщины». Поэтому в этом ответе я добавил входной тег для «Дата годовщины». Это изменение является примером измененного сценария. Поэтому, пожалуйста, измените это для вашей реальной ситуации.

Добавлен:

О следующем вашем ответе,

спасибо за ваше время, это работает так, как я просил, но когда DOB или универсальное копирование с листа Google в поле происходит на один день меньше (например:14.08.1990 в листе, при вводе он приходит 13.08.1990)

В этом случае, как насчет изменения приведенного выше сценария getValues(e) следующим образом.

От:

 return range.offset(0, 1, 1, 4).getValues()[0].map(e => e instanceof Date ? e.toISOString().split("T")[0] : e);
 

Для:

 return range.offset(0, 1, 1, 4).getValues()[0].map(e => e instanceof Date ? Utilities.formatDate(e, Session.getScriptTimeZone(), "yyyy-MM-dd") : e);
 

или

 return range.offset(0, 1, 1, 4).getValues()[0].map(e => e instanceof Date ? Utilities.formatDate(e, active.getSpreadsheetTimeZone(), "yyyy-MM-dd") : e);