I am making a form with some fields that a user has to fill out. Once he/she fills it out, hits save, the form disappears and a new div appears with what the user filled out. Unfortunately, I cannot get the data to show in this second div that appears. I am not sure what I'm doing wrong, maybe you can help me? Also, I need to use pure Javascript, not jQuery or anything else.
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button id="edit" value="Edit" onclick="editData();"></button>
<p id="pname"></p>
</div>
<body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
try this one I think it is working
try the below code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
function showData() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
" First Name : " + firstName + "<hr>",
" Last Name : " + lastName + "<hr>",
" state : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
Problem: you didn't target DOM objects, you have targeted their values, and later in code you try to get properties, like: firstName.name!
Change two lines at the top of your code to this, and everything should work fine.
One error is the fact that you are getting the values from the elements right after the page is rendered, thus they are all undefined.
You should get them after the save button is pressed. Moving the variable declarations inside the showData function will help that.
Also in your variables you are saving the element.value, thus saving the string entered by the user.
Later when creating the text you are trying to insert as HTML you access the value and name properties. That means you are trying to use element.value.value and element.value.name which undefined for strings.
Removing the value property in your variable declaration will give you the element, and later you can just get the value and name properties out of it.
Related
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.
I have an array in Javascript that consists of three different countries. I have a form in my HTML page that contains a drop down box. Instead of populating the drop down box using
<option value=""> *option name* </option>,
I want to try including the elements of my array in my drop down box, so when the user clicks it, they'll see the elements.
var countries=["Sri Lanka","Bangladesh","India"]
I tried using the 'onclick' function in my HTML so that it would link to this following function
function myFunction() {document.getElementById('Bangladesh').innerhtml= (countries[2])>
But I since removed it since it didn't work. How exactly can I populate the drop down box with elements from my array. My JS and HTML code have been provided below.
<DOCTYPE html>
<head>
<script src="inquiries.js"> </script>
</head>
<body>
<h1 align="center"class='header1'> <font size="8"> </font> </h1>
<div class="busybox">
<form name="myForm" form action="/action_page.php" onsubmit="return validateForm();" method="post">
<label for="fname"> <b> First Name </b> </label>
<input type="text" id="fname" name="firstname" placeholder="Your name......"
required >
<label for="Birthday"> <b> E-Mail </b> </label>
<input type="text" id="email" name="email" placeholder="Enter your E-mail address....." >
<Label for="country"> <b> Country </b> </Label>
<select id="country" name="country">
<option value="Sri Lanka"> Sri Lanka </option>
<option value="India"> India </option>
<option value="Bangladesh"> <p id="bangladesh"> </p> </option>
</select>
<label for="summary"> <b> Summary </b> </label>
<textarea id="summary" name="Summary" placeholder="Write a summary of your inquiry
here...." style="height:200px"> </textarea>
<input type="submit" value="submit" id="sbox" onclick="myfunction()">
</form>
----JS CODE----
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}else{
return true;
} }
var countries = ["Sri Lanka", "India", "Bangladesh"];
function myFunction() {document.getElementById('Bangladesh').innerhtml =(countries[2])>
var countries=["Sri Lanka","Bangladesh","India"];
document.getElementById("Select").innerHTML = "";
for(var i=0;i<countries.length;i++)
{
var node = document.createElement("option");
var textnode = document.createTextNode(countries[i]);
node.appendChild(textnode);
document.getElementById("Select").appendChild(node);
}
<select id="Select"></select>
Here is a solution using array#foreach.
var select = document.getElementById("selectCountry");
var countries = ["Sri Lanka", "India", "Bangladesh"];
countries.forEach((country) => {
var element = document.createElement("option");
element.textContent = country;
element.value = country;
select.appendChild(element);
});
<select id="selectCountry"></select>
Try this:
$('#country').change(function(){
var dropdown=document.createElement('select');
var options="";
for(i = 0; i < countries.length; i = i+1){
options+= "<option value='"+countries[i]+"'>"+countries[i]+"</option>";
}
dropdown.innerHTML= options;
document.getElementById('country').appendChild(dropdown);
});
To do it with jQuery:
$(document).ready(function() {
var select = $('#country');
var countries = ["Sri Lanka", "India", "Bangladesh"];
for (var i=0; i<countries.length; i++) {
var country = countries[i];
var el = $("<option value='" + country + "'>" + country + "</option>");
$(select).append(el);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Label for="country"> <b> Country </b> </Label>
<select id="country" name="country">
Im partly there but it would be helpful if any of you guys could send the entire code .
1) Create a form with the below given fields and validate the same using javascript or jquery.
Name : Text box- mandatory
Gender : Radio Button
Age : Text box - Accept Number only - (check for valid Age criteria)
Email : Text box -ย should be in formatย example#gmail.com
Website : Text box -ย should be in formatย http://www.example.com
Country : Select box with 10 countries
Mobile :ย Text box - should be a 10 digit number - Display this field only after the user selects a country
Social Media Accounts : Facebook, Google, Twitter (3 checkboxes) - Display Social media section only if selected Country is India
I agree the Terms and Conditions - Checkbox
All fields are mandatory and show error messages for all fields(if not valid)
Only allow to submit form after checking the 'I agree' checkbox.
<!DOCTYPE html>
<html>
<head>
<title>Get Values Of Form Elements Using jQuery</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="form_value.css"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="form_value.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#social").hide() ;
// $("#hide").click(function(){
// $("social").hide();
// });
// var country = document.getElementByName("country")[0].value;
// if (country.value == "India") {
// $("#show").click(function(){
// ย ย ย $("social").show();
// });
// }
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.email_id.value)) {
alert("You have entered an invalid email address!")
return (false)
}
});
</script>
</head>
<body onload="disableSubmit()">
<div class="container">
<div class="main">
<h2>Get Values Of Form Elements Using jQuery</h2>
<form action="">
<!-- Text -->
<br>
<br>
<label>Name :</label>
<input type="text" id="text" name="name" value=""required/><br>
<!-- Radio Button -->
<br><br><br>
<label>Gender:</label>
<input type="radio" name="male" value="Male">Male
<input type="radio" name="female" value="Female">Female
<br><br>
<!-- Textarea -->
<label>Email :</label>
<input type="text" id="Email" value="" id="Email"/>
<br>
<br><br>
Age: <input type="text" id="Age" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" />
<span id="error" style="color: Red; display: none">* Input digits (0 - 9)</span>
<br><br>
<label> Website:</label>
<input type="text" id="text" value="" name = "Website" id="website" />
<script type="text/javascript">
function validate() {
if(Website.value.length==0)
{
document.getElementById("Website").innerHTML="Should be in the format http://www.example.com ";
}
}
</script>
<br><br>
<label>Country:</label>
<select class="country" id = "country">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
<option value="uae">United Arab Emirates</option>
<option value="germany">Germany</option>
<option value="france">France</option>
<option value="netherlands">Netherlands</option>
<option value="yemen">Yemen</option>
<option value="pakistan">Pakistan</option>
<option value="russia">Russia</option>
</select>
<br><br>
<label>Mobile:</label>
<input type="text" id="phone" name="phone" onkeypress="phoneno()" maxlength="10">
<script type="text/javascript">
function phoneno(){
$('#phone').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
}
</script>
<br><br>
<div id = "social" >
<p>Social Media Accounts.</p> <input type="checkbox" id="Facebook" value="Facebook"><label for="Facebook"> Facebook</label><br> <input type="checkbox" id="Google" value="Google"><label for="Google"> CSS</label><br> <input type="checkbox" id="Twitter" value="Twitter"><label for="Twitter"> Twitter</label><br>
</div>
<br>
<br>
<script>
function disableSubmit() {
document.getElementById("submit").disabled = true;
}
function activateButton(element) {
if(element.checked) {
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("submit").disabled = true;
}
}
</script>
<input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"> I Agree Terms & Coditions
<br><br>
<input type="submit" name="submit" id="submit">
</script>
</form>
</div>
</body>
</html>
this is my js page content form_value.js
$(document).ready(function() {
// Function to get input value.
$('#text_value').click(function() {
var text_value = $("#text").val();
if(text_value=='') {
alert("Enter Some Text In Input Field");
}else{
alert(text_value);
}
});
// Funtion to get checked radio's value.
$('#gender_value').click(function() {
$('#result').empty();
var value = $("form input[type='gender']:checked").val();
if($("form input[type='gender']").is(':checked')) {
$('#result').append("Checked Radio Button Value is :<span> "+ value +" </span>");
}else{
alert(" Please Select any Option ");
}
});
// Get value Onchange radio function.
$('input:gender').change(function(){
var value = $("form input[type='gender']:checked").val();
alert("Value of Changed Radio is : " +value);
});
// Funtion to reset or clear selection.
$('#radio_reset').click(function() {
$('#result').empty();
$("input:radio").attr("checked", false);
});
$('#Email').click(function() {
function validate(Email) {
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za- z]{2,4})$/;
//var address = document.getElementById[email].value;
if (reg.test(email) == false)
{
alert('Should be in the format example#gmail.com');
return (false);
}
}
});
});
$("#Age").click(function() {
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 100) input.value = 100;
}
});
</script>
<!DOCTYPE html> <html> <head> <script> function validateForm() {
var name = document.forms["myForm"]["fname"].value;
var gender = document.forms["myForm"]["gender"].value;
var age = document.forms["myForm"]["age"].value;
var a = parseInt(age);
var email = document.forms["myForm"]["email"].value;
var url = document.forms["myForm"]["website"].value;
var country = document.forms["myForm"]["country"].value;
var mobileCountry = document.forms["myForm"]["mobileCountry"].value;
var mcLength = mobileCountry.length;
if (name == "") {
alert("Name Field is mandatory");
return false;
}
if (gender != "male" && gender != "female") {
alert("Atleast one Gender has to be chosen");
return false;
}
if(isNaN(a)){
alert("Age is compulsory and must be a number");
return false;
}
if(email == ""){
alert("Email address is required");
}
else if(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){
} else{
alert("Email address entered is invalid");
return false;
}
if(/^(ftp|http|https):\/\/[^ "]+$/.test(url)){
} else{
alert("Website url entered is invalid");
return false;
}
if(country != "choose"){
document.getElementById("mc").style.display = "block";
} else{
document.getElementById("mc").style.display = "none";
}
if(mcLength != 10){
alert("Number must be ten digits");
return false;
}
} function displaySocial(){ var social =
document.getElementById("social");
var mc = document.getElementById("mobileCountry");
var country = document.getElementById("country");
var selectedValue = country.options[country.selectedIndex].value;
if (selectedValue != "choose") {
if(selectedValue == "india"){
if(social.style.display = "none"){
social.style.display = "block";
} else{
social.style.display = "none";
} } else{
social.style.display = "none"; }
if(mc.style.display = "none"){
mc.style.display = "block";
} else{
mc.style.display = "none"; } } else{
mc.style.display = "none"; }
} </script> </head> <body> <form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"><br> Gender: <input type="radio" name="gender" value="male"> Male <input type="radio" value="female" name="gender"> Female <br> age: <input type="text" name="age"><br> email: <input type="text" name="email"><br> website: <input type="text" name="website"><br> country: <select type="text" name="country" id="country" onclick="displaySocial()"><option value="choose">--choose--</option><option value="usa">USA</option><option value="uk">UK</option><option value="ng">Nigeria</option><option value="india">India</option></select><br> <span id="mobileCountry" style="display: none;">mobile country: <input type="text" name="mobileCountry"><br></span> <span id="social" style="display: none;">Social Media: <input type="radio" name="gender"> Facebook <input type="radio" name="gender"> Google <input type="radio" name="gender"> Twitter</span> <br> <p> <input type="submit" value="Submit"> </form> <p id="error"></p> </body> </html>
This is my Form Validation it was working perfect and what my problem is i need to display the form values within a single alert message so please provide a suggestion for me
<!DOCTYPE html>
<html>
<head>
<title>1.Form ValidationM</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<div class="Wrapper">
<header>
<h1 class="logo">Header</h1>
<nav class="navdesktop">
<ul class="menu-item">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Category</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="RegHead"><h1>Registration Form</h1></div>
<div class="Form-Wrapper">
<div class="Divstyle">
<!--<h1>Form Validation</h1>-->
<form name="myForm" onsubmit="return myFunction()">
<label>FirstName:</label><input type="text" class="TagColor" name="fname"/><br><span class="Required"></span><br>
<label>LastName:</label><input type="text" class="TagColor" name="lname"/><br><span class="Required"></span><br>
<label>Phone No:</label><input type="text" class="TagColor" name="phno"/><br><span class="Required"></span><br>
<label>Email-Id :</label><input type="email" class="TagColor" name="email"/><br><span class="Required"></span><br>
<label>Gender: </label><br>
<label>Male:</label><input type="radio" name="gender" value="male"/>
<label>Female:</label><input type="radio" name="gender" value="female"/><br><span id="WrongMsg"></span><br><br>
<label>Please choose Yes or No option for Select Country:</label><br>
<label>Yes</label><input type="radio" name="option" id="YesOp" onclick="DropRad()">
<label>No</label><input type="radio" name="option" id="NoOp" onclick="DropRad()"><br><br>
<div id="Pass">
<label>Select Country</label>
<select id="mySelect">
<option value="0">Select Country</option>
<option value="1">INDIA</option>
<option value="2">PAKISTAN</option>
<option value="3">AUSTRALLIA</option>
<option value="4">AMERICA</option>
</select><br><br><span id="DropRequired"></span><br>
</div>
<label>Language: </label><br>
<label>Tamil:</label><input type="checkbox" name="check" value="Tamil"><br><br>
<label>English:</label><input type="checkbox" name="check" value="English"><br><br>
<label>Telugu:</label><input type="checkbox" name="check" value="Telugu"><br><br>
<label>Kannada:</label><input type="checkbox" name="check" value="Kannada"><br><br>
<label>Malayalam:</label><input type="checkbox" name="check" value="Malayalam"><br><span id="ErrorMsg"></span><br><br>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
<script>
document.getElementById("Pass").style.display = 'none';
function myFunction()
{
var res = document.forms.myForm.length;
flag = true;
for (var i = 0; i < res; i++)
{
if ((document.forms.myForm[i].className) == 'TagColor')
{
var x = document.forms.myForm[i].value;
if (x == "" || x == null)
{
document.getElementsByClassName("Required")[i].innerHTML = "required";
document.getElementsByClassName("Required")[i].style.color = "red";
document.getElementsByClassName("TagColor")[i].style.border = "1px solid red";
document.getElementsByClassName("TagColor")[i].style.background = "lightblue";
flag=false;
}
else
{
document.getElementsByClassName("Required")[i].innerHTML = "";
document.getElementsByClassName("Required")[i].style.color = "white";
document.getElementsByClassName("TagColor")[i].style.border = "1px solid black";
document.getElementsByClassName("TagColor")[i].style.background = "white";
var txt = document.getElementsByClassName("TagColor");
var sad = " ";
for(var j=0;j<txt.length;j++)
{
var dispp = txt[j].value;
sad += " ," + dispp;
}
alert(sad);
}
}
}
var gen = document.getElementsByName("gender");
for(var i=0;i<gen.length;i++)
{
if(gen[i].checked == false)
{
document.getElementById("WrongMsg").innerHTML = "required";
document.getElementById("WrongMsg").style.color = "red";
flag = false;
}
else
{
document.getElementById("WrongMsg").innerHTML = "";
var disp = " ";
var Radd = document.getElementsByName("gender");
for(var i=0;i<Radd.length;i++)
{
if(Radd[i].checked)
{
disp = Radd[i].value;
alert(disp);
flag = true;
}
}
}
}
var c = document.getElementsByName("check");
for(var i=0;i<c.length;i++)
{
if(c[i].checked == false)
{
document.getElementById("ErrorMsg").innerHTML = "required";
document.getElementById("ErrorMsg").style.color = "red";
flag = false;
}
else
{
document.getElementById("ErrorMsg").innerHTML = "";
var display = "";
var chk = document.getElementsByName("check");
for(var i=0;i<chk.length;i++)
{
if(chk[i].checked)
{
display += "," + chk[i].value;
}
}
alert(display);
}
}
return flag;
}
function DropRad()
{
var YesRadio = document.getElementById("YesOp");
var NoRadio = document.getElementById("NoOp");
Pass.style.display = YesOp.checked ? "block" : "none";
var e = document.getElementById("mySelect");
var optionSelIndex = e.options[e.selectedIndex].value;
var optionSelectedText = e.options[e.selectedIndex].text;
if (optionSelIndex == 0)
{
document.getElementById("DropRequired").innerHTML = "Required";
document.getElementById("DropRequired").style.color = "red";
}
else
{
document.getElementById("DropRequired").innerHTML = "";
document.getElementById("DropRequired").style.color = "white";
alert("Your Country is: " + optionSelectedText);
}
}
</script>
</body>
</html>
<form onchange="serialize(this)">
<select name="status">
<option value="*">All</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
<select name="size">
<option value="*">All</option>
<option value="small">Small</option>
<option value="big">Big</option>
</select>
check here
The following is the code for validating a form with radio buttons, text boxes and dropdown list. The javascript for validating radio buttons and textbox works. But the javascript for dropdown doesn't work. Can you tell me what is it that I've done wrong?
Please help!
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validateForm()
{
var checked = null;
var name1 = document.forms["information"]["firstname"].value;
var n=name1.split(" ");
var name = n[0];
var sex = document.forms["information"]["sex"];
var e = document.getElementById("prof1");
var strUser = e.options[e.selectedIndex].value;
var strUser1 = e.options[e.selectedIndex].text;
if(name == null || name== "")
{
alert('Enter First Name');
return false;
}
for (var i=0;i<2;i++)
{
if(sex[i].checked)
{
checked = sex[i];
return true;
}
}
if (checked == null)
{
alert(' Enter Sex');
return false;
}
if(strUser==0)
{
alert("Enter Profession");
return false;
}
}
</script>
</head>
<body>
<form name="information" onsubmit="return validateForm()" method="post">
<text style="color:red">*</text> First Name: <input type="text" name="firstname"><br><br>
Last Name: <input type="text" name="lastname"><br><br>
<text style="color:red">*</text> Sex: <input type="radio" name="sex" value="Male"> Male
<input type="radio" name="sex" value="Female"> Female <br><br>
<text style="color:red">*</text> Profession:
<select id="prof1">
<option value="0"> Select </option>
<option value="1"> Engineer </option>
<option value="2"> Doctor </option>
<option value= "3"> Lawyer </option>
<option value="4"> Others </option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
if(sex[i].checked)
{
checked = sex[i];
return true;
}
Remove return true above.
for ( var i = 0; i < 2; i++) {
if (sex[i].checked) {
checked = sex[i];
//return true;
}
}
Uncomment the return true;
The return statement inside the loop return the value and this results to non-execution of code written after this return statement.
2.
if(strUser==0)
replace with
if(strUser=="0")
Reason :
http://www.w3schools.com/jsref/prop_select_selectedindex.asp
http://www.w3schools.com/jsref/prop_option_value.asp