I am trying to change the value of a specific cell in Google Sheets based on a users selection from a dropdown menu. Also, might be worth mentioning that this dropdown menu is inside an HTML table generated from Sheets data. Everything works except for this one little thing. Help would be greatly appreciated!
HTML Snippet:
<select id="status" name="status">
<option value="current" id="current"><?= tableData[i][j] ?></option>
<option value="submitted" id="submitted">Submitted</option>
</select>
<script>
let select = document.querySelector('#status');
select.addEventListener('change', update(i, j));
</script>
Code.gs function:
var rfi= SpreadsheetApp.openById("REDACTED");
var sheet = rfi.getSheetByName('Sheet1');
function update(i, j) {
sheet.getRange(i, j).setValue("In Review");
}
If you want to pass coordinates, try
in html
<option value="<?=(i+1)+'|'+(j+1)?>" id="current"><?= tableData[i][j] ?></option>
in gs
function update(coord) {
sheet.getRange(coord.split('|')[0], coord.split('|')[1]).setValue("In Review");
}
will be finalized after your spreadsheet is published
sample
For instance, this works and shows how to transfer coordinates
html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
<? var data = listOfItems(); ?>
</script>
<select id="choice" name="choice">
<option value="" disabled selected >Choose ...</option>
<? for (var i = 0; i < data.length; i++) { ?>
<? for (var j = 0; j < data[0].length; j++) { ?>
<option value="<?=(i+1)+'|'+(j+1)?>" ><?=data[i][j]?></option>
<? } ?>
<? } ?>
</select>
<script>
$('#choice').change(function(){
google.script.run.update ($(this).val());
});
</script>
</body>
gs
function load() {
var ui = HtmlService.createTemplateFromFile('load')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle("test ...");
SpreadsheetApp.getUi().showSidebar(ui);
}
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('mySheet')
function listOfItems() {
return sheet.getDataRange().getValues()
};
function update(coord){
sheet.getRange(coord.split('|')[0], coord.split('|')[1]).setValue("In Review");
}
Related
I'm not usually working with web, so not very familiar with JS/HTML tricks.
I'm trying to create a Google spreadsheet with a sidebar.
The sidebar has 2 combo boxes and a button, and I expect that when the button is clicked the relevant cell in the spreadsheet will be populated with data based on the combo box selection.
Here is what I have so far:
<html>
<head>
<base target="_top">
</head>
<body>
<script>
function update(){
val qEl = document.getElementById("quarter");
val q = qEl.options[qEl.selectedIndex].value;
val lEl = document.getElementById("l2");
val l = qEl.options[lEl.selectedIndex].value;
google.script.run.update(q, l);
}
</script>
Select
<select id="l2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br/>
Select
<select id="quarter">
<option value="C6:N6">Q1</option>
<option value="O6:Z6">Q2</option>
<option value="AA6:AL6">Q3</option>
<option value="AM6:AX6">Q4</option>
</select>
</br>
<input type="button" value="Add" onclick="update()"/>
</body>
</html>
Then the Google script code:
function update() {
var spreadsheet = SpreadsheetApp.getActive();
var sheet = spreadsheet.getActiveSheet();
var html = HtmlService.createHtmlOutputFromFile('AddLarge')
.setTitle('Add large item')
.setWidth(300);
SpreadsheetApp.getUi().showSidebar(html);
}
function updateLarge(cell, value) {
SpreadsheetApp.getActive().getActiveSheet().getRange(cell).setValue(value);
}
This is not working.... :\
How about the following modifications?
Modification points :
In order to declare a variable, it uses var at GAS. I think that this might be a typo.
For var l = qEl.options[lEl.selectedIndex].value;, qEl is used. So a value selected at "quarter" is retrieved. I think that var l = document.getElementById("l2").value; can be also used.
In the case of google.script.run.update(q, l);, q, l is sent to update() of GAS script. In your case, I think that q, l should be sent to updateLarge(cell, value).
When these are reflected to your script, your script becomes below. Please do this modification to javascript in HTML. I think that your GAS script works fine.
From :
<script>
function update(){
val qEl = document.getElementById("quarter");
val q = qEl.options[qEl.selectedIndex].value;
val lEl = document.getElementById("l2");
val l = qEl.options[lEl.selectedIndex].value;
google.script.run.update(q, l);
}
</script>
To :
<script>
function update() {
var qEl = document.getElementById("quarter");
var q = qEl.options[qEl.selectedIndex].value;
var lEl = document.getElementById("l2");
var l = lEl.options[lEl.selectedIndex].value;
google.script.run.updateLarge(q, l);
}
</script>
If I misunderstand your question, I'm sorry.
HTML
<form method="post" name="f1" action='dd-check.php'>
<select class="text" id="course_id" name='course_id' onChange="reload(this.form)">
<option value=''>Select one</option>
<option value=''><?php ?></option>
</select>
<select name="batch_id" id="batch_id">
<option value=''>Select one</option>
<option value=''><?php ?></option>
</select>
</form>
Javascript
<script type="text/javascript">
function reload(form)
{
var val = form.course_id.options[form.course_id.options.selectedIndex].value;
self.location='dd.php?course_id=' + val ;
}
</script>
In here the function reload the form. I want to reload only the first select box data, how to do that?
onchange() event depends on its element, thus reload() does not adjust the second select element "batch_id"
Additionally, before changing the location, add parameter selected index of two option elements.
var s1 = document.getElementById("course_id");
var o1 = s1.options.selectedIndex;
var s2 = document.getElementById("batch_id");
var o2 = s2.options.selectedIndex;
And then, in onload function you restore the option values selected before.
var s1 = document.getElementById("course_id");
s1.options.selectedIndex = o1;
var s2 = document.getElementById("batch_id");
s2.options.selectedIndex = o2;
I have the following HTML code that allows me to select two items from select dropdown options;
Now, after selecting the two items, say, I select accommodation as my form and Kampala as my district, I want the total number of available possible results, for example, "25 results were found", to be automatically displayed.
The problem I have is that only the results for one selection are displayed with the other being shown as undefined notice. Any assistance please.
<!-- here is the html script for selecting options -->
<form id="analysis_formId" method="POST">
<label>select form</label>
<select id="selectformId" name="selectform" class="select_elements">
<option value="afc">accommodation form</option>
<option value="rtt">tour and travel form</option>
</select>
<label>select district</label>
<select id="selectdistrictsId" name="selectdistricts" class="select_elements">
<option value="alldistricts">All districts</option>
<option value="kampala">kampala</option>
<option value="wakiso">wakiso</option>
</select>
</form>
<!-- displaying results from count.php -->
<p><span id="inspection_result"></span></p>
This the script that gets the class names of the select elements and runs the onChange event.
<script>
var selections = document.getElementsByClassName("select_elements");
function onchangefunction(){
var selectedstring = (this.options[this.selectedIndex].value);
$("#inspection_result").html('checking...');
$.ajax({
type:'POST',
url:'count.php',
data:$(this).serialize(),
success:function(data)
{
$("#inspection_result").html(data);
}
});
}
for (var i = 0, l = selections.length; i < l; i++) {
selections[i].onchange = onchangefunction;
}
</script>
Here is count.php for querying the results from MySQL
if($_POST)
{
$formtype = strip_tags($_POST['selectform']);
$selectdistricts = strip_tags($_POST['selectdistricts']);
$fetchallforms22 = $conn->prepare("select count(indexId) as numafcrtt2
from registered_companies where company_form_type=:formtype and company_district=:selectdistricts");
$fetchallforms22->execute(array(':formtype'=>$formtype, ':selectdistricts'=>$selectdistricts));
$display22 = $fetchallforms22->fetchObject();
if($display22){
echo $display22->numafcrtt2." "."results available";
}
else
{
echo $display22->numafcrtt2." "."results available";
}
}//POST
Maybe no results for this query, chech it:
if (!empty(display2) ){
..... // DO something
}
This is my main page where I select a option field.
opt1.php:
<html>
<div>
<select id="mn" onchange = "show(this.id)" >
<option value="3">hello</option>
<option value="4">hiii</option>
<option value="5">byee</option>
</select>
</div>
<?php include 'OPT2.php'?>
</html>
This is my javascript where I get the value from above select and pass to opt2.php
function show(s1){
var s1 = document.getElementById(s1);
var ch = s1.value;
$.post('OPT2.php', {variable: ch});
}
This is my opt2.php page to display the sub select.
<?php
$con = #$_POST['ch'];
echo "SELECT MODEL:<select id=sb name=sb >";
echo "<option name=$con>$con</option>";
echo "</select>";
?>
Actually this is not generating the intended result.
Is there any logical or processing mistake?
you need to make ajax call to opt2.php to get that data
so your opt1.php should look like
<html>
<div>
<select id="s1" onchange = "show(this.id)" >
<option value="3">hello</option>
<option value="4">hiii</option>
<option value="5">byee</option>
</select>
<select id="s2">
<option>--</option>
</select>
</div>
<?php include 'OPT2.php'?>
</html>
and your javascript
<script type="text/javascript">
$("#s1").change(function(){
$('#s2').find('option').remove().end(); //clear the city ddl
var block_no = $(this).find("option:selected").text();
var s1 = document.getElementById(s1);
var ch = s1.value;
//do the ajax call
$.ajax({
url:'OPT2.php',
type:'GET',
data:{variable:s1},
dataType:'json',
cache:false,
success:function(data)
{
//data=JSON.parse(data); //no need if dataType is set to json
var ddl = document.getElementById('s2');
for(var c=0;c<data.length;c++)
{
var option = document.createElement('option');
option.value = data[c];
option.text = data[c];
ddl.appendChild(option);
}
},
error:function(jxhr){
alert("Pls Reload the page");
}
});
});
I'm trying to modify several selectboxes using the following code in a custom.js file. Each ID is in different pages and the code that I'm using in footer.php is the following:
<script>
var selectFunction = function() {
document.getElementById('ofae').options[0].text = 'Artists';
};
var selectFunctionn = function() {
document.getElementById('ofav').options[0].text = 'Artists';
};
</script>
Then:
<?php
// without if statement
echo '<script type="text/javascript"> $(function(){ selectFunction();selectFunctionn(); }); </script>';
?>
The problem is that only one of them get executed, when I'm in page 2 and the first value is NULL it doesn't execute the rest of the code.
A test file test.php with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test php echo script</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<select id="ofav">
<option value="">o1</option>
<option value="">o2</option>
<option value="">o3</option>
<option value="">o4</option>
<option value="">o5</option>
</select>
<select id="ofae">
<option value="">o1</option>
<option value="">o2</option>
<option value="">o3</option>
<option value="">o4</option>
<option value="">o5</option>
</select>
<script>
var selectFunction = function() {
document.getElementById('ofav').options[0].text = 'Artists';
document.getElementById('ofae').options[0].text = 'Artists';
}
</script>
<?php
// without if statement
echo '<script type="text/javascript"> $(function(){ selectFunction(); }); </script>';
?>
</body>
</html>
works fine!
Check:
if there are no typing errors
if PHP if statement is correct
if there are two <select> blocks
...
modify your function like this and it will work
var selectFunction = function() {
if(document.getElementById('ofae') != null){
document.getElementById('ofae').options[0].text = 'Artists';
}
else if(document.getElementById('ofav') != null){
document.getElementById('ofav').options[0].text = 'Artists';
}
};
I hope this will solve your problem