I have the following HTML file written in the script editor within google sheets:
<body>
<form>
<div class="even group">
<input type="text" id="yourName" class="contactNameInput" name="yourName" placeholder="Your name">
<input type="text" id="yourPosition" class="contactNameInput" name="yourPosition" placeholder="Your position">
</div>
<div class="odd group">
<input type="checkbox" id="check1" class="check" checked>
<input type="text" id="name1" class="contactNameInput" name="toAddress1">
<input type="text" id="contactName1" class="contactNameInput mailName" name="contactName1">
<input type="text" id="time1" class="contactNameInput hidden mailTime" name="time1">
<input type="text" id="day1" class="contactNameInput hidden mailDay" name="day1">
<input type="text" id="date1" class="contactNameInput hidden mailDate" name="date1">
<textarea class="additional contactNameInput" id="additional1" name="additional1" placeholder="Additional requests..."></textarea>
<div class="preview1"></div>
</div>
<div class="even group">
<input type="checkbox" id="check2" class="check" checked>
<input type="text" name="toAddress2" id="name2" class="contactNameInput">
<input type="text" id="contactName2" class="contactNameInput mailName" name="contactName2">
<input type="text" id="time2" class="contactNameInput hidden mailTime" name="time2">
<input type="text" id="day2" class="contactNameInput hidden mailDay" name="day2">
<input type="text" id="date2" class="contactNameInput hidden mailDate" name="date2">
<textarea class="additional contactNameInput" id="additional2" name="additional2" placeholder="Additional requests..."></textarea>
<div class="preview1"></div>
</div>
// ... there are 33 of these objects in total - all identical except for the ascending Ids...
<div class="odd group">
<input type="checkbox" id="check33" class="check" checked>
<input type="text" name="toAddress33" id="name33" class="contactNameInput">
<input type="text" id="contactName33" class="contactNameInput mailName" name="contactName33">
<input type="text" id="time33" class="contactNameInput hidden mailTime" name="time33">
<input type="text" id="day33" class="contactNameInput hidden mailDay" name="day33">
<input type="text" id="date33" class="contactNameInput hidden mailDate" name="date33">
<textarea class="additional contactNameInput" id="additional33" name="additional33" placeholder="Additional requests..."></textarea>
<div class="preview1"></div>
</div>
<button type="submit" class="btn btn-primary googleGreen" id="load" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Sending">Invite hotels</button>
</form>
<script>
$(".additional").focus(function(){
$('.dearName').html(function() {
return $(this)
.closest('.preview1')
.siblings('.mailName')
.val();
});
$('.meetingDay').html(function() {
return $(this)
.closest('.preview1')
.siblings('.mailDay')
.val();
});
$('.meetingTime').html(function() {
return $(this)
.closest('.preview1')
.siblings('.mailTime')
.val();
});
$('.meetingDate').html(function() {
return $(this)
.closest('.preview1')
.siblings('.mailDate')
.val();
});
$(this).siblings('div:first').slideDown();
}).blur(function() {
$(this).siblings('div:first').slideUp();
});
$(".additional").keyup(function() {
$(this).next('div').find('.addedText').html($(this).val());
});
$(".preview1").html("<p> Dear <span class='dearName'></span></p> <br> <p>Please can we meet on <span class='meetingDay'></span> <span class='meetingDate'></span> at <span class='meetingTime'></span>.</p><br><p><span class='addedText'></span>If you could kindly let me know if you are able to confirm that would be great.</p><br><p>Many thanks and I look forward to hearing from you soon.</p><br><p>Yours sincerely,</p>");
// $(".dearName").html($(".dearName").prev('.preview1').siblings().find('.mailName')val());
var idArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33];
var hotelName = "";
var hotelAddress = "";
var hotelContact = "";
var hotelTel = "";
var hotelEmail = "";
function onSuccess(test){
// var hotelArray = test;
for(var i=0; i<idArray.length; i++){
hotelName = test[i].name;
hotelAddress = test[i].address;
hotelContact = test[i].contact;
hotelTel = test[i].tel;
hotelEmail = test[i].email;
time = test[i].time;
day = test[i].day;
date = test[i].date;
$("#name" + idArray[i]).val(hotelEmail);
$("#contactName" + idArray[i]).val(hotelContact);
$("#time" + idArray[i]).val(time);
$("#day" + idArray[i]).val(day);
$("#date" + idArray[i]).val(date);
}
} google.script.run.withSuccessHandler(onSuccess).findHotel();
window.onload = function() {
document.getElementsByTagName('form')[0]
.addEventListener('submit', function(e) {
e.preventDefault();
google.script.run
.withSuccessHandler(function(result) {
google.script.host.close()
})
.withFailureHandler(function(result) {
console.log("f %s", result)
})
//.withFailureHandler(function(result){toastr.error('Process failed', result)})
.sendEmail(e.currentTarget);
})};
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 15000);
});
$(".check").click(function(){
$(this).parent().toggleClass("checkDisabled");
$(this).siblings().toggleClass("disabledInput");
if($(this).siblings().hasClass("disabledInput")) {
$(this).siblings().attr("disabled", true);
} else {
$(this).siblings().attr("disabled", false);
}})
$(this).siblings().attr("disabled", true);
$('.dearName').html(function() {
return $(this)
.closest('.preview1')
.siblings('.mailName')
.val();
});
</script>
</body>
Each of the class 'group' divs within the form represents one client and I have a .gs file which then sends an email on submit to all clients so long as there is an email address in the relevant field:
function sendEmail(form) {
const sSheet = SpreadsheetApp.getActiveSpreadsheet();
const file = DriveApp.getFileById(sSheet.getId());
const documentUrl = file.getUrl();
/* var toEmail = form.toAddress;
var ccEmail = form.ccAddress;
var fromEmail = "****@****.com";
var subject = form.subject;
var message = form.message; */
var toEmail = "";
var fromEmail = "****@****.com";
var message = "";
var hotelAddresses = [
form.toAddress1,
form.toAddress2,
form.toAddress3,
form.toAddress4,
form.toAddress5,
form.toAddress6,
form.toAddress7,
form.toAddress8,
form.toAddress9,
form.toAddress10,
form.toAddress11,
form.toAddress12,
form.toAddress13,
form.toAddress14,
form.toAddress15,
form.toAddress16,
form.toAddress17,
form.toAddress18,
form.toAddress19,
form.toAddress20,
form.toAddress21,
form.toAddress22,
form.toAddress23,
form.toAddress24,
form.toAddress25,
form.toAddress26,
form.toAddress27,
form.toAddress28,
form.toAddress29,
form.toAddress30,
form.toAddress31,
form.toAddress32,
form.toAddress33,
];
var contactNames = [
form.contactName1,
form.contactName2,
form.contactName3,
form.contactName4,
form.contactName5,
form.contactName6,
form.contactName7,
form.contactName8,
form.contactName9,
form.contactName10,
form.contactName11,
form.contactName12,
form.contactName13,
form.contactName14,
form.contactName15,
form.contactName16,
form.contactName17,
form.contactName18,
form.contactName19,
form.contactName20,
form.contactName21,
form.contactName22,
form.contactName23,
form.contactName24,
form.contactName25,
form.contactName26,
form.contactName27,
form.contactName28,
form.contactName29,
form.contactName30,
form.contactName31,
form.contactName32,
form.contactName33,
];
var days = [
form.day1,
form.day2,
form.day3,
form.day4,
form.day5,
form.day6,
form.day7,
form.day8,
form.day9,
form.day10,
form.day11,
form.day12,
form.day13,
form.day14,
form.day15,
form.day16,
form.day17,
form.day18,
form.day19,
form.day20,
form.day21,
form.day22,
form.day23,
form.day24,
form.day25,
form.day26,
form.day27,
form.day28,
form.day29,
form.day30,
form.day31,
form.day32,
form.day33,
];
var dates = [
form.date1,
form.date2,
form.date3,
form.date4,
form.date5,
form.date6,
form.date7,
form.date8,
form.date9,
form.date10,
form.date11,
form.date12,
form.date13,
form.date14,
form.date15,
form.date16,
form.date17,
form.date18,
form.date19,
form.date20,
form.date21,
form.date22,
form.date23,
form.date24,
form.date25,
form.date26,
form.date27,
form.date28,
form.date29,
form.date30,
form.date31,
form.date32,
form.date33,
];
var times = [
form.time1,
form.time2,
form.time3,
form.time4,
form.time5,
form.time6,
form.time7,
form.time8,
form.time9,
form.time10,
form.time11,
form.time12,
form.time13,
form.time14,
form.time15,
form.time16,
form.time17,
form.time18,
form.time19,
form.time20,
form.time21,
form.time22,
form.time23,
form.time24,
form.time25,
form.time26,
form.time27,
form.time28,
form.time29,
form.time30,
form.time31,
form.time32,
form.time33,
];
var additionalInfo = [
form.additional1,
form.additional2,
form.additional3,
form.additional4,
form.additional5,
form.additional6,
form.additional7,
form.additional8,
form.additional9,
form.additional10,
form.additional11,
form.additional12,
form.additional3,
form.additional14,
form.additional15,
form.additional16,
form.additional17,
form.additional18,
form.additional19,
form.additional20,
form.additional21,
form.additional22,
form.additional23,
form.additional24,
form.additional25,
form.additional26,
form.additional27,
form.additional28,
form.additional29,
form.additional30,
form.additional31,
form.additional32,
form.additional33,
];
for(var i = 0; i<times.length; i++){
var subject = "Meeting - " + days[i] + ", " + dates[i] + " at " + times[i];
toEmail = hotelAddresses[i];
message = "Dear " + contactNames[i] + ","
+"<br><br>"+
"Please can we meet on " + days[i] + " " + dates[i] + " at " + times[i] + "." + "<br>" + "<br>" +
additionalInfo[i] +
" If you could kindly let me know if you are able to confirm that would be great." + "<br>" + "<br>" +
"Many thanks and I look forward to hearing from you soon." + "<br>" + "<br>" +
"Yours sincerely," + "<br>" + "<br>" +
form.yourName + "<br>" + "<br>"
+ "<em><b>" + form.yourPosition + "</b></em> <br><br>" +
"<span style='color:#0e216d'><b> Company name </b>" + "<br>" +
"Company address</span><br>" +
"<img src='companylogo.jpg' style='width: 50%; margin-top: 10px'>";
if(toEmail) {
GmailApp.sendEmail(
toEmail, // recipient
subject, // subject
'test', { // body
htmlBody: message // advanced options
}
);
}}
}
However, as well as not sending an email when there is no address entered, I need to stop the email from sending when the checkbox is not checked. I'm not quite sure where to start with this...
