Добавьте поля к этой html форме, которые добавляют / редактируют данные в электронной таблице - PullRequest
Новая
       84

Добавьте поля к этой html форме, которые добавляют / редактируют данные в электронной таблице

1 голос
/ 25 февраля 2020

Я нашел сценарии ниже на этом посте и попытался выяснить, как добавить новый столбец на лист и заставить его работать с формой html так же, как два столбца уже существует

Но безуспешно ...

Если кто-то может найти время, чтобы объяснить мне, как это сделать, было бы очень приятно side Сторона HTML / CSS и основы c JS понятны для меня, но остальное трудно понять самому

Здесь образец листа

Спасибо!

CODE.GS 

function doGet(request) {
  return HtmlService.createTemplateFromFile('Form').evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}



/* Find ID*/

function getID(IDsearch){
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);  
  var ws = ss.getSheetByName("Database");
  /*set cells to plain text*/
  var range = ws.getRange(1, 1, ws.getMaxRows(), ws.getMaxColumns());
  range.setNumberFormat("@");

  var data = ws.getRange(3, 1, ws.getLastRow(), 2).getValues();


  var dataInput = data.map(function(r){return r[1];}); //ID column

  var position = dataInput.indexOf(IDsearch); //index of the row where ID is
  Logger.log(position);
  var dataArray = ws.getRange(position+3, 1, 1, 2).getValues(); //array with data from searched ID
  var clientsDataString = dataArray.toString();
  var clientsDataArray = clientsDataString.split(',');


  if(position > -1){
    return clientsDataArray;
  } else {
    return position;
  }

}




function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Database");

  var ranges = ws.getRange(4, 2, ws.getLastRow() - 3, 1).createTextFinder(formObject.ID).findAll();
  if (ranges.length > 0) {
    for (var i = 0; i < ranges.length; i++) {
      ranges[i].offset(0, -1, 1, 2).setValues([[formObject.name, formObject.ID]]);
    }
  } else {
    ws.appendRow([formObject.name, formObject.ID]);
  }
}

JavaScript. html

<script>

function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    


  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();


  }


/* Search for ID */
document.getElementById("btn-procurar").addEventListener("click", onSearch);

function onSearch() {

  var IDsearch = document.getElementById("insertID").value;
  google.script.run.withSuccessHandler(populateForm).getID(IDsearch);

}


function populateForm(clientsData) {

  document.getElementById("name").value = clientsData[0];
  document.getElementById("ID").value = clientsData[1];


}


</script>

форма. html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Contact-Form-Clean.css">
    <link rel="stylesheet" href="/styles.css">
    <?!= include('JavaScript'); ?>
    <?!= include('form-css'); ?>

</head>


<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="register-photo" style="padding-top: 30px;">
        <div class="form-container" style="width: 695px;">
            <form id="myForm" onsubmit="handleFormSubmit(this)" method="post" style="width: 720px;padding: 10px;padding-right: 20px;padding-left: 25px;">
                <input class="form-control" type="text" id="name" name="name" placeholder="Name" style="width: 300px;display: inline-block;margin-bottom: 20px;">
                    <input class="form-control" type="number" id="ID" name="ID" placeholder="ID" style="width: 165px;display: inline-block;" required="">
                    <button type="submit" id="btn-submeter" onclick="return confirm('Submit?')" class="btn btn-primary btn-block" style="width: 644px;margin-bottom: 35px;">Save data</button>
                    <script>
                        document.getElementById("myForm").addEventListener("submit", myFunction);
                        function myFunction() {
                        alert("Success");
                        }
                    </script>
                    <div id="output"></div>
                    <div style="margin-bottom: 15px;padding: 5px;background-color: rgba(255,255,255,0);padding-top: 0px;border-top: double;">
                    <h6 class="text-left" style="margin-top: 15px;display: inline-block;width: 519px;margin-right: 20px;margin-bottom: 10px;">Search/Fetch ID</h6>
                    <input class="form-control" type="text" id="insertID" name="insertID" placeholder="Insert ID" style="width: 155px;display: inline-block;">
                    <button class="btn btn-primary" id="btn-procurar" onclick="onSearch()" type="button" style="width: 450px;margin: 10px 0px 25px 0px;padding: 6px;margin-top: 0px;margin-bottom: 0px;margin-left: 29px;">Search by ID</button>
                    </div>

           </form>
        </div>
    </div>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

1 Ответ

1 голос
/ 25 февраля 2020
  • Вы хотите указать значения «имя», «идентификатор», «адрес», «адрес электронной почты» и «телефон», используя форму HTML.
    • В вашей обновленной общей электронной таблице размещены 5 входных тегов.
  • Вы хотите добиться этого, изменив свой скрипт.

Если мое понимание верно, как насчет этого ответа? Пожалуйста, подумайте об этом как об одном из нескольких возможных ответов.

Точки модификации:

  • В вашем текущем скрипте используются 2 значения, например [formObject.name, formObject.ID].
    • Для этого, пожалуйста, измените до 5 значений, таких как [formObject.name, formObject.ID, formObject.address, formObject.email, formObject.phone].

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

Когда ваш скрипт изменяется, он становится

С: 
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Database");

  var ranges = ws.getRange(4, 2, ws.getLastRow() - 3, 1).createTextFinder(formObject.ID).findAll();
  if (ranges.length > 0) {
    for (var i = 0; i < ranges.length; i++) {
      ranges[i].offset(0, -1, 1, 2).setValues([[formObject.name, formObject.ID]]);
    }
  } else {
    ws.appendRow([formObject.name, formObject.ID]);
  }
}
Кому: 
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1QESrQb4rYhmr0uc7q6ptvmdmMbo0Bxp_hZrvKaobdI8/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Database");

  var ranges = ws.getRange(4, 2, ws.getLastRow() - 3, 1).createTextFinder(formObject.ID).findAll();
  var v = [formObject.name, formObject.ID, formObject.address, formObject.email, formObject.phone];  // Added
  if (ranges.length > 0) {
    for (var i = 0; i < ranges.length; i++) {
      ranges[i].offset(0, -1, 1, v.length).setValues([v]);  // Modified
    }
  } else {
    ws.appendRow(v);  // Modified
  }
}

Примечание:

  • В вашей обновленной общей электронной таблице type="number" используется для тега ввода телефона. В этом случае, например, когда значение равно 01 33 33 33 33 33, возникает ошибка, поскольку 01 33 33 33 33 33 не является числом. Если вы хотите показать 01 33 33 33 33 33, измените на type="string".
...