How can I bring three drop down menus in one line. I want to bring my day, month and year in one line but coudln't do so. Any help would be appreciable. I am attaching my jsfiddle.
<form action=
"https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8"
method="post">
<input name="orgid" type="hidden" value="">
<input name="retURL" type="hidden" value="">
....
</form>
just add #day, #month, #birthyear{ display:inline-block;}
DEMO
Adding empty <label> tags should do the trick. FIDDLE
Link is missing in your question so I could not point exactly to the solution but try below code. Hope this meets your requirement.
<html>
<head>
<style>
* {
font-family: Arial;
font-size:12px;
}
.setDate {
position:relative;
padding:20px;
}
.dateContainer {
width:400px;
display:none;
position:absolute;
top:40px;
left:20px;
background: #ffffff;
border: 1px solid #ccc;
padding:10px;
}
.dateContainer .form-field {
display:inline-block;
margin-top: 10px;
}
</style>
<script>
$('#finalDate').focus(function () {
var id = $(this).attr('id'),
cVal = $(this).val(),
cY = cVal.substr(6, 4),
cM = cVal.substr(0, 2),
cD = cVal.substr(3, 2),
d = new Date(),
y = d.getFullYear() + 1;
setYears(1900, y);
$('#ChangeDate').clone().insertAfter($(this));
$(this).siblings('.dateContainer').find('#sYear').val(cY);
$(this).siblings('.dateContainer').find('#sMonth').val(cM);
$(this).siblings('.dateContainer').find('#sDay').val(cD);
$(this).siblings('.dateContainer').show();
setDate(id);
});
var setDate = function (id) {
$('.SetDate').click(function () {
var y = $('#sYear option:selected').val(),
m = $('#sMonth option:selected').val(),
d = $('#sDay option:selected').val(),
date = m + '/' + d + '/' + y;
$('#' + id).val(date);
$(this).parents('.dateContainer').remove();
});
$('.CancelDate').click(function () {
//$('#' + id).val(date);
$(this).parents('.dateContainer').remove();
});
}
var setYears = function (sRange, eRange) {
for (var i = sRange; i < eRange; i++) {
$('#sYear').append('<option value"' + i + '">' + i + '</option>');
};
for (var i = 1; i <= 31; i++) {
$('#sDay').append('<option value"' + i + '">' + i + '</option>');
};
}
</script>
</head>
<body>
<div class="setDate">
<label for="StartDate">Date:</label>
<input class="form-control col-lg-5" name="StartDate" type="text" id="finalDate" value="12/31/2013" />
</div>
<div id='ChangeDate' class="dateContainer">
<div class="form-field col-lg-5">
<label for="sYear">Year:</label>
<select class="form-control" id="sYear" name="sYear" style="width:100px"></select>
</div>
<div class="form-field col-lg-5">
<label for="sMonth">Month:</label>
<select class="form-control" id="sMonth" name="sMonth">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
<div class="form-field col-lg-2">
<label for="sDay">Day:</label>
<select id="sDay" name="sDay" class="form-control"></select>
</div>
<div class="form-field col-lg-12 text-right">
Cancel
Set Date
</div>
</div>
</body>
</html>
Related
Given a <select> with a few options and given a <span> for each <option>, with id = select's content.
I would like to click on a <span> and select via jquery the corresponding <option> (and highlight clicked <span>);
but I would also like to be able to do the opposite: selecting an option and highlighting the corresponding span.
I created this script. It perfectly if I do one thing or the other. When I try mix click and select it stops working correctly.
function dropdownChangeSelection() {
var id = $('#myselect option:selected').text();
$('#myselect option').removeAttr('selected');
$('#myselect option:contains(' + id + ')').attr('selected', true);
$('.test span').removeClass('bold');
$('#' + id).addClass('bold');
}
function clickChangeSelection() {
var thisid = $(this).attr('id');
$('#myselect option').removeAttr('selected');
$('#myselect option:contains(' + thisid + ')').attr('selected', true);
$('.test span').removeClass('bold');
$('#' + thisid).addClass('bold');
}
$(document).ready(function() {
dropdownChangeSelection();
$('.test span').click(clickChangeSelection);
$('#myselect').click(dropdownChangeSelection);
});
.bold { font-weight: bold; border: 1px solid blue; }
.test span:hover {cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">US1230213111</option>
<option value="2">US123111903</option>
<option value="3">US1230293200</option>
<option value="4">US1231325565</option>
</select>
<br><br>
<div class="test">
<span id="US1230213111">US1230213111</span>
<br><br>
<span id="US123111903">US123111903</span>
<br><br>
<span id="US1230293200">US1230293200</span>
<br><br>
<span id="US1231325565">US1231325565</span>
</div>
<div class="inner">
</div>
I worked on answers and I worked out my own solution which takes into account option content instead of its value attribute.
function dropdownSelect(event) {
var id = event.target[event.target.selectedIndex].text
$('.test span').removeClass('active')
if (id == '') return
$('.test span[data-item=' + id + ']').addClass('active')
}
$('span').click((event) => {
var id = event.target.dataset.item
var value = $('select option:contains(' + id + ')').val();
$('select').val(value).change()
})
$(document).ready(function() {
var id = $('select option:selected').text();
$('.test span[data-item=' + id + ']').addClass('active')
});
span{
border:1px solid #ccc;
padding:0 5px;
}
span.active{
border-color:blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myselect" onchange="dropdownSelect(event)">
<option value="1">US1230213111</option>
<option value="2">US123111903</option>
<option value="3">US1230293200</option>
<option value="4">US1231325565</option>
</select>
<br><br>
<div class="test">
<span data-item="US1230213111">US1230213111</span>
<br><br>
<span data-item="US123111903">10US12311190302</span>
<br><br>
<span data-item="US1230293200">US1230293200</span>
<br><br>
<span data-item="US1231325565">US1231325565</span>
</div>
You can track the changes in your select input by onchange attribute and define a functions to do the action you desire.
function selectId(event) {
let id = event.target.value
$('span').removeClass('active')
if (id == '') return
$('span[data-item='+id+']').addClass('active')
}
$('span').click((event) => {
let id = event.target.dataset.item
$('select').val(id).change()
})
span{
border:1px solid #ccc;
padding:0 5px;
}
span.active{
border-color:blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select onchange="selectId(event)">
<option value='' selected></option>
<option value="1001">Item 1001</option>
<option value="1002">Item 1002</option>
<option value="1003">Item 1003</option>
<option value="1004">Item 1004</option>
</select>
<span data-item="1001">1001</span>
<span data-item="1002">1002</span>
<span data-item="1003">1003</span>
<span data-item="1004">1004</span>
the way to do that in simple JS
const
spTest = document.querySelector('div.test')
, allSpan = document.querySelectorAll('div.test > span')
, mySelect = document.querySelector('#myselect')
;
// builder for select
allSpan.forEach(sp => mySelect.add( new Option(sp.textContent,sp.id)))
setFromSellect() // set the first select on init page
mySelect.onchange = setFromSellect;
spTest.onclick = ({target: sp}) => // event delegation
{
if (!sp.matches('span')) return // ignore clicks elsewhere
mySelect.value = sp.id;
setFromSellect();
}
function setFromSellect()
{
allSpan.forEach( sp => sp.classList.toggle('bold', sp.id===mySelect.value ))
}
.bold { font-weight: bold; border: 1px solid blue; }
.test span:hover {cursor: pointer; }
<select id="myselect"></select>
<br><br>
<div class="test">
<span id="US1230213111">US1230213111</span>
<br><br>
<span id="US123111903">US123111903</span>
<br><br>
<span id="US1230293200">US1230293200</span>
<br><br>
<span id="US1231325565">US1231325565</span>
</div>
We ultimately want to give the clients the choice of "Max letter height", so they can pick between 5cm, 10cm, 15cm, 20cm, etc. By choosing a letter height, the visual example should adjust accordingly (although it'll have to work in scale because I wouldn't want the text to go off-screen). Once a height is selected, the client can enter their text which should automatically start calculating the width from pixels to centimeters.
In the prototype I built, I got most of it to work but the pixels to centimeters aren't exact but I have no idea what to do to make it any better. My prototype can be found here: https://codepen.io/Crownedpride/pen/d6b6973f458ecc0c60ed59b4bcfb5acd (pardon the Dutch language!)
Please let me know if I'm unclear or not, I've been trying to make this work for way too long and I'm stuck like a rock. One last thing, there's some other code within my codepen because I'm trying to turn this into a system that'll calculate a price based on the width/height of the text.
function priceCalc() {
// var cmHeight = $('.character-height-container').toCentimeters();
var cmLength = $('#characters').toCentimeters();
$('#output').text('Width: ' + cmLength.width + ' CM ' +
'Height: ' + cmLength.height + ' CM');
if(cmLength.width == 0){
$('#price').text("0");
} else if(cmLength.width < 50){
$('#price').text("30");
} else if(cmLength.width < 100){
$('#price').text("45");
} else if(cmLength.width < 150){
$('#price').text("60");
} else if(cmLength.width < 200){
$('#price').text("75");
} else if(cmLength.width < 250){
$('#price').text("90");
} else if(cmLength.width < 300){
$('#price').text("105");
} else if(cmLength.width < 350){
$('#price').text("120");
} else if(cmLength.width < 400){
$('#price').text("135");
} else if(cmLength.width < 450){
$('#price').text("150");
} else if(cmLength.width > 451){
$('#price').text("165");
};
}
(function($) {
$.fn.toCentimeters = function() {
var element = this,
width = parseInt(element.innerWidth()),
// width = parseInt(element.css('width')),
height = parseInt(element.innerHeight()),
// height = parseInt(element.css('height')),
centimeters = {};
centimeters.width = (width * 0.035 ); //-- scale
centimeters.height = (height * 0.02645833333333);
return centimeters;
};
}
)(jQuery);
$(function() {
var price = 0;
priceCalc();
});
$(function() {
$('#input-test').keyup(function() {
$('#characters').text($(this).val());
$('#total-characters').text($(this).val().length);
// var a = $('#breedte').text(($(this).val().length * 25));;
// $('#price').text(($(this).val().length * 25 * 0.70));
$inputs.each(applyStyles);
priceCalc();
});
});
var $target = $('#characters'),
$inputs = $('.mystyle :input'),
$target2 = $('#custom-text-container'),
$inputs2 = $('.my-background-style :input'),
applyStyles = function() {
$target.css(this.name, this.value);
$target2.css(this.name, this.value);
};
$inputs.on('keyup click change', function() {
$inputs.each(applyStyles);
$inputs2.each(applyStyles);
priceCalc();
});
$inputs2.on('keyup click change', function() {
$inputs.each(applyStyles);
$inputs2.each(applyStyles);
priceCalc();
});
/* #breedte:after {
content:" cm breedt";
} */
body {
text-align:center;
font-family:Arial;
}
#total-characters:after {
content:" karakters"
}
#price:before {
content:"€ ";
}
#price {
font-size:36px;
color:green;
font-weight:bold;
}
.character-height-container {
height:36px;
display:block;
margin:0px;
padding:0px;
/* background-color:#ed7703; */
}
#characters {
display:inline-block;
font-size:40px;
font-family:'arial';
overflow:hidden;
color:#333;
line-height:40px;
background-color:;
margin:0px;
padding:0px;
height:;
vertical-align:text-bottom;
}
#custom-text-container {
border:2px solid #c3c3c3;
padding:10px;
min-height:51px;
background-color:;
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-characters">
<div id="custom-text-container">
<div class="character-height-container">
<p id="characters"></p>
</div>
</div>
<p id="total-characters">0</p>
</div>
<!-- <div class="display-characters">
<div id="custom-text-container">
<p id="characters"></p>
</div>
<p id="total-characters">0</p>
</div> -->
<div class="display-price">
<p id=output>Width: 0 cm Height: 0cm</p>
<p id="breedte"></p>
<p id="price">0</p>
</div>
<form action="">
<label for="test">Vul hier je tekst in</label>
<input type="text" class="text" id="input-test"><br><br>
<div class="mystyle">
<label for="font-size">Letter hoogte: </label>
<select name="font-size" id="font-size">
<option name="font-size" value="40px">40 px</option>
<option name="font-size" value="60px">60 px</option>
<option name="font-size" value="80px">80 px</option>
</select><br><br>
<label for="font-family">Kies een font: </label>
<select name="font-family" id="font-family">
<option name="font-family" value="arial">Arial</option>
<option name="font-family" value="arial black">Arial Black</option>
<option name="font-family" value="Helvetica Neue">Helvetica Neue</option>
<option name="font-family" value="courier">Courier</option>
<option name="font-family" value="Verdana">Verdana</option>
</select><br><br>
<label for="color">Kies een letter kleur: </label>
<select name="color" id="color">
<option name="color" value="Black">Black</option>
<option name="color" value="White">White</option>
<option name="color" value="Red">Red</option>
<option name="color" value="#ed7703">Oranje</option>
<option name="color" value="Green">Green</option>
<option name="color" value="Yellow">Yellow</option>
<option name="color" value="Blue">Blue</option>
</select>
</div><br>
<div class="my-background-style">
<label for="background-color">Kies een achtergrond kleur: </label>
<select name="background-color" id="background-color">
<option name="background-color" value="White">White</option>
<option name="background-color" value="Black">Black</option>
<option name="background-color" value="#f2edd3">Beige</option>
<option name="background-color" value="#d3ecf2">Licht blauw</option>
<option name="background-color" value="#f2d3ed">Licht roze</option>
<option name="background-color" value="#ad3434">Donker rood</option>
</select>
</div>
</form>
When I select the update function, I need the pop-up interface to gather the information on the Row that you are currently on in the sheet and fill in.
Then the user can change the information to update. but not the top 3 boxes. these would only view only.
please help.
I have tried changing the Html code but not getting the information from the row, the information I enter submits correctly.
I have researched this site and others but cannot find any information on getting this to populate the popup interface box.
function inputUpdates_() {
var html = doGet();
SpreadsheetApp.getUi().showModalDialog(html, 'Update Techicians Training Dates & Comments');
}
//Create a Data Entry Form
function doGet() {
var result = HtmlService
.createTemplateFromFile('Form')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
result.setHeight(600);
result.setWidth(500)
return result;
}
//The function retrieves the data from the return form and fills the spreadsheet
function getValuesFromForm(form){
var first_name = form.first_name,
last_name = form.last_name,
student_id = form.student_id,
training_date = form.training_date,
seam_sealer = form.seam_sealer,
filler_repair = form.filler_repair,
corrosion_protection = form.corrosion_protection,
body_filler_repair = form.body_filler_repair,
plasic_repair = form.plasic_repair,
bonding = form.bonding,
sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('List')
var lastRow = sheet.getLastRow();
sheet.getRange(lastRow + 1, 1).setValue(first_name);
sheet.getRange(lastRow + 1, 2).setValue(last_name);
sheet.getRange(lastRow + 1, 3).setValue(student_id);
sheet.getRange(lastRow + 1, 4).setValue(training_date);
sheet.getRange(lastRow + 1, 5).setValue(seam_sealer);
sheet.getRange(lastRow + 1, 6).setValue(filler_repair);
sheet.getRange(lastRow + 1, 7).setValue(corrosion_protection);
sheet.getRange(lastRow + 1, 8).setValue(body_filler_repair);
sheet.getRange(lastRow + 1, 9).setValue(plasic_repair);
sheet.getRange(lastRow + 1, 10).setValue(bonding);
}
<script type="text/javascript">
function formSubmit() {
google.script.run.getValuesFromForm(document.forms[0]);
google.script.host.close();
}
</script>
<style>
input.i01 {
margin-left: 84px;
}
input.i02 {
margin-left: 85px;
}
input.i03 {
margin-left: 81px;
}
input.i04 {
margin-left: 68px;
}
input.i05 {
margin-left: 73px;
}
input.i06 {
margin-left: 79px;
}
input.i07 {
margin-left: 12px;
}
input.i08 {
margin-left: 34px;
}
input.i09 {
margin-left: 75px;
}
input.i10 {
margin-left: 112px;
}
input.i11 {
margin-left: 170px;
}
<p><font face="verdana" color="green">
</style>
<!--Login Form -->
<div id="logindiv">
<form method="POST">
<label><p><font face="verdana" color="blue">First Name: </label>
<input class="i01" type="text" name="firstName"/>
<br/>
<br/>
<label>Last Name: </label>
<input class="i02" type="text" name="last_name" /><br/>
<br/>
<label>Student Id: </label>
<input class="i03" name="student_id" list="techid" type="text" />
<datalist id="techid">
<? var data = studentid(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
<option value="<?= data[i]?>"></option>
<? } ?>
</datalist>
<br/>
<br/>
<label>Training Date: </label>
<input class="i04" type="date" name="training_date" /><br/>
<br/>
<label>Seam Sealer: </label>
<input class="i05" type="date" name="seam_sealer" /><br/>
<br/>
<label>Filler Repair: </label>
<input class="i06" type="date" name="filler_repair"/><br/>
<br/>
<label>Corrosion Protection: </label>
<input class="i07" type="date" name="corrosion_protection" /><br/>
<br/>
<label>Body Filler Repair: </label>
<input class="i08" type="date" name="body_filler_repair"/><br/>
<br/>
<label>Plasic Repair: </label>
<input class="i09" type="date" name="plasic_repair"/><br/>
<br/>
<label>Bonding: </label>
<input class="i10" type="date" name="bonding" /><br/>
<br/>
<br/>
<br/>
<input class="i11" onclick="formSubmit()" type="button" value="Submit" />
<input onclick="google.script.host.close()" type="button" value="Exit" />
<br/></font></p>
</form>
I have resorted to using Bootstrap popover because HTML validation exhibits the same behavior I am now experiencing. Perhaps the solution for one will work for both.
JS
var validate = validate || {};
validate.issueError = function ($elem, msg, placement) {
placement = placement == undefined ? 'bottom' : placement;
$elem.attr('data-toggle', 'popover');
$elem.attr("data-offset", "0 25%");
var exclamationPoint = "<span style='font-weight: bold; font-size:medium; color: white; background-color: orange; height: 12px; padding: 1px 6px; margin-right: 8px;'>!</span>";
var content = "<span style='font-size: smaller;'>" + msg + "</span>";
$elem.popover("destroy").popover({
html: true,
placement: placement,
content: exclamationPoint + content
})
$elem.focus();
$elem.popover('show');
setTimeout(function () { $elem.popover('hide') }, 5000);
$elem.on("keydown click", function () {
$(this).popover('hide');
$(this).off("keydown click")
})
}
validate.edits = {
required: function ($form) {
var $reqFlds = $form.contents().find('[required], [data-required]');
$reqFlds.each(function () {
var $this = $(this);
var result = ($this.filter("input, select, textarea").length) ? $this.val() : $this.text();
if (!$.trim(result)) {
validate.issueError($this, "Please fill out this field.");
return false;
}
});
return true;
}
HTML (note I have substituted "required' with "data-required" to force the Bootstrap routines).
<!DOCTYPE html>
<html>
<head>
<title>Writer's Tryst - Writers Form</title>
<link type="text/css" href="css/writers.css" rel="stylesheet" />
<style>
body {padding: 0 20px;}
.limited-offer {
background-color: white;
padding: 3px;
margin-bottom: 12px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container-fluid">
<img id="img-writers" src="#" alt="images" />
<form id="form-writers" method="post" class="form-horizontal well">
<h1>Writers</h1>
<div class="form-group">
<label for="title" class="col-lg-3 control-label">Title</label>
<div class="col-lg-9">
<input type="text" class="form-control" data-required id="title" name="title" autofocus="true" placeholder="Title" />
</div>
</div>
<div class="form-group">
<label for="form-type" class="col-lg-3 control-label">Type of work</label>
<div class="col-lg-9">
<select class="form-control" data-required id="form-type" name="form-type"></select>
</div>
</div>
<div class="form-group">
<label for="genre" class="control-label col-lg-3">Genre</label>
<div class="col-lg-9">
<select id="genre" name="genre" class="form-control" data-required></select>
</div>
</div>
<div class="form-group">
<label for="nbr-pages" class="control-label col-lg-3">Number Pages</label>
<div class="col-lg-9">
<input type="number" id="nbr-pages" name="nbr-pages" class="form-control" data-required placeholder="Pages" />
</div>
</div>
<div id="tips">The objective of a synopsis or query letter is to entice enablers into requesting your manuscript.
It must be concise and to the point and of course very well written. One page is preferred and no more than 3 pages will be accepted.
Sample Query Letter
</div>
<p id="file-warning" class="thumbnail">Your synopsis/query letter must be a PDF file.
<a target="_blank" href="https://www.freepdfconvert.com/" target="_blank">Free file conversion to PDF.</a>
</p>
<div>
<a id="file-upload" class="btn btn-custom-primary btn-file btn-block text-xs-center" role="button">Choose PDF to Upload
<br/><div id="filename" class="btn-block" style="color: #fff">No file chosen</div>
</a>
<input type="file" id="file2upload" style="display: none">
</div><br/>
<div class="form-group">
<!-- <button type="submit" id="writers-submit" class="btn btn-custom-success btn-block m-t-8">Submit</button>-->
</div>
<div class="limited-offer">For a limited time, writer submissions will cost <span style="color: #f00; font-weight:bold">$15.00</span> to offset screening and editing costs and to promote quality synopsises and query letters. We reserve the right to change this policy without notice.</div>
<!-- <form id="form-paypal" name="form-paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onsubmit="return ajaxSubmit()">-->
<form id="form-paypal" name="form-paypal" method="post" target="_top">
<input type="submit" class="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="U2LE82Z45PJ54">
<input style="display: block; margin: 0 auto;" id="but-pp" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="PayPal" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<input id="userid" name="userid" type="hidden" />
<input id="filesize-limit" name="filesize-limit" type="hidden" value="150000" />
</form>
</div>
<script>
angular.element(document).ready(function () {
showImages($("#form-writers"), $("#img-writers"), "authors", ["blake.jpg", "Melville.jpg", "lewis-carroll.jpg", "stephen-king.jpg", "twain.jpg", "camus.jpg", "nietzsche.jpg", "hesse.jpg"]);
});
$(function () {
populateWritersDropdowns();
$(document).on('change', ':file', function () {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$('#file-upload').on('click', function (e) {
e.preventDefault();
$('#file2upload')[0].click();
});
$("#file2upload").on("change", function () {
var filepath = $('#file2upload')[0].value;
var filename = filepath.substr(filepath.lastIndexOf("\\") + 1);
$("#filename").text(filename)
});
$("#but-pp").on("mousedown", function (e) {
//if (!$("#form-writers").get(0).checkValidity()) return false;
var $ret = validate.edits.required($("#form-writers"));
alert($ret.length);
if ($ret != true) {
$ret.focus();
return false;
}
if (!validate.edits.requireFile($("#filename"))) return false;
if (!fileEdits()) return false;
ajaxSubmit();
function fileEdits() {
var fileSizeLimit = $("#filesize-limit").val();
var file = document.getElementById('file2upload').files[0];
var fileName = file.name;
var fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
var fileSize = file.size;
if (fileSize > fileSizeLimit) {
showMessage(0, "Your file-size (" + (Math.round(parseInt(fileSize) / 1000)).toLocaleString() + "kb) exceeds the limit of " + (fileSizeLimit.toLocaleString() / 1000) + "kb");
return false;
} else {
if (fileExt.toLowerCase() != "pdf") {
showMessage(0, "Your synopsis / query letter MUST be a PDF file.");
return false;
};
return true;
}
};
function ajaxSubmit() {
var file_data = $('#file2upload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('action', "upload");
form_data.append('title', $("#title").val());
form_data.append('form-type', $("#form-type").val());
form_data.append('genre', $("#genre").val());
form_data.append('nbr-pages', $("#nbr-pages").val());
form_data.append('account-id', localStorage.getItem("account-id"));
ajax('post', 'php/writers.php', form_data, success, 'Error uploading file:', 'text', false, false, false);
function success(result) {
if (result.indexOf("PDF") == -1) {
showMessage(1, "Your submission will go live and you will be notified after our reviews are complete.");
var data = {};
data['writer-id'] = result;
ajax('post', 'php/paypal-ipn.php', data, listenerStarted);
function listenerStarted(result) {
alert("pp=" + result);
}
} else {
showMessage(0, result);
}
setTimeout(function () {
document.getElementById('form-writers').reset();
$("#filename").text("No file chosen");
}, 5000);
};
};
});
});
</script>
</body>
</html>
Put together this script that will upload a file to my google drive.
I need it to be able to handle either a big .zip file, OR multiple image files.
Currently it times out if you upload a big .zip file (around 7MB)
I would prefer to have it upload multiple files.
Apps Script:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var unitNumber = form.unitNumber;
if (unitNumber == "") {
unitNumber = "";
} else {
unitNumber = " #" + unitNumber;
}
var foldertitle = form.streetAddress + unitNumber + ' ' + form.cityName + ' ' + form.stateName + ' - ' + form.businessName + ' ' + form.managerName + ' - ' + form.propertyType;
var folder, folders = DriveApp.getFolderById("0B0V8-0eo7tx8MTQzcGFwdXF6SFU");
var createfolder = folders.createFolder(foldertitle);
folder = createfolder;
var blob = form.filename;
var file = folder.createFile(blob);
return "File uploaded successfully ";
} catch (error) {
Logger.log('err: ' + error.toString());
return error.toString();
}
}
Form Code
<body>
<div id="formcontainer">
<form id="myForm">
<div>
<input type="text" name="businessName" placeholder="Business Name">
</div>
<div>
<input type="text" name="managerName" placeholder="Manager Name">
</div>
<div>
<input type="text" name="streetAddress" placeholder="Street Address">
</div>
<div>
<input type="text" name="unitNumber" placeholder="Unit Number">
</div>
<div>
<input type="text" name="cityName" placeholder="City">
</div>
<div>
<input type="text" name="stateName" placeholder="State">
</div>
<br>
<label for="propertyType">Choose Type</label>
<br>
<select name="propertyType">
<option value="Interactive Floor Plan">IFP</option>
<option value="Pictures Only">Pictures</option>
<option value="Video Only">Video</option>
<option value="Complete Property">All</option>
</select>
<br>
<label for="myFile">Compress All Files into .zip file</label>
<br>
<input type="file" name="filename" id="myFile" multiple>
<input type="submit" value="Upload File" onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
</div>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
body {
max-width: 400px;
padding: 20px;
margin: auto;
}
input {
display: inline-block;
width: 100%;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="submit"] {
width: auto !important;
display: block !important;
}
input[type="file"] {
padding: 5px 0px 15px 0px !important;
}
</style>
</body>
I don't see other way to make GAS work with multiple files if not with multiple files inputs. You can add dinamically input with Jquery (or plain Javascript), and test in the server side to check how many input files got carried over.
Like so:
in HTML:
<input type="file" name="filename0" id="myFile"><div id="moreInputs"></div>
<button onClick="moreFieds()">Add more Fieds</button>
<script>
var numInputs = 1;
function moreFieds(){
$('#moreInputs').append($('<input type="file" name="filename'+numInputs+'" id="myFile">'));
numInputs++;
}
</script>
In code.gs:
var numForms = 0;
while( form[ (filename + numForms) ] ){
var blob = form[ (filename + numForms) ];
var file = folder.createFile(blob);
numForms++;
}
Or as I like more, send files inputs one by one in the script, giving each input it's own form, that way you can know when each file has done loading with the successHandler.