I'm creating a custom HTML page for my team at work. We are using dropdowns, text fields, and radio buttons to generate the fields of an email. We all use IE and Outlook so that's not a problem. I'm having trouble getting the "generate email" button to fill in the message. I can get the email window to pop up, but all of the fields are blank. I need the subject, to field, CC field, and body to be filled in according to the options they selected on the page. Here's my code:
<script>
$(function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue") + "<br>Contact info: " + $("#contactInformation") + "<br>Requested action: " + $(".requestedAction:checked");
window.location.href = "mailto:" + emailTo + "&CC=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
});
</script>
<body>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
</body>
In addition, I also need to format the body with line breaks and bold letters. The code above doesn't work. I'm pretty sure it won't work because of the less than/greater than symbols, but I dunno how else to put in HTML code. I know its possible because the old tool I'm replacing was able to achieve it, I just don't know how. Go easy on me, I'm new to jQuery and Javascript. Thanks in advance!
You are missing the ? in the mailto url so the querystring parameters are not passed in (note the ? before cc=):
window.location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
To add line breaks you could use %0A%0A as a line breakers. This will spawn different paragraphs like so:
&body=first line %0A%0A second line
You also have some errors in you code, some missing val() calls, to get the fields values, and missing conditionals to check if fields are set (to build the query string including those values or not).
function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
location.href = "mailto:" + emailTo + "?" +
(emailCC ? "cc=" + emailCC : "") +
(emailSubject ? "&subject=" + emailSubject : "") +
(emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
Hope it helps.
function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
location.href = "mailto:" + emailTo + "?" +
(emailCC ? "cc=" + emailCC : "") +
(emailSubject ? "&subject=" + emailSubject : "") +
(emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
Related
How can I make the output of the first and last name only upper case? Like it is shown in the picture. I tried doing it but it only works when in the input, not the output.
function myFunction(){
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var date= document.getElementById("date").value;
var days= document.getElementById("days").value;
var request= document.getElementById("request").value;
var n = document.getElementById("days").value;
var val= document.getElementById("room").value;
var total="";
if (n<=0){
n=prompt(" minimum reservation period is 1 day try again");
}
else if (val == "King $30") {
total = n * 30;
}
else if (val == "Double $20") {
total = n * 20;
}
else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + Fname + " " + Lname + " , thank you for booking with us."+
"<br>"+" Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" +"Amount=$ " + total +
"<br>" + " Any Special Request: " + request ;
return false;
};
body{
background-color:orange;
margin:20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20" >
<input type="text" id="lname" size="20" >
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label ><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King " >King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;" > CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>
Javascript has provided .toUpperCase() function for String.
var fullName = Fname + " " + Lname;
document.getElementById("result").innerHTML = " Dear " + fullName.toUpperCase() + " , thank you for booking with us."+
Use the following javascript:
The uppercase function converts to uppercase. There is a native method to convert to uppercase called toUpperCase(). More info here
function myFunction() {
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var n = document.getElementById("days").value;
var val = document.getElementById("room").value;
var total = "";
if (n <= 0) {
n = prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + capitalize(Fname) + " " + capitalize(Lname) + ", thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" + "Amount=$ " + total +
"<br>" + " Any Special Request: " + request;
return false;
};
function capitalize(e) {
return e.toUpperCase()
}
body {
background-color: orange;
margin: 20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King ">King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>
This is my first post and I have searched for days and can not find a solution for this problem.
I have a custom menu in sheets that pops up a .showModalDialog html. A user fills that out with information and clicks submit. This runs a function in the back end that creates folders/files and adds the user data to various sheets etc.
All this is working I have a Ui.alert that I am using to check the data entered is correct and for some reason the function is being trigger twice and the UI.alert is popping up again as a result. I have a fail safe that checks if one of the fields exists so it doesn't write again but the pop up is a really bad user experience.
Any help would be much appreciated.
Function to create custom menu:
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('TOA - Menu')
.addItem('Add New Account', 'addAccount')
.addItem('Update Brand', 'updateBrand')
.addItem('Go Live', 'goLive')
.addToUi();
}
Function to bring up form:
function addAccount() {
const html = HtmlService.createHtmlOutputFromFile('newAccount')
.setTitle('Add New Account')
.setWidth(1000)
.setHeight(800);;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add New Account');
}
Code for the form:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#itemDisplay {
display: none;
}
#modDisplay {
display: none;
}
#priceDisplay {
display: none;
}
#businessTypeDisplay {
display: none;
}
</style>
</head>
<body>
<h1>
Add New Account
</h1>
<form id="myForm" onsubmit="handleNewAccountFormSubmit(this);">
<div>
<label for="newBrand">Brand:</label>
<input name="newBrand" type="text" placeholder="Brand Name" required>
</div>
<div>
<p>Location</p>
<label for="country">Country:</label>
<select name="country" id="" onchange="" required>
<option value="" disabled selected>Select Country</option>
<option value="US">US</option>
</select>
<label for="state">State/Province:</label>
<input name="state" type="text" placeholder="State or province" required>
<label for="city">City:</label>
<input name="city" type="text" placeholder="City" required>
<div>
<label for="businessType">Business Type:</label>
<select name="businessType" id="businessTypeSelect" onchange="businessOtherDisplay(this.value);" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="americanDiner">American Diner</option>
<option value="pizzaParlor">Pizza Parlor</option>
<option value="coffeeShop">Coffee Shop</option>
<option value="candyShop">Candy Store</option>
<option value="iceCreamParlor">Ice Cream Parlor</option>
<option value="burgerShop">Burger Shop</option>
<option value="otherNon_AmericanDiner">Other non-American Diner (Foreign servings)</option>
<option value="other">Other (not listed above)</option>
</select>
</div>
<div id="businessTypeDisplay">
<label for="businessTypeOther">Business Type Other:</label>
<input name="businessTypeOther" type="text" placeholder="Business type if not listed above">
</div>
<div>
<label for="integration">Integration:</label>
<select name="integration" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="square">Square</option>
<option value="clover">Clover</option>
<option value="cloverPilot">Clover Pilot</option>
<option value="stripe">Stripe</option>
<option value="gPay">GPAY</option>
<option value="others" >Others</option>
</select>
</div>
<label for="menuSource">File Attachment/Source:</label>
<input name="menuSource" type="text" placeholder="Path to menu" required url>
<div>
<p>Do you need an item hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableItemOption" type="radio" value="yes" onclick="showItem()">
<label for="no">No</label>
<input name="disableItemOption" type="radio" value="no" checked onclick="hideItem()">
</div>
<div id="itemDisplay">
<label for="itemDisable">Which item(s) should be disabled?</label>
<textarea id="disabledItem" name="itemDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need a modifier hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableModOption" type="radio" value="yes" onclick="showMod()">
<label for="no">No</label>
<input name="disableModOption" type="radio" value="no" checked onclick="hideMod()">
</div>
<div id="modDisplay">
<label for="modDisable">Which modifier(s) should be disbaled?</label>
<textarea id="disabledMod" name="modDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need to update a price?</p>
<label for="yes">Yes</label>
<input name="updatePrice" type="radio" value="yes" onclick="showPrice()">
<label for="no">No</label>
<input name="updatePrice" type="radio" value="no" checked onclick="hidePrice()">
</div>
<div id="priceDisplay">
<label for="priceUpdate">Which item/modifier needs a price update?</label>
<textarea id="updatedPrice" name="priceUpdate" cols="40" rows="5" priceUpdate></textarea>
</div>
<div>
<label for="otherUpdates">Any other information needed on the menu?</label>
<input name="otherUpdates" type="text" placeholder="List other instructions here">
</div>
<div>
<label for="specialInstructions">Are there special instructions/notes for this brand?</label>
<input name="specialInstructions" type="text" placeholder="List special instructions here">
</div>
<input id="submitButton" type="submit" value="Submit">
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('submitButton').disabled=true;
google.script.run.withSuccessHandler().processNewAccountForm(formObject);
}
function disableSubmit() {
document.getElementById('submitButton').disabled=true;
document.getElementById('submitButton').value='Sending...';
}
function showItem(){
document.getElementById('itemDisplay').style.display ='block';
document.getElementById('disabledItem').required = true;
};
function hideItem(){
document.getElementById('itemDisplay').style.display = 'none';
document.getElementById('disabledItem').required = false;
};
function showMod(){
document.getElementById('modDisplay').style.display ='block';
document.getElementById('disabledMod').required = true;
};
function hideMod(){
document.getElementById('modDisplay').style.display = 'none';
document.getElementById('disabledMod').required = false;
};
function showPrice(){
document.getElementById('priceDisplay').style.display ='block';
document.getElementById('updatedPrice').required = true;
};
function hidePrice(){
document.getElementById('priceDisplay').style.display = 'none';
document.getElementById('updatedPrice').required = false;
};
function businessOtherDisplay(value) {
if(value === "other") {
document.getElementById('businessTypeDisplay').style.display = 'block';
} else {
document.getElementById('businessTypeDisplay').style.display = 'none';
};
};
</script>
</body>
</html>
And the code to handle the logic
function processNewAccountForm(formObject) {
const ui = SpreadsheetApp.getUi();
const ass = SpreadsheetApp.getActiveSpreadsheet();
const ss = ass.getActiveSheet();
const timestamp = Utilities.formatDate(new Date(), "GMT+8", "MM/dd/yyyy HH:mm:ss");
const userEmail = Session.getActiveUser().getEmail();
const brandName = formObject.newBrand;
// Add alert to check data entered is correct
const response = ui.alert('Please confirm the following information is correct:',
'ššæš®š»š± š”š®šŗš²: ' + formObject.newBrand +
'\nšš¼šš»ššæš: ' + formObject.country +
'\nš¦šš®šš²: ' + formObject.state +
'\nšš¶šš: ' + formObject.city +
'\nšššš¶š»š²šš š§šš½š²: ' + formObject.businessType +
'\nšš»šš²š“šæš®šš¶š¼š»: ' + formObject.integration +
'\nšš¶š¹š² š¦š¼ššæš°š²: ' + formObject.menuSource +
'\nšš¼ šš¼š š»š²š²š± š®š» š¶šš²šŗ šµš¶š±š±š²š»/š±š¶šš®šÆš¹š²š±?: ' + formObject.disableItemOption +
'\nšŖšµš¶š°šµ š¶šš²šŗ(š) ššµš¼šš¹š± šÆš² š±š¶šš®šÆš¹š²š±?: ' + formObject.itemDisable +
'\nšš¼ šš¼š š»š²š²š± š® šŗš¼š±š¶š³š¶š²šæ šµš¶š±š±š²š»/š±š¶šš®šÆš¹š²š±?: ' + formObject.disableModOption +
'\nšŖšµš¶š°šµ šŗš¼š±š¶š³š¶š²šæš ššµš¼šš¹š± šÆš² š±š¶šš®šÆš¹š²š±?: ' + formObject.modDisable +
'\nšš¼ šš¼š š»š²š²š± šš¼ šš½š±š®šš² š® š½šæš¶š°š²?: ' + formObject.updatePrice +
'\nšŖšµš¶š°šµ š¶šš²šŗ/šŗš¼š±š¶š³š¶š²šæ š»š²š²š±š š® š½šæš¶š°š² šš½š±š®šš²?: ' + formObject.priceUpdate +
'\nšš»š š¼ššµš²šæ š¶š»š³š¼šæšŗš®šš¶š¼š» š»š²š²š±š²š± š¼š» ššµš² šŗš²š»š?: ' + formObject.otherUpdates +
'\nššæš² ššµš²šæš² šš½š²š°š¶š®š¹ š¶š»šššæšš°šš¶š¼š»š/š»š¼šš²š š³š¼šæ ššµš¶š šÆšæš®š»š±?: ' + formObject.specialInstructions
, ui.ButtonSet.YES_NO);
if(response === ui.Button.YES) {
var lock = LockService.getScriptLock();
lock.waitLock(60000);
try {
const brandColumn = ss.getRange('D:D');
const brandValues = brandColumn.getValues();
let i = 1;
// Check for exisiting brand name
for(i=1; i < brandValues.length; i++) {
if(brandValues[i].toString().toLowerCase().trim() == brandName.toString().toLowerCase().trim() && ss.getRange(i+1,5).getValue() == 'New Brand'){
ui.alert("Brand name already created");
return;
}
};
// Create folder and PDF with build instructions
const parentFolder = DriveApp.getFolderById("RemovedfolderID");// how does this work with Shared drives? Create and move?
// const parentFolder = DriveApp.getFolderById("RemovedfolderID"); < ---- Team drive ID (notworking..) My folder -> RemovedfolderID
const newFolder = parentFolder.createFolder(brandName);
const docFile = newFolder.createFile(brandName+'.pdf',
'ššæš®š»š± š”š®šŗš²: ' + formObject.newBrand +
'\nšš¼šš»ššæš: ' + formObject.country +
'\nš¦šš®šš²: ' + formObject.state +
'\nšš¶šš: ' + formObject.city +
'\nšššš¶š»š²šš š§šš½š²: ' + formObject.businessType +
'\nšš»šš²š“šæš®šš¶š¼š»: ' + formObject.integration +
'\nšš¶š¹š² š¦š¼ššæš°š²: ' + formObject.menuSource +
'\nšš¼ šš¼š š»š²š²š± š®š» š¶šš²šŗ šµš¶š±š±š²š»/š±š¶šš®šÆš¹š²š±?: ' + formObject.disableItemOption +
'\nšŖšµš¶š°šµ š¶šš²šŗ(š) ššµš¼šš¹š± šÆš² š±š¶šš®šÆš¹š²š±?: ' + formObject.itemDisable +
'\nšš¼ šš¼š š»š²š²š± š® šŗš¼š±š¶š³š¶š²šæ šµš¶š±š±š²š»/š±š¶šš®šÆš¹š²š±?: ' + formObject.disableModOption +
'\nšŖšµš¶š°šµ šŗš¼š±š¶š³š¶š²šæš ššµš¼šš¹š± šÆš² š±š¶šš®šÆš¹š²š±?: ' + formObject.modDisable +
'\nšš¼ šš¼š š»š²š²š± šš¼ šš½š±š®šš² š® š½šæš¶š°š²?: ' + formObject.updatePrice +
'\nšŖšµš¶š°šµ š¶šš²šŗ/šŗš¼š±š¶š³š¶š²šæ š»š²š²š±š š® š½šæš¶š°š² šš½š±š®šš²?: ' + formObject.priceUpdate +
'\nšš»š š¼ššµš²šæ š¶š»š³š¼šæšŗš®šš¶š¼š» š»š²š²š±š²š± š¼š» ššµš² šŗš²š»š?: ' + formObject.otherUpdates +
'\nššæš² ššµš²šæš² šš½š²š°š¶š®š¹ š¶š»šššæšš°šš¶š¼š»š/š»š¼šš²š š³š¼šæ ššµš¶š šÆšæš®š»š±?: ' + formObject.specialInstructions,
MimeType.PDF);
const fileURL = docFile.getUrl();
// add header row to spreadsheet
// Create Spreadsheet in Brand folder. Activity log.
const name = brandName + " Activity Log";
const id = newFolder.getId();
const resource = {
title: name,
mimeType: MimeType.GOOGLE_SHEETS,
parents: [{id: id}]
};
const fileJson = Drive.Files.insert(resource);
const fileId = fileJson.id;
const lastRow = ss.getLastRow();
const newEntry = [
lastRow,
timestamp,
timestamp,
formObject.newBrand,
'New Brand',
formObject.businessType,
formObject.integration,
'=HYPERLINK("'+formObject.menuSource+'")',
userEmail,
fileURL,
,
,
,
,
formObject.city,
formObject.state,
formObject.country,
fileId
];
const newSheet = SpreadsheetApp.openById(fileId);
const sheetRange = newSheet.getSheetByName("Sheet1").getRange(1,1,1,18);
const headers = [
['šš»š±š²š
',
'ššæš®š»š± š¼šæš¶š“š¶š»š®š¹ š°šæš²š®šš² š±š®šš²',
'š§š¶šŗš² šš»',
'ššæš®š»š± š”š®šŗš²',
'š„š²š¾šš²šš šæš²š®šš¼š»',
'šššš¶š»š²šš ššš½š²',
'šš»šš²š“šæš®šš¶š¼š»',
'š š²š»š š¦š¼ššæš°š²',
'ššæš²š®šš²š± šÆš:',
'š š²š»š šš»šššæšš°šš¶š¼š»š',
'šššš¶š“š»š²š± šš¼?',
'š§š¶šŗš² š¢šš',
'šš¼šŗš½š¹š²š
š¶šš š„š®šš¶š»š“',
'šš¼ š¹š¶šš² š±š®šš² š®š»š± šš¶šŗš²',
'šš¶šš',
'š¦šš®šš²/š£šæš¼šš¶š»š°š²',
'šš¼šš»ššæš',
'šš°šš¶šš¶šš šš¼š“']
];
sheetRange.setValues(headers);
// Add data to last row in main tracker
ss.appendRow(newEntry);
// Copy data to spreadsheet brand
const activitySheet = newSheet.getSheetByName("Sheet1")
activitySheet.appendRow(newEntry);
// Flush changes before releasing lock
SpreadsheetApp.flush();
} catch(e) {
ui.alert("System is Busy, Please try again in a moment.");
return
} finally {
lock.releaseLock();
return
}
} else {
// action to take if info is incorrect? or No is clicked
};
};
I know that multiple triggers have been a known issue as per posts from Cooper and others here and here but I can't seem to be able to adopt them for my solution.
Thanks in advance for any ideas.
These are the changes I'd make to the dialog:
<input id="btn1" type="button" value="Submit" onClick="handleNewAccountFormSubmit(this.parentNode);" />
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('btn1').disabled=true;
google.script.run.processNewAccountForm(formObject);
}
I'm not saying that your way is wrong. That's just the way I would try to do it. But realistically it's a fairly large dialog and your just going to have to dig in and figure it out. If I were doing it and I was having a lot of problems I'd probably start with a simpler version and get it to work and then slowly add more features.
This is actually a fairly difficult time two write code in the middle of a transition between two runtimes. I've just noticed that I've lost my content assist in some areas in ES5 but they now work in ES6 so things can be difficult to deal with.
For some reason I can't seem to get this program to output and also can't think of what I might have done wrong. I've tried it in a few different browsers and keep getting the same result, which is nothing happens
<html>
<title>Activity</title>
<head>
<script type="text/javascript">
function outputData(studentData) {
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.GetElementById("A").checked;
var sWR = document.GetElementById("WR").checked;
var sC = document.GetElementById("C").checked;
var sP = document.GetElementById("P").checked;
document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>");
if (sA) document.write("" + Anthropology + "</br>");
if (sWR) document.write("" + World Religion + "</br>");
if (sC) document.write("" + Criminology + "</br>");
if (sP) document.write("" + Philosophy + "</br>");
}
</script>
</head>
<p>Enter Student Details</br></p>
<form name="studentData" action="" method="GET">
First name:<input type="text" name="firstname" value=""><br>
<br>Last name:<input type="text" name="lastname" value=""><br>
<br>Age:<input type="text" name="age" value=""><br><br>
Select your choice of subjects:<br>
<input type="checkbox" id="A" name="subject" value="Anthropology">Anthropology<br>
<input type="checkbox" id="WR" name="subject" value="World Religion">World Religion<br>
<input type="checkbox" id="C" name="subject" value="Criminology">Criminology<br>
<input type="checkbox" id="P" name="subject" value="Philosophy">Philosophy<br>
<input type="button" value="Submit" onClick="outputData(this.form)"><br>
</form>
</html>
Sorry if this has a really simple solution, I'm only just started learning HTML.
Not sure if it is your only problem, but you are missing <body> ... </body> tags, after your </head> tag.
You have a few errors in your code:
The function GetElementByID should actually be getElementById.
The Anthropology in your document.write() is an string and should be treated as such. See the code below.
You are also missing the body tag
<html>
<title>Activity</title>
<head>
<script type = "text/javascript">
function outputData(studentData){
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A").checked;
var sWR = document.getElementById("WR").checked;
var sC = document.getElementById("C").checked;
var sP = document.getElementById("P").checked;
document.write("" + studentFirstName + "</br>"
+ studentLastName + "</br>"
+ studentAge + "</br>");
if(sA) document.write("Anthropology</br>");
if(sWR) document.write("World Religion</br>");
if(sC) document.write("Criminology</br>");
if(sP) document.write("Philosophy</br>");
}
</script>
</head>
<body>
<p>Enter Student Details</br></p>
<form name = "studentData" action = "" method = "GET">
First name:<input type = "text" name = "firstname" value = ""><br>
<br>Last name:<input type = "text" name = "lastname" value = ""><br>
<br>Age:<input type = "text" name = "age" value = ""><br><br>
Select your choice of subjects:<br>
<input type = "checkbox" id = "A" name= "subject" value = "Anthropology">Anthropology<br>
<input type = "checkbox" id = "WR" name= "subject" value = "World Religion">World Religion<br>
<input type = "checkbox" id = "C" name="subject" value ="Criminology">Criminology<br>
<input type = "checkbox" id = "P" name="subject" value ="Philosophy">Philosophy<br>
<input type = "button" value = "Submit" onClick = "outputData(this.form)"><br>
</form>
If you wanted to get the values of the checkboxes instead then use the following JS (in the script tag instead):
function outputData(studentData){
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A");
var sWR = document.getElementById("WR");
var sC = document.getElementById("C");
var sP = document.getElementById("P");
document.write("" + studentFirstName + "</br>"
+ studentLastName + "</br>"
+ studentAge + "</br>");
if(sA.checked) document.write("" + sA.value + "</br>");
if(sWR.checked) document.write("" + sWR.value + "</br>");
if(sC.checked) document.write("" + sC.value + "</br>");
if(sP.checked) document.write("" + sP.value + "</br>");
}
There are several issues with your code formatting (GetElementById should be getElementById, missing <body>, etc). But I feel like what is preventing your code from running, is the fact that you are treating strings as a variable in your conditions.
if (sWR) document.write("" + World Religion + "</br>");
Should be quoted...
if (sWR) document.write("" + 'World Religion' + "</br>");
Also, using <br> for every line is a lazy way of doing things. You should really be building proper HTML and wrapping your elements correctly based on the layout you need. Always pair <label> with your <input> tags, and leverage CSS to your advantage.
Look into the bootstrap library because it makes styling forms much easier and has a lot of other capabilities.
Take a look at the final product below...
.form-title {
font-size: 14px;
font-weight: bold;
}
.selection {
margin: 10px 0;
font-weight: bold;
}
.input-group>label,
.input-group>input {
margin: 5px 0;
display: inline-block;
}
.submit-button {
margin: 10px 0;
}
<html>
<title>Activity</title>
<head>
<script type="text/javascript">
function outputData(studentData) {
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A").checked;
var sWR = document.getElementById("WR").checked;
var sC = document.getElementById("C").checked;
var sP = document.getElementById("P").checked;
document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>");
if (sA) document.write("" + 'Anthropology' + "</br>");
if (sWR) document.write("" + 'World Religion' + "</br>");
if (sC) document.write("" + 'Criminology' + "</br>");
if (sP) document.write("" + 'Philosophy' + "</br>");
}
</script>
</head>
<body>
<p class="form-title">Enter Student Details</p>
<form name="studentData" action="" method="GET">
<div class="input-group">
<label>First name:</label>
<input type="text" name="firstname" value="">
</div>
<div class="input-group">
<label>Last name:</label>
<input type="text" name="lastname" value="">
</div>
<div class="input-group">
<label>Age:</label>
<input type="text" name="age" value="">
</div>
<div class="selection">
Select your choice of subjects:
</div>
<div class="input-group">
<input type="checkbox" id="A" name="subject" value="Anthropology">
<label>Anthropology</label>
</div>
<div class="input-group">
<input type="checkbox" id="WR" name="subject" value="World Religion">
<label>World Religion</label>
</div>
<div class="input-group">
<input type="checkbox" id="C" name="subject" value="Criminology">
<label>Criminology</label>
</div>
<div class="input-group">
<input type="checkbox" id="P" name="subject" value="Philosophy">
<label>Philosophy</label>
</div>
<input type="button" value="Submit" onClick="outputData(this.form)" class="submit-button">
</form>
</body>
</html>
Change GetElementById to getElementById
use checkbox value instead of typing it manually.
var sA = document.getElementById("A");
This will get the input value field/console.log(sA) - you will see the values in there
if(sA.checked) document.write("" + sA.value + "");
Activity
<head>
<script type = "text/javascript">
function outputData(studentData){
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A");
var sWR = document.getElementById("WR");
var sC = document.getElementById("C");
var sP = document.getElementById("P");
document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>");
if(sA.checked) document.write("" + sA.value + "</br>");
if(sWR.checked) document.write("" + sWR.value + "</br>");
if(sC.checked) document.write("" + sC.value + "</br>");
if(sP.checked) document.write("" + sP.value + "</br>");
}
</script>
</head>
<p>Enter Student Details</br></p>
<form name = "studentData" >
First name:<input type = "text" name = "firstname" value = ""><br>
<br>Last name:<input type = "text" name = "lastname" value = ""><br>
<br>Age:<input type = "text" name = "age" value = ""><br><br>
Select your choice of subjects:<br>
<input type = "checkbox" id = "A" name= "subject" value = "Anthropology">Anthropology<br>
<input type = "checkbox" id = "WR" name= "subject" value = "World Religion">World Religion<br>
<input type = "checkbox" id = "C" name="subject" value ="Criminology">Criminology<br>
<input type = "checkbox" id = "P" name="subject" value ="Philosophy">Philosophy<br>
<input type = "button" value = "Submit" onClick = "outputData(this.form)"><br>
</form>
The title pretty much says everything.
I'm making a form that will return your first name and surname with city in a quote using div class = "well". I'm now stuck for some hours now trying to figure out what I'm doing wrong.
<script> /* get info from inputs and add it to a quote. */
function FillInfo(){
var fname = document.forms ["SIgnUpForm"] ["fname"].value;
var sname = document.forms ["SIgnUpForm"] ["sname"].value;
var city = document.forms ["SIgnUpForm"] ["city"].value;
document.getElementById("info").innerHTML = "Thank you" + " " + fname + " " + sname + "from" + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
}
</script>
and in body is:
<div class="heading2">
<div class="container2">
<p>Do you want to travel troughout space? Then fill out our form!</p><br>
<form name="SignUpForm" onsubmit="return validateForm()" method="get">
<input type="text" name="fname" placeholder="First name" required><br>
<input type="text" name="sname" placeholder="Last name" required><br>
<input type="text" name="city" placeholder="City" required><br><br>
<div id="info" class="well"></div>
<button class="otherpage" onclick="FillInfo();">Submit</button><br><br>
Return
</form>
</div>
</div>
I expect it to write down the quote when i click the submit button, yet in return i get this :
Uncaught TypeError: Cannot read property 'fname' of undefined
at FillInfo (things i put into inputs name, city)
at HTMLButtonElement.onclick (things i put into inputs name, city)
I think you just mistyped the form name
Your Html code: SignUpForm
Your Javascript code :SIgnUpForm
I fixed it and it worked for me.
I used formData to get a form object, then form.get(name) to get the content.
It's a more elegant way to get your content.
I also replaced your button with a input type="button", because it caused a refresh of the page.
note: it doesn't work on IE & safari for iOS
function FillInfo(){
let f = new FormData(document.querySelector('form'));
var fname = f.get("fname");
var sname = f.get("sname");
var city = f.get("city");
document.getElementById("info").innerHTML = "Thank you" + " " + fname + " " + sname + " from " + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
}
<div class="heading2">
<div class="container2">
<p>Do you want to travel troughout space? Then fill out our form!</p><br>
<form name="SignUpForm" method="get">
<input type="text" name="fname" placeholder="First name" required><br>
<input type="text" name="sname" placeholder="Last name" required><br>
<input type="text" name="city" placeholder="City" required><br><br>
<div id="info" class="well"></div>
<input type="button" class="otherpage" onclick="FillInfo();" value="Submit" /><br><br>
Return
</form>
</div>
</div>
Why? These questions keep coming up about undefined errors in JavaScript when accessing the DOM. Please, ensure the DOM is ready before accessing it. Just putting your scripts after your html won't assure you of that.
Though the "SIgnUpForm" name will give you errors and is corrected here, it doesn't solve the entire problem. Different processor and network speeds and browser mechanisms may result in you having an undefined property error if you don't ensure the Document Object Model (DOM) is ready before you access elements in the html document.
<script> /* get info from inputs and add it to a quote. */
window.onload = function () {
function FillInfo(){
var fname = document.forms ["SignUpForm"] ["fname"].value;
var sname = document.forms ["SignUpForm"] ["sname"].value;
var city = document.forms ["SignUpForm"] ["city"].value;
document.getElementById("info").innerHTML = "Thank you" + " " + fname + " " + sname + "from" + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
}
});
</script>
Also, consider using jQuery's $(document).ready() method for cross browser compatibility.
I just modify code, it's working in all browsers:
<script> /* get info from inputs and add it to a quote. */
function FillInfo(){
let form = document.querySelector('form');
var fname = form.elements["fname"];
var sname = form.elements["sname"];
var city = form.elements["city"];
document.getElementById("info").innerHTML = "Thank you" + " " + fname.value + " " + sname.value + " from " + " " + city.value + "." + " " + "You are now being considered as our next adventurer. Good luck!";
return false;
}
</script>
<div class="heading2">
<div class="container2">
<p>Do you want to travel troughout space? Then fill out our form!</p><br>
<form name="SignUpForm" onsubmit="return validateForm()" method="get">
<input type="text" name="fname" placeholder="First name" required><br>
<input type="text" name="sname" placeholder="Last name" required><br>
<input type="text" name="city" placeholder="City" required><br><br>
<div id="info" class="well"></div>
<button class="otherpage" type="button" onclick="FillInfo();">Submit</button><br><br>
Return
</form>
</div>
</div>
PROBLEM SOLVED
I just started learning JavaScript, and I came across a problem while coding a quick tool for a game that I play. I want users to be able to input a couple of things via an HTML Form and I want the JS Script to take that input and turn it into an SQL.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HabSQL - Online SQL Generator</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
</head>
<body>
<header>Welcome to HabSQL v1.0! The Online Habbo SQL Generator!</header>
<p>HabSQL is strictly for use with Habbo Furniture SQLs and Data. Please enter all necessary information accordingly.</p>
<script src="scripts/habSQL.js"></script>
<form action="javascript:void(habSQL())">
<fieldset>
Furniture Name: <input id="furniName" type="text">
Furniture ID: <input id="furniID" type="number"><br>
SWF File Name: <input id="fileName" type="text"> (Exclude .SWF)<br>
Sprite ID: <input id="spriteID" type="number"> (We recommend that you use the same ID as Furniture ID).
</fieldset>
<fieldset>
Furniture Type: <input id="furniType" type="radio" value="s" name="furniType">Floor <input id="furniType" type="radio" value="i" name="furniType">Wall <input id="furniType" type="radio" value="e" name="furniType">Effect<br>
</fieldset>
<fieldset>
Furniture Width: <input id="furniWidth" type="number" class="dimensions"> Furniture Length: <input id="furniLength" type="number" class="dimensions"> Furniture Height: <input id="furniHeight" type="number" class="dimensions"><br>
Can you stack furniture on it? <input id="canStack" type="radio" value="1" name="canStack">Yes <input id="canStack" type="radio" value="0" name="canStack">No<br>
Can you sit on it? <input id="canSit" type="radio" value="1" name="canSit">Yes <input id="canSit" type="radio" value="0" name="canSit">No<br>
Can you walk on/through it? <input id="canWalk" type="radio" value="1" name="canWalk">Yes <input id="canWalk" type="radio" value="0" name="canWalk">No<br>
Can you recycle it? <input id="canRecycle" type="radio" value="1" name="canRecycle">Yes <input id="canRecycle" type="radio" value="0" name="canRecycle">No<br>
Can you trade it? <input id="canTrade" type="radio" value="1" name="canTrade">Yes <input id="canTrade" type="radio" value="0" name="canTrade">No<br>
Can you sell it on the Marketplace? <input id="canSell" type="radio" value="1" name="canSell">Yes <input id="canSell" type="radio" value="0" name="canSell">No<br>
Can you give it to someone as a gift? <input id="canGive" type="radio" value="1" name="canGive">Yes <input id="canGive" type="radio" value="0" name="canGive">No<br>
Can you stack it in the inventory? <input id="invStack" type="radio" value="1" name="invStack">Yes <input id="invStack" type="radio" value="0" name="invStack">No<br>
</fieldset>
<fieldset>
Interaction Type:<br>
<input id="intType" type="radio" value="default" name="intType">None<br>
<input id="intType" type="radio" value="bed" name="intType">Bed<br>
<input id="intType" type="radio" value="vendingmachine" name="intType">Vending Machine<br>
<input id="intType" type="radio" value="trophy" name="intType">Trophy<br>
<input id="intType" type="radio" value="gate" name="intType">Gate<br>
<input id="intType" type="radio" value="onewaygate" name="intType">One Way Gate<br>
<input id="intType" type="radio" value="dice" name="intType">Dice<br>
<input id="intType" type="radio" value="teleport" name="intType">Teleporter<br>
(More Interaction Types Coming in v2.0)<br>
</fieldset>
<fieldset>
How many interactions does the furniture have? (i.e. a dice has 6 sides and a closed side, therefore 7 interactions.)<br>
<input id="intCount" type="number"><br>
If your furniture gives out an item, what is the item's ID? 0, if none. (View external_flash_texts.txt or external_flash_texts.xml for ID #'s.)<br>
<input id="vendingID" type="number"><br>
</fieldset>
<input type="Submit" value="Generate!">
</form>
Furniture SQL:<br>
<textarea id="furniSQL" readonly="true" rows="10" cols="50"></textarea>
</body>
</html>
And here is my JS:
// HabSQL - Online Habbo SQL Generator
// Developed by Thomas Yamakaitis - March 3, 2015
function habSQL() {
var furniID = document.getElementById('furniID').value;
var furniName = document.getElementById('furniName').value;
var fileName = document.getElementById('fileName').value;
var furniType = document.getElementById('furniType').value;
var furniWidth = document.getElementById('furniWidth').value;
var furniLength = document.getElementById('furniLength').value;
var furniHeight = document.getElementById('furniHeight').value;
var canStack = document.getElementById('canStack').value;
var canSit = document.getElementById('canSit').value;
var canWalk = document.getElementById('canWalk').value;
var spriteID = document.getElementById('spriteID').value;
var canRecycle = document.getElementById('canRecycle').value;
var canTrade = document.getElementById('canTrade').value;
var canSell = document.getElementById('canSell').value;
var canGive = document.getElementById('canGive').value;
var invStack = document.getElementById('invStack').value;
var intType = document.getElementById('intType').value;
var intCount = document.getElementById('intCount').value;
var vendingID = document.getElementById('vendingID').value;
var comma = ", ";
var commaQuotes = "', '";
var quoteComma = "', ";
var commaQuote = ", '";
document.getElementById('furniSQL').innerHTML = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
}
I can't seem to pinpoint exactly what it is that I am doing wrong. If somebody could please assist me, that would be greatly appreciated.
Thanks!
Thanks to a few users here! The solution was a typo and I believe it was also value instead of innerHTML too.
A simple typo: furniId instead of furniID on the last line
JavaScript is case-sensitive so if you capitalize a variable name differently it's a completely different variable, and so it does not know what you mean.
You got a typo: furniID in your last element which is document.getElementById('furniSQL').value= is spelled as furniId
Textareas are modified by value, not innerHTML
so set it up to
document.getElementById('furniSQL').value = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
and you should be good to go.