Google Sheets App Script Html onload not working - javascript

I'm using google sheets and I'm creating a document that will pull through employees that are out of the office. I have a menu option to remove employee data, and it opens the sidebar where I have an HTML form (Image of my project). I'm trying to have it generate a dropdown list of current employees on the list.
I've developed the code to pull through the data I need:
function removeAnyone() {
var html = HtmlService.createHtmlOutputFromFile('RemoveAnyone');
SpreadsheetApp.getUi()
.showSidebar(html);
}
function getList() {
var headerRows = 1;
var sheet = SpreadsheetApp.getActive().getSheetByName("Data");
var range = sheet.getRange(headerRows + 1, 1, sheet.getMaxRows() - headerRows, 1);
var arrayValues = range.getValues();
return arrayValues;
}
Now we move over to my html, where I am simply trying to load the dropdown list using a for loop in the header:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function addOption_list() {
document.getElementById("output").innerHTML = "test";
var options = google.script.run.getList();
for (var i = 0; i < options.length; ++i;) {
var optn = document.createElement("OPTION");
optn.text = options[i];
optn.value = options[i];
document.myForm.selectEmployee.options.add(optn);
}
}
</script>
</head>
<body onload="addOption_list()">
<form id="myForm" onsubmit="submitForm(this)">
<select id="selectEmployee">
<option>Choose an employee</option>
</select>
</form>
<div id="output"></div>
</body>
</html>
I threw a div in the body and have the function changing the value to "test" at the start, this was just to check and see if the function was even being called, which it doesn't seem like it is.
I also tried using window.onload (as shown below), but that didn't get me anywhere either.:
window.onload = function {
document.getElementById("output").innerHTML = "test";
var options = google.script.run.getList();
for (var i = 0; i < options.length; ++i;) {
var optn = document.createElement("OPTION");
optn.text = options[i];
optn.value = options[i];
document.myForm.selectEmployee.options.add(optn);
}
}
Any guidance you can give me would be really appreciated!

google.script.run doesn't return values. When you want to return values from GAS, please use withSuccessHandler. And the data retrieved by getValues() is 2 dimensional array. So how about this modification?
Modified script :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
window.onload = function() {
google.script.run.withSuccessHandler(addOption_list).getList();
}
function addOption_list(options) {
document.getElementById("output").innerHTML = "test";
var select = document.getElementById('selectEmployee');
for ( var i in options) {
var optn = document.createElement('option');
optn.value = options[i][0];
optn.text = options[i][0];
select.appendChild(optn);
}
}
</script>
</head>
<body>
<form id="myForm" onsubmit="submitForm(this)">
<select id="selectEmployee">
<option>Choose an employee</option>
</select>
</form>
<div id="output"></div>
</body>
</html>
Reference :
google.script.run
getValues()
If I misunderstand your question, I'm sorry.

Related

How Add the Link in the Dropdown options?

Hi I'm working on script that I got in this forum.
Options are mentioned in the column A and Links are added in Column B, in the dropdown If I click the option 1 I want to open the respective link which is in Column B in another tab.
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile("Index.html")
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getSelectOptions()
{
var ss=SpreadsheetApp.getActive();
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;
}
function showSidebar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('Index');
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'The Drop Down with No Options now has options.');
}
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();
});
function updateSelect(vA)
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
console.log("My code");
</script>
</head>
<body>
<select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;">
</select>
</body>
</html>
I couldn't figure it out how to embed the link into option. should another function defined for individual column or can it be done in single function?
Note: I'm not a coder.
You can use the onChange event to open the link when a user chooses an option
For this:
Use the syntax new Option(text, value). To pass the option and the link as the text and the value, you need to access the respective nested array elements:
select.options[i] = new Option(vA[i][0],vA[i][1]);
Use the method window.open() to open the link
Build an event handler function that accesses the selected value onChange with document.getElementById("sel1").value
Sample:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();
});
function updateSelect(vA)
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i][0],vA[i][1]);
}
}
console.log("My code");
function myFunction(){
var value = document.getElementById("sel1").value;
window.open(value, '_blank');
}
</script>
</head>
<body>
<select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;" onchange="myFunction()">
</select>
</body>
</html>

How to obtain values of dynamically created select dropdowns in php

I am trying to obtain the values of dynamically created select dropdowns from my php page. The dropdowns were added via javascript to the page.
The error that I get is Notice: Undefined index: daySelect in C:\wamp\www\responsive2\select.php on line 7
I would like to know how to access posted select dropdowns values with php.
Thanks in advance.
Code follows
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
echo "We have something";
echo ($_POST['daySelect']); // error here
}
else
{
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamic Select</title>
</head>
<body>
<form id="theform" style="display: none" method="POST" name="theform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div id="placeHere"></div>
<button type="submit">Submit</button>
</form>
<button onclick="createSelect()">Create</button>
<script>
var elem = document.getElementById('placeHere');
var daySelect = new Array();
var theForm = document.getElementById('theform');
var numSelects = 0;
var days = ['01','02','03','04','05','06','07','08','09','10',
'11','12','13','14','15','16','17','18','19','20',
'21','22','23','24','25','26','27','28','29','30',
'31'];
function createSelect()
{
numSelects++;
daySelect.push(document.createElement('select'));
daySelect[daySelect.length -1].setAttribute('id',
daySelect[daySelect.length -1]);
daySelect[daySelect.length -1].name = daySelect[daySelect.length -1];
var opt = document.createElement('option');
opt.text = "Select";
opt.value = "";
//myArray[myArray.length - 1];
daySelect[daySelect.length -1].appendChild(opt);
for (var i = 0; i < 31; i++)
{
var opt = document.createElement("option");
opt.text = days[i];
opt.value = days[i];
//opt.className = i;
//optarr.push(opt[i]);
daySelect[daySelect.length -1].appendChild(opt);
}
elem.appendChild(daySelect[daySelect.length -1]);
theForm.style.display = "block";
//alert("HI");
}
</script>
</body>
</html>
<?php
}
?>
You need to set your select "name" and "id" to a string name. Right now you are setting those 2 attributes to the daySelect object value, which is getting interpreted as a string, so you have:
<select id="[object HTMLSelectElement]" name="[object HTMLSelectElement]">
Update the the .setAttribute and .name lines to:
daySelect[daySelect.length - 1].setAttribute('id',
'daySelect' + (daySelect.length - 1));
daySelect[daySelect.length - 1].name = 'daySelect[]';
The name is set to an array because of the [], so you could just loop through $_POST['daySelect'], with PHP, using a foreach.
Change the echo to print_r to view array values in the browser.
Hope that helps.

How to create dropdown list from a json array in a function in HTML with javascript?

There are about fifty entries, I know I should also have some iterator so that I can keep pulling task after task and autofilling the dropdown list. I'm having trouble even thinking about how to start it, i was talking to someone about dynamically populating, I'm not sure how to start in my scenario.
function table_generate_from_json(array,table_id){
table_html=""
function create_table_row(item,index){
$("td[field='task_name']").html(html_link_from_todoist_task_dictionary(item))
$("td[field='task_priority']").html(item.type)
$("td[field='task_due_date']").html(moment(item.due_date_utc).fromNow())
$("td[field='task_created_date']").html(moment(item.date_added).fromNow())
$("tr").attr('id',item.id)
table_html=table_html+$(table_id).html()
}
array.forEach(create_table_row)
$(table_id).html(table_html)
}
//todoist_table_list
function todoist_task_list_generate(array){
table_generate_from_json(array,'#todoist_table_list_tbody')
}
Use this as sample
var json_a=[
{
user:"user1hp",pass:"pass1"
},
{
user:"rexuser2",pass:"pass2"
}
,
{
user:"rexuser3",pass:"pass3"
}
];
let l=0;
l=json_a.length;
let i=0;
let select=document.getElementById("sel");
for(i=0;i<l;i++)
{
var opt = document.createElement('option');
opt.value = json_a[i].user;
opt.innerHTML = json_a[i].user;
select.appendChild(opt);
}
<!DOCTYPE html>
<html>
<head>
<title>JSON ARRAY LIST</title>
</head>
<body>
<select id="sel">
</select>
</body>
</html>

Creating dynamic form using javascript

I am trying to create forms dynamically using javascript, but I struggled with creating radio buttons in the form properly. The problem is I can't display a label beside each radio button
here is the index.html file
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<form id="myform">
</form>
<script type="text/javascript" src="custom.js"></script>
</body>
</html>
and the custom.js file
document.body.onload = newElement;
function newElement() {
var form = document.getElementById("myform");
var questions = {
name : "q1",
qType : "radio",
qLabel : "Is your system is automated online advising?",
options : ["Yes", "No"]
}
var label = document.createElement("label");
var lblContent = document.createTextNode(questions["qLabel"]);
label.appendChild(lblContent);
form.appendChild(label);
switch(questions["qType"]) {
case "radio":
var input = [];
var option;
var optionContent;
for(var i = 0; i < questions["options"].length; i++) {
input[i] = document.createElement("input");
input[i].setAttribute("type", questions["qType"]);
input[i].setAttribute("name", questions["name"]);
option = document.createElement("label");
optionContent = document.createTextNode(questions["options"][i]);
option.appendChild(optionContent);
input[i].appendChild(option);
form.appendChild(input[i]);
}
break;
}
}
Replace the last two lines of the for loop with
form.appendChild(input[i]);
form.appendChild(option);

JS Nodes in for loop

I am trying to add many options in a select tag.
My code is:
var years = document.getElementById("years");
for ( var i = 1526; i < 2013; i++) {
var year = document.createElement("option");
var text = document.createTextNode(i);
year.appendChild(text);
year.setAttribute("value", i);
years.appendChild(year);
}
This doesn't work. There is something wrong with the appendChild function. The loop breaks after running once. I tried doing
var years = document.createElementNode("select");
but this also doesn't work. It runs but there is nothing on the webpage. No select tag and no options.
The Body:
<select id="years"></select>
I have used div tag in append child function
<html>
<script>
function loadOptions()
{
var i;
var selectdiv= "";
selectdiv="<select>";
for(i = 1526; i < 2013; i++){
selectdiv+= "<option value='"+i+"'>"+i+"</option>";
}
selectdiv+= "</select>";
var newDiv=document.createElement('div');
newDiv.innerHTML= selectdiv;
document.getElementById('element1').appendChild(newDiv);
}
</script>
<body onload="loadOptions()">
<div id="element1"></div>
</body>
</html>
Hope this will help you

Categories

Resources