I am building a simple form with text fields as well as an image upload and checkbox options.
I need people to be able to select multiple checkboxes, and those need to be passed to a database.
All the form fields are passing to the database with no issue, except for the Videos(checkbox) field.
Because of the nature of the form, I am required to use client side javascript to pass the form fields via json to SSJS.
At this point, the checkbox values do post to the console log, but they do not make their way to the database. Any help will be much appreciated.
var btn = document.getElementById("button");
btn.addEventListener("click", function() {
var files = document.getElementById("file").files;
if (files.length > 0) {
getBase64(files[0]);
}
});
function getChcked() {
var form = document.getElementById('myform');
var chks = form.querySelectorAll('input[type="checkbox"]');
var checked = [];
for(var i = 0; i < chks.length; i++){
if(chks[i].checked){
checked.push(chks[i].value)
}
}
return checked;
};
var Videos = '';
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
//prepare data to pass to processing page
var fileEncoded = reader.result;
var base64enc = fileEncoded.split(";base64,")[1];
var fullFileName = document.getElementById("file").files[0].name;
var fileName = fullFileName.split(".")[0];
var assetName = fullFileName.split(".")[1];
var AgencyName = document.getElementById("AgencyName").value;
var AgencyPhone = document.getElementById("AgencyPhone").value;
var AgencyEmail = document.getElementById("AgencyEmail").value;
var AgencyWebsite = document.getElementById("AgencyWebsite").value;
var Videos = console.log(getChcked());
fetch("processingpage", { //provide URL of the processing page
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
base64enc: base64enc,
fileName: fileName,
assetName: assetName,
AgencyName: AgencyName,
AgencyPhone: AgencyPhone,
AgencyEmail: AgencyEmail,
AgencyWebsite: AgencyWebsite,
Videos: Videos
})
});
};
}
<div class="form-group">
<label class="col-md-4 control-label" for="Videos">Select which video(s) you’d like co-branded:</label>
<div class="col-md-4">
<div class="checkbox">
<label for="Videos-0">
<input type="checkbox" name="Videos" id="Videos-0" value="The Flour Child">
The Flour Child
</label>
</div>
<div class="checkbox">
<label for="Videos-1">
<input type="checkbox" name="Videos" id="Videos-1" value="The Loose Tooth Situation">
The Loose Tooth Situation
</label>
</div>
console.log returns undefined, so you are assigning undefined to Videos
var Videos = console.log(getChcked()); // equivalent to var Videos=undefined;
Related
I have followed a tutorial "Create HTML Form that Moves through RecordSet on Google Sheets" done by Code With Curt.
https://www.youtube.com/watch?v=V9ptq7tZV50&t=152s
The project doesn't look that complicated. It is a simple CRUD app that I want to run in a modal dialog in google sheets, I am a newbie, I really tried to understand the code that I was copying from the video and not make any typos. The form shows up OK from the custom menu but it is not populating with the data from the sheet. The only error I can see is in the console which says "Uncaught ReferenceError: loadRecords is not defined" I have double checked the variable and function names but just can't see the error.
Any help would be appreciated.
Code.gs
function getList()
{
var url = 'https://docs.google.com/spreadsheets/d/1QkSdtybPHA9IrWH2VPw44WtQ9dN_-9KjRVNOuCylMCk/edit#gid=0';
var ss= SpreadsheetApp.openByUrl(url);
//var ss = SpreadsheetApp.getActiveSpreadsheet();
var recordSheet = ss.getSheetByName("WebInscriptions");
var getLastRow = recordSheet.getLastRow();
return recordSheet.getRange(2, 1, getLastRow -1, 9).getValues();
}
function startForm()
{
var form = HtmlService.createHtmlOutputFromFile("Modal");
SpreadsheetApp.getUi().showModalDialog(form, 'Manage New Submissions');
}
function addMenu()
{
var ui = SpreadsheetApp.getUi()
ui.createMenu('HR-Recruitment')
.addItem('New Submissions','startForm')
.addItem('Manage Recruits','startForm')
.addToUi();
}
function onOpen(e)
{
addMenu;
}
Modal.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function loadRecords(record)
{
google.script.run.withSuccessHandler
(function(ar)
{
var record = document.getElementById("record").value;
//console.log (ar);
//console.log (record);
var recordCount = 0;
ar.forEach(function(item, index)
{
if(index == record - 1)
{
document.getElementById("inscriptionDate").value = item[0];
document.getElementById("firstName").value = item[1];
document.getElementById("lastName").value = item[2];
document.getElementById("gender").value = item[3];
document.getElementById("email").value = item[4];
document.getElementById("telNumWhatsApp").value = item[5];
document.getElementById("location").value = item[6];
document.getElementById("visaImageUpload").value = item[7];
document.getElementById("commentMessage").value = item[8];
document.getElementById("referrer").value = item[9];
}
recordCount ++;
});
console.log (recordCount);
document.getElementById("maxRecord").value = recordCount;
}).getList();
}
function NextRecord()
{
var record = document.getElementById("record").value;
var maxRecord = document.getElementById("maxRecord").value;
var nextRecord = Number record + 1;
if(nextRecord <= maxRecord)
{
document.getElementById ("record").value = nextRecord;
loadRecords();
}
}
function PreviousRecord()
{
var record = document.getElementById("record").value;
var previousRecord = Number record - 1;
if(previousRecord >= 1)
{
document.getElementById ("record").value = previousRecord;
loadRecords();
}
}
//loadRecords();
</script>
</head>
<body>
Inscription Date: <input type="text" id="inscriptionDate"/><br>
First Name: <input type="text" id="firstName"/><br>
Last Name: <input type="text" id="lastName"/><br>
Gender: <input type="text" id="gender"/><br>
Email: <input type="text" id="email"/><br>
Telephone Number (WhatsApp): <input type="text" id="telNumWhatsApp"/><br>
Location: <input type="text" id="location"/><br>
VISA Image Upload: <input type="text" id="visaImageUpload"/><br>
Comment or Message: <input type="text" id="commentMessage"/><br>
Referrer: <input type="text" id="referrer"/><br>
<input type="button" value = "PREVIOUS" onclick="PreviousRecord"/>
<input type="text" value="1" id="record" size="2px"/>
<input type="hidden" id="maxRecord"/>
<input type="button" value = "NEXT" onclick="NextRecord"/>
<script>loadRecords();</script>
</body>
</html>
Google Sheet image
Regarding the specific error, the parenthesis are missing in two lines:
var nextRecord = Number record + 1;
var previousRecord = Number record - 1;
Correct syntax
var nextRecord = Number(record) + 1;
var previousRecord = Number(record) - 1;
As mentioned in the Yuri's answer, the video that you used looks to have some problems. From my point of view it's obsolete, one hint is that it's using the now called "Classic Editor" instead of the current default editor. It's weird that the comment with the code was removed, next time start with a more recent example and once you have learned how to debug and learned the differences between the "old" Google Apps Script and the new (i.e. old runtime based on Mozilla Rhino, and the new runtime Chrome V8), go to old tutorials / examples.
P.S. It might be possible that if you are using new editor that your project is using the new runtime, if you want to try the code as is in the video, try enabling the Rhino runtime, for details see https://developers.google.com/apps-script/guides/v8-runtime.
Related
How to go about debugging JavaScript in the HtmlService in Google Scripts
Debugging client side code from Google Apps Script
Given that the youtube guy removed his code and doesn't answer on comments it's obviously that there is something terribly wrong with his code.
As far as I can tell the main problem was that you can't return an array from the function getList() into the HTML form. You need to convert it into a string with return JSON.stringify(array) and then (within HTML form) to convert it back into an array with var array = JSON.parse(array).
Basically, if you add the JSON.stringify and JSON.parse and add the brackets as #Rubén said, it should work.
Just in case, here is my a bit rewritten code:
Modal.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function NextRecord() {
var record = document.getElementById("record").value;
var maxRecord = document.getElementById("maxRecord").value;
var nextRecord = +record + 1;
if(nextRecord <= maxRecord) {
document.getElementById ("record").value = nextRecord;
google.script.run.withSuccessHandler(loadRecords).getList();
}
}
function PreviousRecord() {
var record = document.getElementById("record").value;
var previousRecord = +record - 1;
if(previousRecord >= 1) {
document.getElementById ("record").value = previousRecord;
google.script.run.withSuccessHandler(loadRecords).getList();
}
}
function loadRecords(ar) {
ar = JSON.parse(ar); // <--- here we parse the string back into an array
var record = document.getElementById("record").value;
document.getElementById("maxRecord").value = ar.length;
var item = ar[+record-1];
document.getElementById("inscriptionDate").value = item[0];
document.getElementById("firstName").value = item[1];
document.getElementById("lastName").value = item[2];
document.getElementById("gender").value = item[3];
document.getElementById("email").value = item[4];
document.getElementById("telNumWhatsApp").value = item[5];
document.getElementById("location").value = item[6];
document.getElementById("visaImageUpload").value = item[7];
document.getElementById("commentMessage").value = item[8];
document.getElementById("referrer").value = item[9];
}
google.script.run.withSuccessHandler(loadRecords).getList();
</script>
</head>
<body>
Inscription Date: <input type="text" id="inscriptionDate"/><br>
First Name: <input type="text" id="firstName"/><br>
Last Name: <input type="text" id="lastName"/><br>
Gender: <input type="text" id="gender"/><br>
Email: <input type="text" id="email"/><br>
Telephone Number (WhatsApp): <input type="text" id="telNumWhatsApp"/><br>
Location: <input type="text" id="location"/><br>
VISA Image Upload: <input type="text" id="visaImageUpload"/><br>
Comment or Message: <input type="text" id="commentMessage"/><br>
Referrer: <input type="text" id="referrer"/><br>
<input type="button" value = "PREVIOUS" onClick="PreviousRecord()"/> // <-- don't forget the brackets here
<input type="text" value = "1" id = "record" size = "2px"/>
<input type="hidden" value = "" id = "maxRecord"/>
<input type="button" value = "NEXT" onClick="NextRecord()"/> // <-- don't forget the brackets here
</body>
</html>
Code.gs
function getList(){
var url = 'https://docs.google.com/spreadsheets/d/1QkSdtybPHA9IrWH2VPw44WtQ9dN_-9KjRVNOuCylMCk/edit#gid=0';
var ss= SpreadsheetApp.openByUrl(url);
// var ss = SpreadsheetApp.getActiveSpreadsheet();
var recordSheet = ss.getSheetByName("WebInscriptions");
var lastRow = recordSheet.getLastRow();
var list = recordSheet.getRange(2, 1, lastRow-1, 10).getValues();
return JSON.stringify(list); // <--- here we return a string instead of the array
}
function startForm() {
var form = HtmlService.createHtmlOutputFromFile("Modal.html");
SpreadsheetApp.getUi().showModalDialog(form, 'Manage New Submissions');
}
function addMenu() {
var ui = SpreadsheetApp.getUi()
ui.createMenu('HR-Recruitment')
.addItem('New Submissions','startForm')
.addItem('Manage Recruits','startForm')
.addToUi();
}
function onOpen(e) { addMenu() }
Edit - Updated JS code to display suggestions made in comments, still having issues.. Now the button <input id="edit" type="submit" value="Submit"> won't go to edit.html, instead it is returning action.html? It is nested inside of the editForm?
I have a simple form which I have managed to learn to submit, add, remove, and display bookings using the localStorage (thanks to those who helped on here!).
My last task is to amend a booking, I think I am almost there with it, but not sure how to call the indexes (excuse my jargon), to replace the values.
The form submits and the web address reads something like edit.html?OldFirstName=NewFirstName&OldLastName=NewLastName, however the values don't update in storage, and it throws an error saying
Uncaught TypeError: Cannot read property 'fname' of undefined`.
I expected this to happen as I know I am not finding the values correctly, but I can't figure out how I should be writing it out? My thought process was that it would be similar to the original submit function but with the [i] values for fname and lname?
Here's my JS code - if you need anything else from me let me know:
// ~~~ add bookings to localStorage
var bookings = localStorage.getItem("bookings");
$("#submit").click(function () {
bookings = (bookings) ? JSON.parse(bookings) : [];
var newBookings = {
fname: $('#fname').val(),
lname: $('#lname').val()
}
bookings.push(newBookings);
var json = JSON.stringify(bookings);
window.localStorage.setItem("bookings", json);
});
// ~~~ edit bookings in localStorage
$("#edit").click(function (e) {
e.preventDefault();
bookings = (bookings) ? JSON.parse(bookings) : [];
var parent_form = $('#editForm');
var fname = parent_form.find('.input:eq(0)').val();
var lname = parent_form.find('.input:eq(1)').val();
var newBookings = {
fname: fname,
lname: lname
}
bookings.push(newBookings);
var json = JSON.stringify(bookings);
window.localStorage.setItem("bookings", json);
});
// ~~~ display bookings in browser
function showBooking(i) {
var bookingResult = document.getElementById("result");
var ul = document.createElement("ul");
var bookingItems = JSON.parse(localStorage.getItem("bookings")) || [];
bookingResult.innerHTML = "";
for (let i = 0; i < bookingItems.length; i++) {
bookingResult.innerHTML += `<div class="card card-body bg-light m-4">
<h3>${bookingItems[i].fname + " " + bookingItems[i].lname}
<button onclick="deleteBooking(${i})" class="btn btn-danger text-light ">Delete</button>
<button onclick="editBooking(${i})" class="btn btn-danger text-light ">Edit</button>
</h3>
</div>`;
}
}
// ~~~ edit bookings in browser
function editBooking(i) {
var bookingResult = document.getElementById("editAppt");
var bookingItems = JSON.parse(localStorage.getItem("bookings")) || [];
bookingResult.innerHTML =
`<form id="editForm" name="editForm" onsubmit="return editForm(this)" class="col-sm-6">
<div class="row">
<input type="text" class="input" id="fname_${i}" placeholder="${bookingItems[i].fname}" name="${bookingItems[i].fname}" required>
<input type="text" id="lname_${i}" class="input" placeholder="${bookingItems[i].lname}" name="${bookingItems[i].lname}" required>
<input id="edit" type="submit" value="Submit">
</div>
</form>`;
}
// ~~~ delete bookings from localStorage
function deleteBooking(i){
var bookingItems = JSON.parse(localStorage.getItem("bookings"));
bookingItems.splice(i, 1);
localStorage.setItem("bookings", JSON.stringify(bookingItems));
showBooking();
}
// ~~~ form submit handlers
function setAction(form) {
form.action = "action.html";
}
function editForm(form) {
form.action = "edit.html";
}
I can see that the issue comes from this like :
$("#edit").click(function (i) {
You expect the click event to return an index but it's not, the i will represent the event object, so you may need to use $(this) to get the related inputs like :
$("#edit").click(function (e) {
var parent_form = $(this.form);
var fname = parent_form.find('.input:eq(0)').val();
var lname = parent_form.find('.input:eq(1)').val();
....
NOTE: The id must not be duplicated, so you need to avoid that, you may use prefix like:
<input type="text" class="input" id="fname_${i}" placeholder="${bookingItems[i].fname}" name="${bookingItems[i].fname}" required>
<input type="text" class="input" id="lname_${i}" placeholder="${bookingItems[i].lname}" name="${bookingItems[i].lname}" required>
I have a form with multiple checkboxes in it and when I click them, I want to add/remove the key-value pairs (name of the input + true/false) in one single cookie.
When I click on the checkboxes only the first pair gets shown in console.log.
This is what I ended up with so far:
HTML:
<form class="form">
<input class="input" name="expert_id_1" type="checkbox" />
<input class="input" name="expert_id_2" type="checkbox" />
<input class="input" name="expert_id_3" type="checkbox" />
<input class="input" name="expert_id_4" type="checkbox" />
</form>
JS:
function setCookie() {
var customObject = {};
var inputName = $('.input').attr('name');
customObject[inputName] = $('.input').prop('checked');
var jsonString = JSON.stringify(customObject);
document.cookie = 'cookieObject=' + jsonString;
console.log(jsonString);
}
function getCookie() {
var nameValueArray = document.cookie.split('=');
var customObject = JSON.parse(nameValueArray[1]);
$('.input').prop('checked') = customObject[inputName];
}
$('.input').each(function() {
$(this).on('click', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
setCookie();
});
});
Your cookie is being overrided and it might only store the first checkbox info. Also to set the prop value, you have to pass it as a second parameter.
This should update the cookie when clicked and also be able to set the values from the cookie.
function updateCookie($input) {
var cookieObject = getCookieObject();
var inputName = $input.attr('name');
cookieObject[inputName] = $input.attr('value');
var jsonString = JSON.stringify(cookieObject);
document.cookie = 'cookieObject=' + jsonString;
console.log(jsonString);
}
function setFromCookie(){
var cookieObject = getCookieObject();
for(var inputName in cookieObject)
if(cookieObject.hasOwnProperty(inputName))
$(`.input[name="${inputName}"]`).prop('checked', cookieObject[inputName]);
}
function getCookieObject() {
var nameValueArray = document.cookie.split('=');
var cookieObject = {};
if(nameValueArray.length >= 2)
cookieObject = JSON.parse(nameValueArray[1]);
return cookieObject;
}
$('.input').each(function() {
var $this = $(this);
$this.on('click', function() {
$this.attr('value', String($this.is(':checked')))
updateCookie($this);
});
});
Although I would recomend you to use a URLSearchParams object to encode and decode the parameters, since you are relying on the fact that "=" is not inside the JSON string.
Hello ladies and gentleman.
Currently I am trying to create a event listener to all forms that I have in my website, but... (I'm a backend developer so frontend it's nightmare for me) so now I'm trying to work with JavaScript (pure Vanilla JS) without any framework or nothing... and I use ES5.
So what I want to do is to send the name of the differents <form> that we have but I'm struggling so hard with this one because I am using the querySelector('form') and I JUST figured that it is not correct because it will only select one <form> so the correct way must use this querySelectorAll('form') BUT there's another problem by "standard" of my company we not define the name of the forms, so we "define" our forms with action='/searchExample currently we have about 32 nameless <form> and we only have two forms with name login_form and registration (only for those we defined the name)
function formSubmitTrack() {
var formName = '';
var form = document.querySelector('form');
form.addEventListener('submit', function() {
formName = form.getAttribute('action')
? form.getAttribute('action')
: form.getAttribute('name');
var data = {
event: 'e_formSubmit',
formName: formName
};
send(data);
});
I will be very grateful if someone can help me to this particular case because I don't want to create 32 function form1...32() for per <form> this code for example will apply for one form:
So I was trying to this one: (step 1 to capture the values)
function formSubmitTrackAll() {
var form = document.querySelectorAll('form');
for (let i = 0; i < form.length; i++) {
const element = form[i];
var formName = element.name;
var formAction = element.getAttribute('action');
console.log(formName);
console.log(formAction);
if(formName === ""){
var data = {
event: 'e_forSubmit',
formName: formAction,
}
} else {
var data = {
event: 'e_forSubmit',
formName: formName,
}
}
send(data);
}
}
so step 2, is to trigger the eventListener('click') for when the user clicks the form, this is my code but I'm confused whit this part for the eventListener:
function formSubmitTrackAll() {
var form = document.querySelectorAll('form');
for (let i = 0; i < form.length; i++) {
const element = form[i];
var formName = element.name;
var formAction = element.getAttribute('action');
console.log(formName);
console.log(formAction);
if(formName === ""){
formName.addEventListener('click', function() {
var data = {
event: 'e_forSubmit',
formName: formAction,
}
})
} else {
formAction.addEventListener('click', function() {
var data = {
event: 'e_forSubmit',
formName: formAction,
}
})
}
send(data);
}
}
and I use this HTML code to test
<form action="something">
<input type="email"></input>
<button class="btn btn-safe col-xs-6"></button>
</form>
<br><br>
<form name='registration'>
<button class="btn btn-security col-xs-6"></button>
</form>
Thank you for your patience.
I am not sure what you are asking.
function formSubmitTrackAll() {
var form = document.querySelectorAll('form');
for (let i = 0; i < form.length; i++) {
const element = form[i];
var formName = element.name;
console.log(formName);
if(formName === ""){
form[i].addEventListener('click', function() {
var formAction = element.getAttribute('action');
var data = {
event: 'e_forSubmit',
formName: formAction,
}
console.log(data);
});
} else {
form[i].addEventListener('click', function() {
var formAction = element.getAttribute('name');
var data = {
event: 'e_forSubmit',
formName: formAction,
}
console.log(data);
});
}
//send(data);
}
}
formSubmitTrackAll();
<form action="something">
<input type="email"></input>
<button class="btn btn-safe col-xs-6"></button>
</form>
<br><br>
<form name='registration'>
<button class="btn btn-security col-xs-6"></button>
</form>
You need your send(data) call to be inside of the click event handlers, not outside. As it currently stands, you're calling send(data) while looping through the forms instead.
I do not know if I interpret your question correctly but I understand that you require that when sending a form, prior to being sent, obtain the event and name based on the conditions you mention. I assume that the form will be sent using POST so you can:
Get the data
Create hidden type inputs and assign them the corresponding data values
Attach these inputs to the form
Send the form
Please consider this example
Having this set of forms
<form name="login_form"><button type="submit">Send</button></form>
<form name="registration"><button type="submit">Send</button></form>
<form action="action_name1"><button type="submit">Send</button></form>
<form action="action_name2"><button type="submit">Send</button></form>
<form action="action_name3"><button type="submit">Send</button></form>
<form action="action_name4"><button type="submit">Send</button></form>
<form action="action_name5"><button type="submit">Send</button></form>
Given this logic
var forms = document.querySelectorAll('form');
function handleforms(forms) {
for (var i = 0; i < forms.length; i++) {
var data = { event: 'e_formSubmit' };
var form = forms[i];
data.name = form.hasAttribute('name') ? form.getAttribute('name') : form.getAttribute('action');
form.addEventListener('click', function(event) {
event.preventDefault();
var eventInput = document.createElement('input');
var nameInput = document.createElement('input');
eventInput.setAttribute('type', 'hidden');
eventInput.setAttribute('name', 'event');
eventInput.setAttribute('value', data.event);
nameInput.setAttribute('type', 'hidden');
nameInput.setAttribute('name', 'name');
nameInput.setAttribute('value', data.name);
form.appendChild(eventInput);
form.appendChild(nameInput);
form.submit(); // In processing action ypu will have access to event and name
})
}
}
handleforms(forms);
I hope it is useful for you
I created multiplied input fields:
<div class="form-text-field first-name field-group">
<input data-index="1" type="text" id="firstName1" class="signup-input firstName" name="first[1]" placeholder="">
</div>
<div class="form-text-field email field-group">
<input type="text" data-index="1" id="inputMail1" class="signup-input text-value ignore" name="email[1]" placeholder="${message(code:"signup.redesign.placeholder.eg.email")}"/>
<span class="common-sprite disNone sign-up-cross first clone"></span>
</div>
I have a code in the JS file which clone every input.
I have to create arrays from the values of the inputs (one for the email, and one for the first name).
Here is the function:
var arrEmail = []
var arrName = []
function add() {
var obj = {};
var partner = {}
$('.email input[type="text"]').each(function() {
obj[this.data-index] = this.value;
});
arrEmail.push(obj)
$('.first-name input[type="text"]').each(function() {
partner[this.data-index] = this.value;
});
arrName.push(partner)
console.log(arrEmail[0])
}
I didn't succeed to get the arrays in this code. How do I fix it?
You have some mistakes.
Wrong syntax in line $('.email input[type="text"]').each(function({. You forgot to close bracket.
I don't understand why you tried get value this strange manner. You included jQuery. Use it!
I fix your code.
var arrEmail = [];
var arrName = [];
function add() {
var obj = {};
var partner = {};
$('.email input[type="text"]').each(function(item) {
obj[$(this).data('index')] = $(this).val();
});
arrEmail.push(obj);
$('.first-name input[type="text"]').each(function() {
obj[$(this).data('index')] = $(this).val();
});
arrName.push(obj);
console.log(arrEmail);
console.log(arrName);
}
$('#test').on('click', add);
jsFiddle demo
Upd #1
Haven't shown all conditions. Fixed it.
Use $(this).data('index') instead of this.data-index
You can handle this with a single array:
var myUsers= [];//this might be object that you store the user information
$('.first-name input[type="text"]').each(function(item) {
//first create the user information
var myUser = new Object();
myUser.Username = $(this).val();
myUser.Email= $(this).next().val();
//then add the user information to the myUsers array
myUsers.push(myUser );
});