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...
A bit of restructuring of your code is probably going to help you a lot here. For example, the hotelAddresses array is currently a manually created list of addresses - hard to maintain. I'd begin by using the group class on all of the divs to your advantage, as you can select every single one, in order, using the document.getElementsByClassName("group") selector. This will return an array of all your group elements.
Now that we have an array of all these groups, we can process them in a much more concise way. For example, creating that hotel addresses array becomes as simple as:
var hotelAddresses = [], groupElements = document.getElementsByClassName("group")
for (var i = 1; i < groupElements.length; i++) {
var isChecked = groupElements[i].getElementsByClassName("check")[0].checked
var address = groupElements[i].getElementsByClassName("contactNameInput")[0].value
if (isChecked && address != "") { // Add if is checked and has an address
hotelAddresses.push(address)
}
}
You can easily add the code for the contactNames and other arrays in to this same loop. Maybe even another data structure which is an array of your groups for much easier access.
var groups = []
... // Loop code
groups.push({
address: groupElements[i].getElementsByClassName("contactNameInput")[0].value,
contactName: ...
})
You get the idea! Hope this helps you out a bit.
I am using jquery file upload plugin for uploading files to my server but when server returns a json how to display that data without my page refreshing.I know that many posts says using iframe we can acheive i am very new to jquery and ajax can any figure it out and help me thank you in advance.
$('#fileupload').fileupload({
xhrFields: {withCredentials: true},
url: "fileUpload.do?",
type:"POST",
autoUpload: true,
formdata:{name:'FolderId',value:getfolderId()},
});
function getfolderId(){
var FolderId
alert();
$('#fileupload').on("click",function(){
FolderId=document.getElementById('currentFolder').value;
document.getElementById('selectedFolder').value = FolderId;
});
return FolderId;
}`
</form>`<form id="fileupload" on action="fileUpload.do" method="POST" enctype="multipart/form-data">
<div class="row fileupload-buttonbar">
<label for="form-upload">
<img src="htdocs/images/add_file.png"
style="width: 20px; height: 20px; border: 0" >
</label>
<input id="form-upload" type="file" name="upload" multiple style="opacity: 0; filter:alpha(opacity: 0);">
<im:hidden name="selectedFolder" id="selectedFolder" value="1" />
</div>
<div class="col-lg-5 fileupload-progress fade">
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<div class="progress-extended"> </div>
</div>
</div>
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>`
$('#addFile-link').bind("click",function(){
var FolderId
FolderId=document.getElementById('currentFolder').value;
document.getElementById('selectedFolder').value = FolderId;
if( FolderId==" " || FolderId==0){
$('#input').prop('disabled', true);
showFileMSg();
//alert("kindly select a folder to upload files");
}
else{
$('#input').prop('disabled', false);
$('#fileupload').fileupload({
xhrFields: {withCredentials: true},
url: "fileUpload.do?",
type:"POST",
dataType : "JSON",
autoUpload: true,
formdata:{name:'FolderId',value:FolderId},
disableImagePreview:true,
filesContainer: $('table.files'),
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
'<div class="error"></div>' +
'</td>' +
'<td><p class="size"></p>' +
'<div class="progress"></div>' +
'</td>' +
'<td>' +
(!index && !o.options.autoUpload ?
'<button class="start" disabled>Start</button>' : '') +
(!index ? '<button class="cancel">Cancel</button>' : '') +
'</td>' +
'</tr>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
(file.error ? '<div class="error"></div>' : '') +
'</td>' +
'<td><span class="size"></span></td>' +
'<td><button class="delete">Delete</button></td>' +
'</tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(file.error);
} else {
row.find('.name').append($('<a></a>').text(file.name));
if (file.thumbnailUrl) {
row.find('.preview').append(
$('<a></a>').append(
$('<img>').prop('src', file.thumbnailUrl)
)
);
}
row.find('a')
.attr('data-gallery', '')
.prop('href', file.url);
row.find('button.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
},
always:function (e, data) {
$.each( function () {
$(this).removeClass('fileupload-processing');
});
},
done: function (e, data) {
$('.template-upload').remove();
$.each(data.files, function (index, file) {
openFolder(FolderId);
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
}
/*add: function (e, data) {
$('body').append('<p class="upl">Uploading...</p>')
data.submit();
},*/
})
}
});
I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change the keyword like ab. it should display Abu Dhabi, Abuja, etc but the dropdown fail to be displayed. Here is the script :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
}
});
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
</div>
</body>
</html>
I dont want to use another input box for this.
http://jsfiddle.net/Lngzbjc6/5/
After many trying, I got the solution (I dont know if this is the best). Here is the full code.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
}
});
}
});
$('#dest').keypress(function(event){
var dest = $.trim($('#dest').val());
var temp_val = $.trim($('#temp_val').val());
if(temp_val != ''){
if(event.which != 32)
$('#dest').autocomplete('option','source',Cities);
else{
var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
var found_arr='';
$.each(arr,function(index,value){
if(temp_val.indexOf(value) >= 0){
found_arr=value;
return false;
}
});
if(found_arr != '')
temp_val=temp_val.replace(found_arr,'');
var more=[
temp_val + ' Accommodation',
temp_val + ' Restaurants',
temp_val + ' Sights',
temp_val + ' Transport'
];
$('#dest').autocomplete('option','source',more);
}
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
<input type="hidden" id="temp_val" name="temp_val" value="">
</div>
</body>
</html>