I have just simplified my question with hopes that it will be more understandable. I need the form to update its amount automatically when user selects a product code. And all the reference number to fill automatically with the uuid from the backend. This is my first question on stack, i really hope someone can help.
Amount FIELD >> to be updated based on product code from sheet Reference FIELD >> Get uuid and input it in the field.
SPREADSHEET LINK : https://docs.google.com/spreadsheets/d/1CK1bAcrTAOabkzK0YxliVFFh8VFPYIYXDy6ocvnGuGY
Code.js
const APP_NAME = "PRODUCT SALES APP"
var url="https://docs.google.com/spreadsheets/d/1CK1bAcrTAOabkzK0YxliVFFh8VFPYIYXDy6ocvnGuGY/edit#gid=1312844985";
/**
* Link the html file to another one
*/
function link(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent()
}
/**
* Handle get request
*/
function doGet() {
return HtmlService.createTemplateFromFile("index.html").evaluate().setTitle(APP_NAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getCost(Productcode){
var ss= SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Products");
var data = ws.getRange(1, 1, ws.getLastRow(), 6).getValues();
//Logger.log(data);
var codesList = data.map(function(r){ return r[2]; });
var costList = data.map(function(r){ return r[4]; });
var position = codesList.indexOf(Productcode);
if (position > -1){
return "₦" + costList[position].toFixed(2);
} else{
return 'Unavailable'
}
}
/**
* Handle post request
*/
function doPost(e){
const postData = e.parameter
const uuid = Utilities.getUuid()
//const image = createFile(postData.data, postData.profile)
//save to spreadsheet
var ss= SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("PRODUCT SALES");
ws.appendRow([new Date(),uuid, postData.category, postData.gender_type, postData.product_class, postData.product_code, postData.first_name, postData.last_name, postData.delivery_address, postData.phone_number, postData.email_address, postData.platinum_id])
const html = `Thanks for your submission! \n${uuid}`
return HtmlService.createHtmlOutput(html).setTitle("Success!")
}
index.html
<div>
<label for="product_code">Product Code</label>
<select name="product_code" id="productcode" required>
<option value="" disabled selected>Select Product Code</option>
<option value="LC1">"Product Code A"</option>
<option value="LC2">"Product Code A"</option>
<option value="LC3">"Product Code A"</option>
</select>
</div>
<!-- AMOUNT -->
<div>
<label for="amount">Amount</label>
<input type="text" id="amount" required>
</div>
<!-- REFERRENCE-->
<div>
<label for="reff">Reference</label>
<input type="text" id="reff" required>
</div>
<!-- Submit button -->
<div>
<input type="submit" value="BUY NOW">
</div>
</form>
<!-- Link the javascript -->
<?!= link('js'); ?>
</body>
</html>
js.html
<script>
const productAmount = document.getElementById("amount")
const referenceNo= document.getElementById("reff")
document.getElementById("productcode").addEventListener("select",getEstimate);
document.getElementById("fn").addEventListener("input",getUuid);
function getEstimate(){
var productCode = document.getElementById("productcode").value;
if(productCode.length > -1){
google.script.run.withSuccessHandler.getCost(Productcode);
document.getElementById("amount").value = cost;
}
function getUuid(){
const uuid = Utilities.getUuid.getValue()
referenceNo = uuid;
}
</script>
