'HTML Google App Script Not Working Properly Not Responsive
I had made a html page through google app script in spreadsheet , all is working fine in pc mode but in mobile friendly its not responsive and after clicking particular field it displays blank black screen.
forms.html
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!---<title> Responsive Registration Form | CodingLab </title>--->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 120vh;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.container {
max-width: 700px;
width: 100%;
background-color: #fff;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.content form .user-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box {
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span.details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box select {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid {
border-color: #9b59b6;
}
form .gender-details .gender-title {
font-size: 20px;
font-weight: 500;
}
form .category {
display: flex;
width: 80%;
margin: 14px 0;
justify-content: space-between;
}
form .category label {
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot {
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked~.category label .one,
#dot-2:checked~.category label .two,
#dot-3:checked~.category label .three {
background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"] {
display: none;
}
form .button {
height: 45px;
margin: 35px 0
}
form .button input {
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6, #9b59b6);
}
@media(max-width: 584px) {
.container {
max-width: 100%;
}
form .user-details .input-box {
margin-bottom: 15px;
width: 100%;
}
form .category {
width: 100%;
}
.content form .user-details {
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar {
width: 5px;
}
}
@media(max-width: 459px) {
.container .content .category {
flex-direction: column;
}
}
</style>
<script>
var stateObject = {
"Human Resource": {
"Zoopero Marketing Limited": [],
},
"Digital Marketing": {
"Zoopero Marketing Limited": [],
},
"Businees Dev Executive": {
"Analytics Valley technologies": [],
"Material Library India": [],
"Purple Apple Infosystems": [],
"Find My Hospital": [],
"Edurific": [],
},
"Market Researcher": {
"Acadspace technologies": [],
},
"Mern Stack": {
"Jackfruit": [],
},
"Social Media Manager": {
"Trinano Technologies": [],
},
"PHP & Laravel": {
"Analytics Valley technologies": [],
},
"React JS Developer": {
"Analytics Valley technologies": [],
}
}
window.onload = function () {
var domain = document.getElementById("domain"),
company = document.getElementById("company"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
domain.options[domain.options.length] = new Option(country, country);
}
domain.onchange = function () {
company.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
company.options[company.options.length] = new Option(state, state);
}
}
domain.onchange(); // reset in case page is reloaded
company.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[domain.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="title">Registration</div>
<div class="content">
<form action="" class="main" id="form" novalidate="novalidate">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true"
placeholder="Enter your name" required>
</div>
<div class="input-box">
<span class="details">Whatsapp Number</span>
<input type="number" name="whatsapp" id="whatsapp" class="validate" required=""
aria-required="true" placeholder="Enter Your number">
</div>
<div class="input-box">
<span class="details">Email</span>
<input type="email" name="email" id="email" class="validate" required="" aria-required="true"
placeholder="Enter your email" required>
</div>
<div class="input-box">
<span class="details">Select Year</span>
<select id="year" name="year" required>
<option value="" selected disabled>Year</option>
<option value="1st Year">1st Year</option>
<option value="2nd Year">2nd Year</option>
<option value="3rd Year">3rd Year</option>
<option value="4th Year">4th Year</option>
</select>
</div>
<div class="input-box">
<span class="details">Gender</span>
<select id="gender" name="gender" required>
<option value="" selected disabled>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Prefer Not To Say">Prefer Not To Say</option>
</select>
</div>
<div class="input-box">
<span class="details">Prefered Domain</span>
<select id="domain" name="domain" required>
<option value="" disabled selected>Select Domain</option>
</select>
</div>
<div class="input-box">
<span class="details">Prefered Company</span>
<select id="company" name="company" required>
<option value="" disabled selected>Select Company</option>
</select>
<select name="district" id="districtSel" size="1" style="display: none;">
<option value="" selected="selected">Please select State first</option>
</select><br>
</div>
<div class="input-box">
<span class="details">Select College</span>
<select id="college" name="college" required>
<option value="" selected disabled>College</option>
<option value="Bharati Vidyapeeth College Of Engineering Pune">Bharati Vidyapeeth College Of Engineering Pune</option>
<option value="Others">Others</option>
</select>
</div>
<div class="input-box">
<span class="details">Upload Resume</span>
<input type="file" id="files" placeholder="Upload your resume" required
accept=".doc,.docx,.pdf">
</div>
<div class="input-box">
<span class="details">College Name</span>
<input id="college-name" type="text" name="college-name" class="validate" required="" aria-required="true"
placeholder="If Others Enter College Name" required>
</div>
<div class="input-box">
<span class="details">Unique ID</span>
<input id="unqID" type="number" name="unqID" class="validate" required="" aria-required="true"
placeholder="Enter your Unique ID" required>
</div>
<div class="input-box">
<span class="details">Alternate Mobile</span>
<input id="tel" type="tel" name="tel" class="validate" required="" aria-required="true"
placeholder="Enter your number" required>
</div>
</div>
<div class="input-box">
<div id="progress">
</div>
</div>
<div class="button">
<input type="submit" value="Register" onclick="submitForm(); return false;">
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materializ e.min.js"></script>
<script>
var file, reader = new FileReader();
reader.onloadend = function (e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#whatsapp').val(), $('select#year').val(), $('input#email').val(), $('select#gender').val(), $('select#college').val(), $('input#college-name').val(), $('select#domain').val(), $('select#company').val(), $('input#tel').val(), $('input#unqID').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide(); $('#success').show();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset"); $('#forminner').show(); $('#success').hide(); $('#progress').html("");
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. ");
return;
}
showMessage("Uploading file ...");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
$(document).ready(function () {
$('select').material_select();
});
</script>
</body>
</html>
code.gs
// 1. Enter sheet name where data is to be written below
var SHEET_NAME = "Sheet1";
// 2. Run > setup
//
// 3. Publish > Deploy as web app
// - enter Project Version name and click 'Save New Version'
// - set security level and enable service (most likely execute as 'me' and access 'anyone, even anonymously)
//
// 4. Copy the 'Current web app URL' and post this in your form/script action
//
// 5. Insert column names on your destination sheet matching the
//parameter names of the data you are passing in (exactly matching case)
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new
//property service
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("SIPP Registrations");
// return HtmlService.createHtmlOutputFromFile('forms.html').setFaviconUrl("");
}
function uploadFileToGoogleDrive(data, file, name, whatsapp, year, email, gender, college, college_name, domain, company, tel, unqID) {
try {
var dropbox = "Received Files";
//var folder, folders = DriveApp.getFoldersByName(dropbox);
var folder=DriveApp.getFolderById('1H_52_xxh1rrzSjZyVrHl4pawMtLpeFqE');
/*
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
*/
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')), bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob),
filelink=file.getUrl() ;
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
// next set where we write the data - you could write to multiple/alternate destinations
var doc = SpreadsheetApp.openById("1Z4mvlfJpStn6tYyq35HeLGJCKbVRikJyqs5M9pZJgt0");
var sheet = doc.getSheetByName(SHEET_NAME);
// we'll assume header is in row 1 but you can override with
//header_row in GET/POST data
var headRow = 1;
var headers = sheet.getRange(1, 1, 1,
sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
// loop through the header columns
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a'Timestamp' column
row.push(new Date());
} else if (headers[i] == "name"){
row.push(name);
} else if (headers[i] == "whatsapp"){
row.push(whatsapp);
} else if (headers[i] == "year"){
row.push(year);
} else if (headers[i] == "email"){
row.push(email);
} else if (headers[i] == "gender"){
row.push(gender);
} else if (headers[i] == "college"){
row.push(college);
} else if (headers[i] == "college_name"){
row.push(college_name);
} else if (headers[i] == "domain"){
row.push(domain);
} else if (headers[i] == "company"){
row.push(company);
} else if (headers[i] == "tel"){
row.push(tel);
} else if (headers[i] == "unqID"){
row.push(unqID);
} else if (headers[i] == "filelink"){
row.push(filelink);
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
//return ContentService
// .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
// .setMimeType(ContentService.MimeType.JSON);
return "OK";
} catch (f) {
return f.toString();
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet(); SCRIPT_PROP.setProperty("1Z4mvlfJpStn6tYyq35HeLGJCKbVRikJyqs5M9pZJgt0", doc.getId());
}
What is the issue?
Error in mobile devices
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|