Please help me change path of the code so that the drop-down list changes when adding new elements to the array. I’ve been fighting this problem for half a day.Now I have to add manually each time. I tried to find the answer at SO, but all my attempts to change part of the code turned out to be a failure. It seems to me that I still do not understand the logic of HTML Thank you in advance!
js code part:
t.DropdownList = (values); // loading every time before html starts
HTML code part:
<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : grey ; font-family :
arial sans-serif ;font-size : 10pt }
o { color : red ; font-size : 14pt }
r { color : gray ; font-size : 14pt }
</style>
<h1>Передача клиента:</h1> <br>
<h1><?= ClientName ?></h1> <br>
<r>Адрес:</r>
<r><?= ClientAdress ?></r> <br>
<r>Менеджер клиента:</r>
<o><?= Manager ?></o> <br>
<br>
<form id='myForm'>
<label for="managers-choice">Выберите менеджера для передачи клиента:</label>
<input list="managers" id="dropdownlist" name="dropdownlist" />
<input
onclick="google.script.run.Message02(document.getElementById('myForm'));myFuncti on();this.disabled=true" type="button" value="Передать" />
</form>
<datalist id="managers">
<option value =<?=DropdownList[0]?> > // in this place I need help, because if the next load the array is shorter, then I will get an undefined result.
<option value =<?=DropdownList[1]?> >
<option value =<?=DropdownList[2]?> >
<option value =<?=DropdownList[3]?> >
<option value =<?=DropdownList[4]?> >
<option value =<?=DropdownList[5]?> >
</datalist>
<script>
$('#dropdownlist').datepicker({ dateFormat: 'dd.mm.yy' });
function myFunction() {
var b = document.getElementById('result');
b.innerHTML = 'Менеджер выбран.';
document.getElementById('dropdownlist').disabled = 'disabled';
//alert('The output has been modified');
return;
}
</script>
<body>
<div id="result">Вы еще не выбрали менеджера.</div>
</body>
</div>
Here's how I do it:
JavaScript:
$(function(){
google.script.run
.withSuccessHandler(function(rObj){
grObj=rObj;
updateSelect(grObj.mnA);
})
.getRecipeList1();//google apps script function on server
});
function updateSelect(vA,id){
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],i);
}
}
So it always gets the latest list every time the page is loaded.
Related
I am working on some small project using google sheet sidebar. My sidebar already has a dropdown which options are created based on the values of the specified cells in the spreadsheet. I am wondering whether it is even technically possibile to display image in sidebar after selection of the dropdown option. I would like to display image as a preview in sidebar just after I choose option from the dropdown but before I click "Add image to the spreasheet" button. So for example if I select "Banana" in the dropdown, the image of the banana will be displayed in the sidebar, just below dropdown so that before I send it to the spreadsheet by clicking the button I can see what image I will be sending. I know there is an option to display images in selection options of the dropdown, next to the text, but this is not what I am looking for. I am not a programmer so please let me know if I can explain anything better.
I was already trying with some HTML codes found in web but nothing really works. I am not sure whether I should use some conditional statement in HTML code.
This is how the code looks right now.
GS:
function loadform() {
var html = HtmlService
.createTemplateFromFile('ShowThefruit');
html.dynamicdropdown = SpreadsheetApp.getActiveSheet().getRange("A1:A5").getValues();
html = html.evaluate()
.setTitle('Show image of the fruit')
.setWidth(8000);
SpreadsheetApp.getUi().showSidebar(html);
}
HTML
<body bgcolor="#046ED2">
<font face="arial" color="white">
<b>Choose an object.</b><br><br>
<!-- Create input fields to accept values from the user -->
Object:<br>
<select id="Object">
<? for (let i in dynamicdropdown) { ?>
<option value="<?=dynamicdropdown[i]?>"><?=dynamicdropdown[i]?></option>
<? } ?>
</select>
<br>
<br>
<br>
PREVIEW OF THE IMAGE HERE
<br>
<br>
<br>
<button class="bnt btn-primary" id="mainButton" >Add image to the spreasheet</button>
Image will come from URL, so basically I would like to add below code to HTML but with condition of "Banana" value being selected from the dynamic dropdown.
<img src="URL OF BANANA PICTURE" width="50" height="60";>
Will really appreciate any help.
Try
code gs
function onOpen(e) {
SpreadsheetApp.getUi()
.createMenu('⇩ M E N U ⇩')
.addItem('Open ...', 'loadform')
.addToUi();
}
function loadform(){
var ui = SpreadsheetApp.getUi();
var html = HtmlService
.createTemplateFromFile("index")
.evaluate();
html.setTitle("Show image of the ...");
ui.showSidebar(html);
}
function dynamicdropdown() {
return SpreadsheetApp.getActiveSheet().getRange("A1:B5").getValues()
}
code html
<!DOCTYPE html>
<html>
<head></head>
<body bgcolor="#046ED2">
<script>
<?
var data = dynamicdropdown();
?>
</script>
<? var data = dynamicdropdown(); ?>
<form>
<select name="img" onchange="choose(this);" font face="arial" color="white">
<option value="" disabled selected >Selectionner ...</option>
<? for (var i = 0; i < data.length; i++) { ?>
<option value="<?= data[i][1] ?>" ><?= data[i][0] ?></option>
<? } ?>
</select>
</form>
<br/>
<div id="myImg"></div>
<script>
function choose(item) {
document.getElementById("myImg").innerHTML='<img src="'+item.value+'" style="width:290px" >'
};
</script>
</body>
</html>
I'm making a sidebar page for an add-on in Google Sheets.
The user will select a topic from a select menu (drop down), which will then change the inner html of div to display a different help topic.
So far the variable passed along is what gets displayed. I want the contents of the variable to be displayed as html.
I was able to make this work from text links, but they took up too much space in the sidebar, so I went to a select menu.
I made a simpler sample than my actual help sidebar so there would be less code to look at:
<!DOCTYPE html>
<html>
<body>
<p>Select a choice from the list.</p>
<select id="topic" onchange="showContent(this.value)">
<option value="choice1">This one</option>
<option value="choice2">the next one</option>
<option value="choice3">Yet another</option>
</select>
<p>When you select a choice, the output should change based on the value of the variable passed.</p>
<p id="helpContent">Results go here</p>
<script>
//VARS
var choice1 = '<ul><li>This is the first choice<li></ul>';
var choice2 = '<ul><li>This is the second choice<li></ul>';
var choice3 = '<ul><li>This is the, like, third choice<li></ul>';
function showContent(topic) {
document.getElementById("helpContent").innerHTML = topic;
}
</script>
</body>
</html>
Use a data structure to represent your elements, and then create them accordingly
<!DOCTYPE html>
<html>
<body>
<p>Select a choice from the list.</p>
<select id="topic" onchange="showContent(this.value)">
<option value="choice1">This one</option>
<option value="choice2">the next one</option>
<option value="choice3">Yet another</option>
</select>
<p>When you select a choice, the output should change based on the value of the variable passed.</p>
<p id="helpContent">Results go here</p>
<script>
var choices = {
"choice1": {
list: ["item1", "item2", "item3"]
},
"choice2": {
list: ["item1"]
},
"choice3": {
list: ["item3"]
},
}
function showContent(topic) {
var currentChoice = choices[topic];
if (currentChoice == null)
return alert("Invalid choice");
var newList = document.createElement('ul');
for (var i = 0; i < currentChoice.list.length; i++) {
var newListItem = document.createElement('li');
newListItem.innerText = currentChoice.list[i];
newList.appendChild(newListItem);
}
var sidebarContainer = document.getElementById("helpContent");
sidebarContainer.innerHTML = "";
sidebarContainer.appendChild(newList);
}
window.onload = function() {
showContent("choice1");
}
</script>
</body>
</html>
I am doing some uni work and I am stuck on this bit of code. I have to change the background colour of the page using a drop down menu.
Drop down menu code
<form>
Background colour:
<select id= background>
<option value="White"> White </option>
<option value="Green" > Green</option>
<option value="Black"> Black </option>
</select>
if statement
<script>
function myFunction() {
var sel1 = document.getElementId('background')
if(sel1 =="Green"){
document.body.style.backgroundColor = Green
}
}
</script>
Also here is the button that runs the function
<button onclick="myFunction()">Change Background</button>
in your javascript code
"getElementId" function is wrong.
Please try below code
function myFunction() {
var sel1 = document.getElementById('background').value;
document.body.style.backgroundColor = sel1;
}
To point out your mistakes:
The id attribute of your <select> is missing quotes.
The getElementId function should be getElementById.
You need a proper JavaScript function to handle the actual change, which can be triggered by either click of a button or by the change event in the dropdown itself. I have written a snippet using the latter method, but you can fetch the selectElem from inside the function using either document.getElementById('background') or the modern document.querySelector('#background') if you are required to use a button.
If you use a valid CSS value for background-color in the value attributes of your <option>s, you can use that value without complex switch or if statements.
The this bit in our function call refers to the calling HTML element.
function updateBackgroundColour(selectElem) {
var i = selectElem.selectedIndex; // Get the selected option's index.
if (i < 0) {
return; // Nothing is selected.
}
// Set the background-color CSS attribute of the <body> element to
// the value attribute of the selected option in our <select> element.
document.body.style.backgroundColor = selectElem.options[i].value;
}
<form>
Background color:
<!-- Note the onchange attribute. "this" refers to the changing element. -->
<select id="background" onchange="updateBackgroundColour(this)">
<option value="red">Red</option>
<option value="MediumSpringGreen">Medium Spring Green</option>
<option value="#34495e">Wet asphalt</option>
</select>
<form>
function myFunction() {
var sel1 = document.getElementId('background').value;
if(sel1 =="Green"){
document.body.style.backgroundColor = "Green" ;
}
}
And this should be your html
<select id="background" onchange="myFunction() ">
Simply edit a jQuery script to display a GIF when you click on the dropdown and change the value of background image.
I have a form wherein I have to select an item from the drop down menu and display the selected value on the form. The values in the dropdown menu come from the database.
Here is my code of select:
<aui:select id="empName" name="empName" onChange = "showEmpName()">
<%
List<Employee> EmpList = EmployeeLocalServiceUtil.getEmployees(-1,-1);
for(Employee emp : EmpList ) {
%>
<aui:option value='<%=emp.getEmpFname()%>' name = "leaveEmp" onClick = "showEmpName()"><%=emp.getEmpFname()%> <%=emp.getEmpLname()%></aui:option>
<% } %>
Here is the script: the value selected from drop down should be displayed on the form
<script>
function showEmpName()
{
var empName = document.getElementById("empName")
var showEmpName = document.getElementById("showEmpName")
showEmpName.value = empName.value
alert("my name is" + empName)
}
</script>
I have a couple of questions regarding this:
onchange onclick aren't working.
Secondly I want to display the selected item on the form.
How should I approach?
EDIT:
I even tried the following but it doesn't work at all.
<script>
var selectedEmpName = document.getElementById('empName');
var absentEmp = document.getElementById('absentEmp');
selectedEmpName.onchange = function() {
absentEmp.value = selectedEmpName.value;
};
</script>
<aui:select id="empName" name="empName">
<%
List<Employee> EmpList = EmployeeLocalServiceUtil.getEmployees(-1,-1);
for(Employee emp : EmpList ) {
%>
<aui:option value='<%=emp.getEmpFname()%>' name = "leaveEmp"><%=emp.getEmpFname()%> <%=emp.getEmpLname()%></aui:option>
<% } %>
</aui:select>
The above code I am trying to display in a non editable text box.
What I actually want is once the value from drop down is selected it should be displayed as the value of the radio button which already exists. once the value of this radio button is set, it will be used for further processing.
EDITCODE:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
$('#empName').change(function(){
var value = $(this).val();
console.log(value);
$('label').text(value);
});
});
</script>
</head>
<body>
<portlet:actionURL name="markAbsent" var="markAbsentURL" />
<aui:form name="markAbsent" action="<%=markAbsentURL.toString() %>" method="post" >
<aui:select id="empName" name="empName" >
<%
List<Employee> EmpList = EmployeeLocalServiceUtil.getEmployees(-1,-1);
for(Employee emp : EmpList ) {
%>
<aui:option value='<%=emp.getEmpFname()%>'><%=emp.getEmpFname()%> <%=emp.getEmpLname()%></aui:option>
<% } %>
</aui:select>
<label for="empName" id = "labelname"></label>
</aui:form>
Say you have the following html
<select id="mySel">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
<label for="mySel">
</label>
And you use jQuery, then you should be able to listen to selections by
// attach a ready listener to the document
$(document).ready(function(){ // ran when the document is fully loaded
// retrieve the jQuery wrapped dom object identified by the selector '#mySel'
var sel = $('#mySel');
// assign a change listener to it
sel.change(function(){ //inside the listener
// retrieve the value of the object firing the event (referenced by this)
var value = $(this).val();
// print it in the logs
console.log(value); // crashes in IE, if console not open
// make the text of all label elements be the value
$('label').text(value);
}); // close the change listener
}); // close the ready listener
Working example: http://jsbin.com/edamuh/3/edit
Or you could also do it with basic javascript, by putting the following after the generated select & label:
<script type="text/javascript">
var sel = document.getElementById('mySel');
var lbl = document.getElementById('myLbl');
sel.onchange = function(){
lbl.innerHTML = this.options[this.selectedIndex].value;
};
</script>
Working example here: http://jsbin.com/edamuh/7/edit
Note: The latter might not work equally in all browsers.
Eg. Works in Firefox(Windows) but might not in others. Thus I'd suggest opting for using jQuery.
EDIT
In your case the markup should be something like (no onChange):
<aui:select id="empName" name="empName" >
<!-- options -->
</aui:select>
<label id="myUniqueLabelId"></label>
<script type="text/javascript">
$(document).ready(function(){
// assigns a listener to 1 or more select elements that contains empName in their id
$('select[id*=empName]').change(function(){
// when the change event fires, we take the value of the selected element(s)
var value = $(this).val();
// take an element with the exact id of "myUniqueLabelId" and make its text be value
$('#myUniqueLabelId').text(value);
// take the reference to a radio input
var radio = $('#radioId');
// make it enabled
radio.prop('checked', true);
});
});
</script>
Working example with radio buttons:
http://jsbin.com/edamuh/12/edit
It is important to notice, that when the document loads the select must have been already rendered, otherwise the script won't work.
The current HTML SELECT tag works great for me except for one thing. Is it possible to implement toggling on the current item.
If I have a current selection, I'd like to click it again and "de-select" it. It doesn't work that way now, it simply keeps the current selection "selected".
It seems that I need to know the "previous" selection along with the "current" selection and compare the 2 to see if I need to "de-select" everything. How do I get the previous selection, all I know about is "selectedIndex" which is the current selection.
Is there a way?
To accomplish this you might use a little bit of javascript as follows. I have tested and it seems to work as you requested. I am being verbose for readability, but you can clean once you have it working for you.
<script language="JavaScript" type="text/javascript">
function toggleSelectedValue() {
var selObj = document.getElementById('myList');
var selIndex = selObj.selectedIndex;
var selValue = selObj.options[selIndex].value;
var prevSelValue = document.getElementById('trackSelectedValueHiddenField').value;
if (selValue == prevSelValue) {
//Delect "all" items
selObj.selectedIndex = -1;
document.getElementById('trackSelectedValueHiddenField').value = 0;
}
else {setSelectedValue();}
}
function setSelectedValue()
{
var selObj = document.getElementById('myList');
var selIndex = selObj.selectedIndex;
document.getElementById('trackSelectedValueHiddenField').value = selObj.options[selIndex].value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="contentDiv" style="height:686px; border: solid 1px red;">
<select multiple="multiple" id="myList" onclick="toggleSelectedValue()">
<option value="1">Test</option>
<option value="2">Test</option>
<option value="3">Test</option>
</select>
<input type="hidden" id="trackSelectedValueHiddenField" value="0" />
</div>
</div>
</body>
</html>