i am trying to show the price of each item on the price input, i am not able to make the function work. i am not sure how to write the string on or if i am even doing the function correctly. can you please help me? thanks!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Price Calculation</title>
</head>
<body>
<Label>Choose Item</Label>
<select onChange=".......">
<option>Tomatoes</option>
<option>Lettuce</option>
<option>Potato</option>
<option>Carrots</option>
<option>Artichoke</option>
</select>
<br/>
<Label>Price</Label>
<input type="text" id="price" />
<br/>
<script type="text/javascript">
var veggy = new Array ()
veggy ["Tomatoes"] = 5.99
veggy ["Lettuce"] = 7.66
veggy ["Potato"] = 4.52
veggy ["Carrots"] = 2.13
veggy ["Artichoke"] = 10.58
function ()
{
var veggy = document.getElementById("price")
}
</script>
</body>
</html>
A couple things to change here:
You'd want an object with each choice as a key, and each price as a value - not an array
Call your function onchange and pass in the select element via this
//Make veggy an object
var veggy = {};
veggy["Tomatoes"] = 5.99;
veggy["Lettuce"] = 7.66;
veggy["Potato"] = 4.52;
veggy["Carrots"] = 2.13;
veggy["Artichoke"] = 10.58;
Change your select onChange:
<select onChange="getPrice(this);">
And your function:
function getPrice(select) {
document.getElementById("price").value = veggy[select.value];
}
Related
var imie = document.getElementById("imim");
function wypisz_imie() {
document.getElementById("powitanie").innerHTML = "Czesc!" + imie;
}
<!DOCTYPE>
<html>
<head>
<title>My city v1.0</title>
</head>
<body>
<script type="text/javascript" src="skrypt.js"></script>
<h2>Wpisz jak masz na imie</h2>
<input type="text" id="imim" value="" />
<input type="submit" id="potwim" value="potwierdz" onclick="wypisz_imie()" />
<h1 id="powitanie"></h1>
</body>
</html>
Sorry for my English cause i'm from Poland and i'm new user. I'll be thankfull for answers!
You can use document.getElementById("imim").value to get the text in the text field. It's up to you what to do from there!
imie will return the input element so you should use value property like this:
var imie = document.getElementById("imim");
function wypisz_imie()
{
document.getElementById("powitanie").innerHTML = "Czesc!" + imie.value;
}
imie.value will return the value of input.
check w3s.
but every time the value will return "", to solve this problem you should access input every time call function to return input with new value like this:
function wypisz_imie()
{
var imie = document.getElementById("imim");
document.getElementById("powitanie").innerHTML = "Czesc!" + imie.value;
}
I'm working on an interface on Google Sheet with JS & Google App Script.
The purpose is to click on a button, fill a html form (with an inputbox, a dropdown and a dropdown with multiple choices) which appears at the side, add the data in the sheet and write it in an alert box.
I began with this code which works perfectly.
AddFood.gs
// File used
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Sheet used
var sheet = ss.getActiveSheet();
/*
* Main function. Associated to the button
*/
function addFood() {
showFormInSideBarAddFood();
}
/*
* Show a form in a side bar for adding food
*/
function showFormInSideBarAddFood() {
var form = HtmlService.createTemplateFromFile('IndexAddFood').evaluate().setTitle("Add Food");
SpreadsheetApp.getUi().showSidebar(form);
}
function processFormAddFood(formObject) {
sheet.appendRow([
formObject.veggie
]);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
FormAddFood.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- form -->
<form id="addFoodForm" onsubmit="handleFormSubmitAddFood(this)">
<label for="veggie">Veggie</label><br/>
<input type="text" id="veggie" name="veggie"><br/><br/>
<button type="submit">Submit</button>
</form>
</body>
</html>
JavaScriptAddFood.html
<!-- JavaScriptAddFood.html -->
<script>
/*
* The window will not close when the form is summited
*/
function preventFormSubmitAddFood() {
var formsAddFood = document.querySelectorAll('FormAddFood');
for (var i; i < formsAddFood.length; i++) {
formsAddFood[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
// The page is not refreshed when the button submit is pressed
window.addEventListener('load', preventFormSubmit);
/*
* Calls the form
*/
function handleFormSubmitAddFood(formObject) {
google.script.run.processFormAddFood(formObject);
document.getElementById("addFoodForm").reset();
}
</script>
IndexAddFood.html
<!-- IndexAddFood.html -->
<!-- Links the JavaScript file and the HTML forms -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Add Fruit</title>
<?!= include('JavaScriptAddFood'); ?>
</head>
<body>
<?!= include('FormAddFood'); ?>
</body>
</html>
At this point, I can add the inputbox value in the sheet.
(Don't forget to assign the "addFood" function to a button for tests)
After that, I spent some hours trying to resolve these two issues, following different tutorials :
Add in the same row the fruit and cake dropdown values (Get the dropdown values and add them to the row)
Get the values and display them in an alert box
(Get the html value for displaying it in an alert)
Here's my modified code (which doesn't work):
AddFood.gs
// File used
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Sheet used
var sheet = ss.getActiveSheet();
/*
* Main function. Associated to the button
*/
function addFood() {
showFormInSideBarAddFood();
}
/*
* Show a form in a side bar for adding food
*/
function showFormInSideBarAddFood() {
var form = HtmlService.createTemplateFromFile('IndexAddFood').evaluate().setTitle("Add Food");
SpreadsheetApp.getUi().showSidebar(form);
}
function processFormAddFood(formObject) {
sheet.appendRow([
formObject.veggie,
// Add the dropdown values
selectedFruit,
selectedCake
]);
SpreadsheetApp.getUi().alert(formObject.veggie + ' ' + selectedFruit + ' ' + selectedCake + "added");
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
// Get the value for the alert
function doGet() {
return HtmlService.createHtmlOutputFromFile('FormFood');
}
function getSelectDatas(form) {
var nameBox = form.fruit;
SpreadSheetApp.getUi().alert(nameBox);
}
FormAddFood
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- form -->
<form id="addFoodForm" onsubmit="handleFormSubmitAddFood(this)">
<label for="veggie">Veggie</label><br/>
<input type="text" id="veggie" name="veggie"><br/><br/>
<label for="fruit">Fruit</label><br/>
<select name="fruit" id="fruit" value="" onChange="document.getElementById('addFoodForm').submit()">
<option value="Apple"> Apple </option><br/>
<option value="Pear"> Pear </option><br/>
<option value="Banana"> Banana </option><br/>
</select><br/><br/>
<label for="cake">Cake</label><br/>
<select multiple name="cake" id="cake" value="" onChange="document.getElementById('addFoodForm').submit()">
<option value="crumble"> Crumble </option><br/>
<option value="brownie"> Brownie </option><br/>
<option value="cheeseCake"> Cheese Cake </option><br/>
</select><br/><br/>
<button type="button" value="Submit" onClick="formSubmit()">Submit</button>
</form>
<script>
/**
* Allows to select multiple option in a select form without ctrl + click
*/
var multiSelect = {};
function init() {
var s = document.getElementsByTagName('select');
for (var i = 0; i < s.length; i++) {
if (s[i].multiple) {
var n = s[i].name;
multiSelect[n] = [];
for (var j = 0; j < s[i].options.length; j++) {
multiSelect[n][j] = s[i].options[j].selected;
}
s[i].onchange = changeMultiSelect;
}
}
}
function changeMultiSelect() {
var n = this.name;
for (var i=0; i < this.options.length; i++) {
if (this.options[i].selected) {
multiSelect[n][i] = !multiSelect[n][i];
}
this.options[i].selected = multiSelect[n][i];
}
}
window.onload = init;
</script>
</body>
</html>
JavaScriptAddFood.html
<!-- JavaScriptAddFood.html -->
<script>
/*
* The window will not close when the form is summited
*/
function preventFormSubmitAddFood() {
var formsAddFood = document.querySelectorAll('FormAddFood');
for (var i; i < formsAddFood.length; i++) {
formsAddFood[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
// The page is not refreshed when the button submit is pressed
window.addEventListener('load', preventFormSubmit);
/*
* Calls the form
*/
function handleFormSubmitAddFood(formObject) {
google.script.run.processFormAddFood(formObject);
document.getElementById("addFoodForm").reset();
}
function formSubmit() {
var fruitDropdown = document.getElementById("fruit");
var selectedFruit = e.value;
var cakeDropdown = document.getElementById("fruit");
var selectedCake = e.value;
google.script.run.getSelectDatas(document.forms[0]);
}
</script>
No changes in the file IndexAddFood.html
How could I do to resolve these issues ?
I hope I made myself clear.
Solution
Problem 1
In the processFormAddFood, add the values to the input array that uses appendRow. Use concat to join the first two elements (veggie and fruit) to the possible array (cake).
var rowValues = [formObject.veggie, formObject.fruit].concat(formObject.cake)
sheet.appendRow(rowValues);
Modify the form of FormAddFood.html in the following way:
<!-- form -->
<form id="addFoodForm" onsubmit="handleFormSubmitAddFood(this)">
<label for="veggie">Veggie</label><br/>
<input type="text" id="veggie" name="veggie"><br/><br/>
<label for="fruit">Fruit</label><br/>
<select name="fruit" id="fruit">
<option value="Apple"> Apple </option><br/>
<option value="Pear"> Pear </option><br/>
<option value="Banana"> Banana </option><br/>
</select><br/><br/>
<label for="cake">Cake</label><br/>
<select multiple name="cake" id="cake">
<option value="crumble"> Crumble </option><br/>
<option value="brownie"> Brownie </option><br/>
<option value="cheeseCake"> Cheese Cake </option><br/>
</select><br/><br/>
<button type="submit">Submit</button>
</form>
Problem 2
Check how to display Alert dialogs. Add the following code at the end of processFormAddFood.
var ui = SpreadsheetApp.getUi(); // Same variations.
var result = ui.alert(
'Values entered:',
rowValues.join(', '),
ui.ButtonSet.OK);
I need to publish individuals' exam results from a google sheet. I have found some code and created another HTML page which now gives me the required result properly if I click the SHOW link. The app script is :
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1L1Qu6QCaDucr4Jy5eOAnQkX-wpYjz6eevqAMzBc72iQ/edit#gid=0");
var sheet = ss.getSheetByName("Sheet1");
function doGet(e){
return search(e) ;
}
function doPost(e){
return search(e) ;
}
function search(e) {
var id = e.parameter.id;
var values = sheet
.getDataRange()
.getValues()
.filter(function(row) {
return row[0] == id;
});
var content = JSON.stringify(values);
return ContentService.createTextOutput(content).setMimeType(
ContentService.MimeType.TEXT
);
}
and the HTML is :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="txtName"/>
SHOW
</body>
</html>
It gives the result in an array like [[ROLL, "Name", MARKS1, MARKS2, MARKS3...]]. Now I need to use these values at an HTML page like
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>INSTITUTE NAME</h1>
Name <input type="text" id="name"/><br>
Roll <input type="text" id="roll"/><br>
Subject 1 <input type="text" id="sub1"/><br>
Subject 2 <input type="text" id="sub2"/><br>
Subject 3 <input type="text" id="sub3"/><br>
Subject 4 <input type="text" id="sub4"/><br>
Subject 5 <input type="text" id="sub5"/><br>
</body>
</html>
I mean like
What should I do?
You don't need two HTML, you can do the entire process with one HTML using google.script.run [1] to communicate your code.gs with the Index.html, and update it with the data from the spreadsheet.
Just create an Index.html file with this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="txtName"/>
<button id="show">SHOW</button>
<h1>INSTITUTE NAME</h1>
Name <input type="text" id="name"/><br>
Roll <input type="text" id="roll"/><br>
Subject 1 <input type="text" id="sub1"/><br>
Subject 2 <input type="text" id="sub2"/><br>
Subject 3 <input type="text" id="sub3"/><br>
Subject 4 <input type="text" id="sub4"/><br>
Subject 5 <input type="text" id="sub5"/><br>
</body>
<script>
//When click on show button it will run search function
window.onload = function(e){
document.getElementById('show')
.addEventListener('click', search);
}
//Get the value for txtName input and run search function in code.gs
function search() {
var txtName = document.getElementById('txtName').value;
google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}
//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
document.getElementById('name').value = values[1];
document.getElementById('roll').value = values[0];
document.getElementById('sub1').value = values[2];
document.getElementById('sub2').value = values[3];
document.getElementById('sub3').value = values[4];
document.getElementById('sub4').value = values[5];
document.getElementById('sub5').value = values[6];
}
</script>
</html>
code.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('Index');
}
//Search for the id and return the array for that row
function search(id) {
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1L1Qu6QCaDucr4Jy5eOAnQkX-wpYjz6eevqAMzBc72iQ/edit#gid=0");
var sheet = ss.getSheetByName("Sheet1");
var values = sheet
.getDataRange()
.getValues()
.filter(function(row) {
return row[0] == id;
});
return values[0];
}
Deploy the application and you can access to it with the URL.
[1] https://developers.google.com/apps-script/guides/html/communication
I am assuming that the results array is like the one you told. I think the best way to handle these is creating a dom node and appending to a container element and wrapping that logic to a looping function. Here's my example:
const resultElement = (value) => {
let wrapper = document.createElement("div");
//ROLL
let rollElement = document.createElement("input");
rollElement.setAttribute("type","text");
rollElement.value = value[0];
wrapper.appendChild(rollElement);
//Name
let nameElement = document.createElement("input");
nameElement.setAttribute("type","text");
nameElement.value = value[1];
wrapper.appendChild(nameElement);
//Marks
for(let i = 2; i < value.length; i++) {
let markElement = document.createElement("input");
markElement.setAttribute("type","text");
markElement.value = value[i];
markElement.setAttribute("id", ("mark_"+i));
wrapper.appendChild(markElement);
}
return wrapper;
}
const handleAllValues = (values) => {
let container = document.getElementById("container");
for(let i = 0;i<values.length;i++) {
let el = resultElement(values[i]);
container.appendChild(el);
}
}
and you should have an element with id="container" in your html.
The goal is to type in one text box a certain value (of pixels or centimeters) then to press a button, and the button to do some maths and show the result in a different text box.
What happens is, I'll get a result of 'NaN', implying that the string I inputted hadn't been converted properly. I've gone through hundreds of methods to fix this and it still doesn't work.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conversion</title>
</head>
<body bgcolor=#FF0000>
<form id="conversions" name="conversions">
Pixel value :
<br>
<input type="text" name="pxvalue" id="pxvalue">
<br>
<input type="submit" name="convertcm" id="convertcm" value="Convert cm to px!">
<input type="submit" name="convertpx" id="convertpx" value="Convert px to cm!">
<br>Centimeter value :
<br>
<input type="text" name="cmvalue" id="cmvalue">
<br>
<br>Output :
<input type="text" name="output" id="output">
</form>
<!-- This is where all the JavaScript code goes -->
<script>
var form = document.getElementById("conversions");
var strcmvalue = form.elements["cmvalue"];
var strpxvalue = form.elements["pxvalue"];
var cmvalue = ToInteger(strcmvalue);
var pxvalue = ToInteger(strpxvalue);
var output = document.getElementById("output");
var ccmbutton = document.getElementById("convertcm").onclick = cm_to_pixel_conversion(cmvalue);
var cpxbutton = document.getElementById("convertpx").onclick = pixel_to_cm_conversion(pxvalue);
var cm_per_pixel = 0.026458333;
var px_per_cm = 37.795275591;
function pixel_to_cm_conversion(pvalue) {
cmconversion = pvalue / px_per_cm;
output.value = cmconversion.toString();
}
function cm_to_pixel_conversion(cvalue) {
pxconversion = cvalue / cm_per_pixel;
output.value = pxconversion.toString();
}
function ToInteger(x) {
x = Number(x);
return x < 0 ? Math.ceil(x) : Math.floor(x);
}
</script>
<!-- End of the JavaScript code-->
</body>
</html>
Because you are not passing a value to the method, you are passing an html element.
var strcmvalue = form.elements["cmvalue"]; //reference element
var strpxvalue = form.elements["pxvalue"];
var cmvalue = ToInteger(strcmvalue); //passing element, not the value
var pxvalue = ToInteger(strpxvalue);
You need strcmvalue.value or form.elements["cmvalue"].value
Next issue is the fact you read the values when the page loads, so you will only ever have the values from the time it loads.
So you should be reading the values and converting them to numbers inside of your methods, not when the page loads.
After that your click event is calling the function, not referencing it.
var ccmbutton = document.getElementById("convertcm").onclick = function () {
var num = parseInt(strcmvalue.value, 10);
cm_to_pixel_conversion(num);
return false;
};
So all this time I thought I was doing it wrong. But can jQuery read decimals? My first textbox has to multiply the input with .10, the second is .05. But I only get 1 as final result. How can I fix it?
<!DOCTYPE html>
<head>
<title>Test</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<head>
<body>
<input id="first" type="text" />
<script>
$('#first').on('change', function () {
$(this).val($(this).val() * .10);
compute();
});
</script>
<input id="second" type="text" />
<script>
$('#second').on('change', function () {
$(this).val($(this).val() * .05);
compute();
});
</script>
<script>
function compute() {
var first = ~~$('#first').val();
var second = ~~$('#second').val();
var result = $('#result');
var grade = first + second;
result.val(grade);
}
</script>
<input id="result" type="text" readonly />
</body>
</html>
I believe you want to change compute() to this:
function compute() {
var first = parseFloat($('#first').val());
var second = parseFloat($('#second').val());
var result = $('#result');
var grade = first + second;
result.val(grade);
}