Передать значения <a>элементов со стороны клиента в функцию на стороне сервера - PullRequest
0 голосов
/ 06 апреля 2019

У меня есть боковая панель с флажками (<input>) и соответствующими именами (<a>).

Я не могу получить значения из тегов <a>.

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

Я написал этот код и зарегистрировал данные (записал параметры имени в самом начале бэкэнд-функции), и сначала в журнале были правильные имена.

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

Что не так с моим кодом?

//get button by id, on click run function
document.getElementById("btn").addEventListener("click", requestCheckedCalendars)

Функции на стороне клиента:

//getting checked checkboxes and names
function getCheckedNames() {

  //getting all checkboxes
  var allCheckboxes = Array.from(document.getElementsByClassName("filled-in"));

  //getting all <a> tag elements as a native Array.
  var names = Array.from(document.getElementsByTagName("a"));
  
  var namesArr = []

  for (var i = 1; i < allCheckboxes.length; i++) {
  
      //checked/unchecked property of a checkbox
      var check = allCheckboxes[i].checked
      
      //if checked
      if (check === true) {
      
      //shift to get corresponding names  
      var j = i + 1
     
      //getting a name value
      var name = names[j].firstChild.nodeValue;
      
      //pushing a name to the array
      namesArr.push(name)  
      }
      }
  
  return namesArr
  }


//getting calendars for chosen names from backend
function requestCheckedCalendars() {

  var chosenNames = getCheckedNames();

  // Submit these names to the backend, to receive their calendar events.
  google.script.run
    .withUserObject(chosenNames)
    .withSuccessHandler(requestCalendarEvents)
    .loopToGetCals(JSON.stringify(chosenNames))
 }

HTML-шаблон - я создал <a> элементов, содержащих имена, пока зацикливался свойства скрипта:

                 //creating a new <a> tag
                 var newATag = document.createElement("a") 
                 
                 //set a class to a new tag
                 newATag.setAttribute("class", "collection-item");
                 
                 // add the URL attribute
                 newATag.setAttribute("href", "https://www.blah.com");
                 
                  //setting unique IDs
                 newATag.setAttribute("id", "a" + i);
                 
                 // Add names to it
                 var newText = document.createTextNode(name);
                 
                 //append the text with names to the tag
                 newATag.appendChild(newText);
                 
                 //add item to the mother collection element
                 collection.appendChild(newATag);

Элемент коллекции (куда я положил мои <a> элементы) с сайта MaterialixeCss:

 <div class="collection" id = "coll"> 
 </div>   

  //collection element from Materializecss site
   var collection = document.getElementById("coll")

1 Ответ

0 голосов
/ 07 апреля 2019

Получение значений из флажков

HTML фрагмент:

   <br /><input type="checkbox" id="chk1" name="Checks" value="1" /><label for="chk1">One</label>
   <br /><input type="checkbox" id="chk2" name="Checks" value="2" /><label for="chk2">Two</label>
   <br /><input type="checkbox" id="chk3" name="Checks" value="3" /><label for="chk3">Three</label>
   <br /><input type="button" id="chkbtn" value="SaveChecks" onClick="saveChecks();" />

JavaScript:

function saveChecks() {
    var chA=document.querySelectorAll('input[type="checkbox"][name="Checks"]:checked');
    var cbA=[];
    console.log('Checkboxes: %s',JSON.stringify(chA));
    for(var i=0;i<chA.length;i++) {
      console.log('id: %s name: %s value: %s',chA[i].id,chA[i].name,chA[i].value);
      cbA.push({id:chA[i].id,name:chA[i].name,value:chA[i].value});
    }
    google.script.run.displayCheckBoxes(cbA);
  }

Некоторые Google Script для отображения значений:

function displayCheckBoxes(chA) {
  var ss=SpreadsheetApp.getActive();
  var html='';
  for(var i=0;i<chA.length;i++) {
    html+=Utilities.formatString('<br />id: %s name: %s value: %s', chA[i].id,chA[i].name,chA[i].value);
  }
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Checked Boxes');
}

Предоставленный HTML:

enter image description here

Отображаемое диалоговое окно:

enter image description here

Значения из якорей

function getAnchors() {
      var aA=document.getElementsByTagName("a");
      for(var i=0;i<aA.length;i++) {
        //for(key in aA[i]){console.log('key: %s value: %s',key,aA[i][key]);} //display all possible values
        console.log('href: %s text: %s',aA[i].href, aA[i].text);
      }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...