Subscribe to get a project free
Home
apps script
automation

Student registration form - html, css, bootstrap, javascript, jquery, AppsScript, google sheet

        STUDENT REGISTRATION FORM EXAMPLE

        Dear user, In the present article, you will see a format of student registration form that captures all required details of the student while registration process. May be your requirement is different from the given exemple. In this way you may need to modifie the form according to your requirments. After reform, you may also need to modifie all the related code one by one. In this way you need to know the refrences of code well. Therefore you have to read the code with deep mind. After that you may success to get your goal.
        For your help I have described the point well that can make your work easy. Let's see the references of the sheet.
For second part of this blog visit fee management system
Sheet link
        The above spreadsheet has six sheets:
  • Analyse - to see the detail at one place
  • alldatastore - to store all admission data
  • Diary - to store payments detail and charging
  • PData - to store current payment history
  • Ptra - to store last payment history
  • bod - to store other dues detail
In all above sheets, you need only two sheets in this project.
"alldatastore" and "Diary"
          From the example sheet, You can take hints to refer and design your sheet. First, We suggest you to use your webapp on copied sheet without any modification. After got success, you should modifie the sheet and code according to requirment.

Let us see all the codes.
   Code.gs     
     In this section of code, we have added three functions; doGet(); include() and processF(fform) .  You may need to modify only 'processF(fform)'. This function send data to google sheet and send back response to the html page. To insert data in sheet, this function is mandatory. See the references of the function carefully. fform is the value of the form. 

function doGet() {
  var h;
  h = HtmlService.createTemplateFromFile('index').evaluate();
  h.setTitle('New student registration form');
  return h;
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

const zeroPad = (num, places) => String(num).padStart(places, '0')
/* @Process Form */
var ass = SpreadsheetApp.openById(' sheet id');
var aws = ass.getSheetByName("alldatastore");
var pws = ass.getSheetByName("Diary");

function processF(fform) {
  var aro = aws.getLastRow()-1; // for unique Admission number
  var dd = new Date();
  var dt = dd.toLocaleString();
  var ads = dd.toLocaleDateString('en', {year: '2-digit'})+aro; //year of admission
  var adn ="E"+zeroPad(aro, 6);
  var studentAadhar = fform.nf3;
  var flag=1;
  var lr= aws.getLastRow()+1;
    for(var i=1;i<=lr;i++){
  var adrc = aws.getRange(i, 19).getValue();
  var adnR = aws.getRange(i, 1).getValue();
      if(adrc == studentAadhar){
      flag=0;
  var result=["EXA","Aadhaar '"+studentAadhar+", is already exist with ID "+adnR+"."];
  return result;
    } }
  if(flag==1){
  //setting formula for automation.
  var m = '"';
  var space = '" "';
  var Leave ='"Leaved"';
  var Pending ='"Pending"';
  var due= '"Dues"';
  var adv= '"Advance"';
  var pro = pws.getLastRow()+1; 
  var agr = aws.getLastRow()+1;
  // @ts-ignore
  var age = aws.getRange(1,6);  age.setFormula(["=int(YEARFRAC(e"+agr+",today()))"]); 
  var mFee = pws.getRange(1,12); mFee.setFormula(["=arrayformula(sum(if(G"+pro+"<>"+Pending+",if(G"+pro+"<>"+Leave+",I"+pro+":K"+pro+"))))"]); 
  var pFee = pws.getRange(1,13); pFee.setFormula(["=SUMIF(PData!E2:E,"+m+adn+m+",PData!H2:H)"]);
  var cFee = pws.getRange(1,14); cFee.setFormula(["=SUMIF(PData!E2:E,"+m+adn+m+",PData!i2:i)"]);
  var yFee = pws.getRange(1,15); yFee.setFormula(["=SUM(W"+pro+":AK"+pro+")"]);
  var afP = pws.getRange(1,16);  afP.setFormula(["=MINUS(o"+pro+",m"+pro+")"]);
  var afM = pws.getRange(1,17);  afM.setFormula(["=MINUS(p"+pro+",n"+pro+")"]);
  var st1 = pws.getRange(1,18);  st1.setFormula(["=IF(q"+pro+">0,"+due+","+adv+")"]);
  var st2 = pws.getRange(1,20);  st2.setFormula(["=IF(s"+pro+">0,"+due+","+adv+")"]);
  var note = pws.getRange(1,21); note.setFormula(["=concatenate(U2,"+space+", V"+pro+")"]);
  var bod = pws.getRange(1,22); bod.setFormula(["=SUMIF(bod!b2:b,"+m+adn+m+",bod!e2:e)"]);
//admission detail
  var studentname = fform.nf1;
  var gender = fform.nf2;
  var dob = fform.nf4;
  var bloodgroup = fform.nf5;
  var physi = fform.nf6;
  var recog = fform.nf7;
  var religion = fform.nf8;
  var caste = fform.nf9;
  var categ = fform.nf10;
  var ecol = fform.nf11;
  var faname = fform.nf12;
  var maname = fform.nf13;
  var fmobile = fform.nf14;
  var femail = fform.nf15;
  var pvill = fform.nf16;
  var ppo = fform.nf17;
  var pps = fform.nf18;
  var pdist = fform.nf19;
  var pstate = fform.nf20;
  var ppostal = fform.nf21;
  var spname = fform.nf22;
  var spmob = fform.nf23;
  var spaadhar = fform.nf24;
  var sptype = fform.nf25;
  var tvill = fform.nf26;
  var tpo = fform.nf27;
  var tps = fform.nf28;
  var tdist = fform.nf29;
  var tpostal = fform.nf30;
  var spimg = fform.nf31;
  var stimg = fform.nf32;
  var sdocument = fform.nf33;
  var spdocument = fform.nf34;
  var sprelation = fform.nf35;
  var prscl = fform.nf36;
  var prsgrade = fform.nf37;
  var prsmark = fform.nf38;
  var prsper = fform.nf39;
  var prsschool = fform.nf40;
  var prssad = fform.nf41;
  var prspostal = fform.nf42;
  var adin = fform.nf43;
  var adtype = fform.nf44;
  var adclass = fform.nf45;
  var adclsec = fform.nf46;
  var sclfee = fform.nf47;
  var vcharge = fform.nf48;
  var adcharge = fform.nf49;
  var annufee = fform.nf50;
  var bkn = fform.bkn;
  var bac = fform.bac;
  var ifsc = fform.ifsc;
  var adnote = fform.adnote;
  var pnote = fform.pnote;
  aws.appendRow([adn,stimg,studentname,gender,dob,age.getFormula(),faname,maname,pvill,ppo,pps,pdist,pstate,ppostal,adin,adtype,adclass,adclsec,studentAadhar,fmobile,femail,tvill,tpo,tps,tdist,tpostal,sptype,spimg,spname,sprelation,spmob,spaadhar,spdocument,prscl,prsgrade,prsmark,prsper,prsschool,prssad,prspostal,sdocument,adcharge,adnote,bkn,bac,ifsc,dt,,physi,recog,religion,caste,categ,ecol,bloodgroup]);
  var lastRow = aws.getLastRow();
  var r1 = aws.getRange('e'+ lastRow +':e'+lastRow);r1.setNumberFormat('@STRING@');
  var r2 = aws.getRange('aw'+ lastRow +':ax'+lastRow);r2.setNumberFormat('@STRING@');
  pws.appendRow([adn,studentname,faname,tvill,fmobile,femail,adclass,adclsec,sclfee,vcharge,,mFee.getFormula(),pFee.getFormula(),cFee.getFormula(),yFee.getFormula(),afP.getFormula(),afM.getFormula(),st1.getFormula(),,st2.getFormula(),note.getFormula(),fform.pnote,annufee,bod.getFormula()]);
  
if(fmobile !=""){
  var smsb ="Dear "+studentname+", Your registratin is successfull with ID "+adn+". For more detail, visit www.info-ips.blogspot.com . Thanks for choosing IPS_Bakhraur.";
  var apikey ="fast2sms api key";
  var url = "https://www.fast2sms.com/dev/bulkV2?authorization="+apikey+"&sender_id=TXTIND&message="+smsb+"&route=v3&numbers="+fmobile+"";
 var options = {
  "async": true,
  "crossDomain": true,
  "method": "GET"
}
  var response = UrlFetchApp.fetch(url, options);
  var data = JSON.parse(response.getContentText())
  var res= data.message;
}else{
var res= 'Mobile number not exist.';
}
  var result=[adn,res];
  return result;}
  }


    index.html   
     Now  we have to see the index.html  code. In this section. I have include all file and form. This is a html file. you have to design this file according to the your reqirment.
To design this form we have used css (file name  style.html) and bootstrap plugin.
All codes are included as <?!= include('style') ?> .
  <!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>AdForm</title>
<meta name="robots" content="noindex">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<?!= include('style') ?>
<?!= include('js') ?>
<?!= include('function.js') ?>
</head>
<body onload="setFunx()">
<form id="iform" onsubmit="event.preventDefault();submitFun('this')">
<div class="panel panel-primary">
<div class="panel-body">
  <i class="text-on-pannel  text-primary">Function bar:</i>
<table width="99%"><tr>
<td align="right" width="38%">
<input type="number"id="sid"placeholder="ID Number*" name="sid" onkeyup="getInputValue();">
<select id="sv"class="sv" onchange="setFunx()">
<option value="submitFun(this)">Submit</option>
<option value="readFun(this)">Read</option>
<option value="updateFun(this)">Update</option>
<option value="deleteFun(this)">Delete</option></select>
<input type="submit"id="btv"class="btn-primary xl"value="Submit"></td>
    <td align="center" width="5%"><div id="lo"></div></td>
    <td align=left width=37%><div id="pinfo"></div></td>
    <td align=right width=20%>
    <button type="button"id="btp" class="action back btn btn-primary">Back</button>
    <button type="button"id="btn"class="action next btn btn-primary">Next</button>
    <button id="bts"class="action submit btn btn-primary">Submit</button>
    <button type="button"id="btc"class="btn btn-default" data-dismiss="modal">Close</button>
    </td></tr></table>
</div>
</div>
    
<div class="tab">
  <span class="step">1/7</span>   
<div class="panel panel-primary">
<div class="panel-body">
<i class="text-on-pannel  text-primary">Basic Information of the student:</i>




<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf1"id="id1"class="form-control" onkeyup="chkCase(this)">
    <lavel class="floating-label">Full Name:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf2"id="id2"class="form-control" list="glist">
    <lavel class="floating-label">Gender:*</lavel>
  <datalist id="glist">
    <option value="Male">
    <option value="Female">
    <option value="Other">
  </datalist>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="number" req="req" name="nf3"id="id3"class="form-control">
    <lavel class="floating-label">Aadhaar Number:*</lavel>
</div>
</div>

<div class="col-xs-4">
<div id="lavel"> 
    <input type="date"req="req"name="nf4"id="id4"class="form-control">
    <lavel class="floating-label">Date of birth:*</lavel>
</div>
</div>
<div class="col-xs-2">
<div id="lavel">
    <input type="text"name="nf5"id="id5"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Blood G.:</lavel>
</div>
</div>


<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf6"id="id6"class="form-control"list="plist">
    <lavel class="floating-label">Physically:*</lavel>
  <datalist id="plist">
    <option value="Fit">
    <option value="Handicapped">
    <option value="Paralyze">
    <option value="Lame">
  </datalist>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"name="nf7" id="id7"class="form-control" onkeyup="chkCase(this)">
    <lavel class="floating-label">Recognisable Marks:</lavel>
</div>
</div>

<div class="col-xs-3">
<div id="lavel">
    <input type="text"req="req"name="nf8"id="id8"class="form-control"list="rlist">
    <lavel class="floating-label">Religion:*</lavel>
  <datalist id="rlist">
    <option value="Islam">
    <option value="Hindu">
  </datalist>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"req="req"name="nf9"id="id9"class="form-control" list="clist">
    <lavel class="floating-label">Caste:*</lavel>
  <datalist id="clist">
    <option value="Saiyad">
    <option value="Khan">
    <option value="Ansari">
    <option value="Shekh">
    <option value="Shamani">
    <option value="Hajam">
  </datalist>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"name="nf10"id="id10"class="form-control"list="ec">
    <lavel class="floating-label">Category:</lavel>
  <datalist id="ec">
    <option value="UC"><span class="tooltiptext">Upper Castes</span>
    <option value="BC"><span class="tooltiptext">(OBC) Backward Castes</span>
    <option value="SC"><span class="tooltiptext">Tooltip text3</span>
    <option value="Opera"><span class="tooltiptext">Tooltip text4</span>
    <option value="Safari"><span class="tooltiptext">Tooltip text5</span>
  </datalist>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"name="nf11"id="id11" class="form-control">
    <lavel class="floating-label">Eco.-level:</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf12"id="id12"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Father's name:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf13"id="id13"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Mother's name:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="number"req="req"name="nf14"id="id14"class="form-control"maxlength="10"minlength="10">
    <lavel class="floating-label">Mobile Number:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="email"name="nf15"id="id15"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Email ID:</lavel>
</div>
</div>
</div>
</div>
</div>




<div class="tab">
<span class="step">2/7</span>  
 
<div class="panel panel-primary">
<div class="panel-body">
<i class="text-on-pannel  text-primary">Permament Address:*(Please provide the native address of the child.)</i>




<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf16"id="id16"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Village:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf17"id="id17"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Post Office:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf18"id="id18"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Police Station:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf19"id="id19"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">District:*</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"req="req"name="nf20"id="id20"value="Bihar"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">State:*</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="number"req="req"name="nf21"id="id21"class="form-control"maxlength="6"minlength="6">
    <lavel class="floating-label">Postal Code:*</lavel>
</div>
</div>
</div>
</div>
</div>





<div class="tab">
<span class="step">3/7</span>  
 
<div class="panel panel-primary">
<div class="panel-body">
<i class="text-on-pannel  text-primary">Temporary Address:*(Please provide the address where child lives in persent.)</i>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"class="form-control"name="nf22"id="id22"onkeyup="chkCase(this)">
    <lavel class="floating-label">House owner/sponsor name:*</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="number"req="req"name="nf23"id="id23"class="form-control"maxlength="10"minlength="10">
    <lavel class="floating-label">Mobile no:*</lavel>
</div>
</div>

<div class="col-xs-3">
<div id="lavel">
<select name="nf35"id="id35" class="form-control">
<option value="">Relation</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Dada">Dada</option>
<option value="Dadi">Dadi</option>
<option value="Nana">Nana</option>
<option value="Nani">Nani</option>
<option value="Mama">Mama</option>
<option value="Mami">Mami</option>
<option value="Chacha">Chacha</option>
<option value="Chachi">Chachi</option>
<option value="Fufa">Fufa</option>
<option value="Fufi">Fufi</option>
</select><br>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="number"req="req"name="nf24"id="id24"class="form-control"maxlength="12"minlength="12">
    <lavel class="floating-label">House owner/sponsor Aadhaar no:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"name="nf25"id="id25"class="form-control"list="slist">
    <lavel class="floating-label">Guarantor Type:</lavel>
  <datalist id="slist">
    <option value="House Owner">
    <option value="Sponsor">
  </datalist>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf26"id="id26"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Village:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf27"id="id27"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Post Office:*</lavel>
</div>
</div>
<div class="col-xs-6">
<div id="lavel">
    <input type="text"req="req"name="nf28"id="id28"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Police Station:*</lavel>
</div>
</div>
<div class="col-xs-4">
<div id="lavel">
    <input type="text"req="req"name="nf29"id="id29" class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">District:*</lavel>
</div>
</div>
<div class="col-xs-2">
<div id="lavel">
    <input type="text"req="req"name="nf30"id="id30"class="form-control"maxlength="6"minlength="6">
    <lavel class="floating-label">Pin Code:*</lavel>
</div>
</div>
</div>
</div>
</div>
<div class="tab">
<span class="step">4/7</span>  
 
<div class="panel panel-primary">
<div class="panel-body">
<i class="text-on-pannel  text-primary">Previous Reading Status of the child:(Skip if child is fresh.)</i>




<div class="col-xs-3">
<div id="lavel">
    <input type="text"req="req"name="nf36"id="id36"class="form-control"list="adcd">
    <lavel class="floating-label">Class:*</lavel>
  <datalist id="adcd">
    <option value="Fresh">
    <option value="Nur">
    <option value="L.K.G">
    <option value="U.K.G">
    <option value="I">
    <option value="II">
    <option value="III">
    <option value="IV">
    <option value="V">
    <option value="VI">
    <option value="VII">
  </datalist>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"name="nf37"id="id37"list="grade"class="form-control">
    <lavel class="floating-label">Pass Grade:</lavel>
  <datalist id="grade">
    <option value="A">
    <option value="B">
    <option value="C">
    <option value="D">
    </datalist>
</div>
</div>

<div class="col-xs-3">
<div id="lavel">
    <input type="number"name="nf38"id="id38"class="form-control">
    <lavel class="floating-label">Total Marks:</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="number"name="nf39"id="id39"class="form-control">
    <lavel class="floating-label">Percentage:</lavel>
</div>
</div>

<div class="col-xs-12">
<div id="lavel">
    <input type="text"name="nf40"id="id40"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">School Name where child was read:</lavel>
</div>
</div>
<div class="col-xs-9">
<div id="lavel">
    <input type="text"name="nf41"id="id41"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">School Address:</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"name="nf42"id="id42"class="form-control">
    <lavel class="floating-label">Postal Code:</lavel>
</div>
</div>
</div>
</div>
</div>

<div class="tab">
<span class="step">5/7</span>  
 
<div class="panel panel-primary">
<div class="panel-body">
<i class="text-on-pannel  text-primary">Take Admission and apply charges:</i>


<div class="col-xs-3">
<div id="lavel">
    <input type="text"req="req"name="nf43"id="id43"list="smt"class="form-control">
    <lavel class="floating-label">Admission in:*</lavel>
    <datalist id="smt">
    <option value="Hostel">
    <option value="School">
    </datalist>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"req="req"name="nf44"id="id44"list="ww"class="form-control">
    <lavel class="floating-label">Type:*</lavel>
    <datalist id="ww">
    <option value="Stayer">
    <option value="Outer">
    </datalist>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="number"req="req"placeholder="0.0"name="nf49"id="id49"class="form-control">
    <lavel class="floating-label">Ad.Charge:*</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="number"req="req"placeholder="0.0"name="nf50"id="id50"class="form-control">
    <lavel class="floating-label">Annual Charge:*</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"req="req"name="nf45"id="id45"class="form-control"list="adc">
    <lavel class="floating-label">Class:*</lavel>
    <datalist id="adc">
    <option value="Nur">
    <option value="LKG">
    <option value="UKG">
    <option value="I">
    <option value="II">
    <option value="III">
    <option value="IV">
    <option value="V">
    <option value="VI">
    <option value="VII">
    <option value="VIII">
    <option value="Pending">  
    <option value="Leaved">
  </datalist>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="text"value="A"name="nf46"id="id46"list="sec"class="form-control">
    <lavel class="floating-label">Section:</lavel>
    <datalist id="sec">
    <option value="A">
    <option value="B">
    <option value="C">
    <option value="D">
    </datalist>
</div>
</div>

<div class="col-xs-3">
<div id="lavel">
    <input type="number"req="req"placeholder="0.0" name="nf47"id="id47"class="form-control">
    <lavel class="floating-label">School Fee:*</lavel>
</div>
</div>
<div class="col-xs-3">
<div id="lavel">
    <input type="number"req="req"placeholder="0.0" name="nf48"id="id48"class="form-control">
    <lavel class="floating-label">Transport:*</lavel>
</div>
</div>
</div>
</div>
</div>
<div class="tab">
<span class="step">6/7</span>  
 
<div class="panel panel-primary">
<div class="panel-body">
<i class="text-on-pannel  text-primary">Upload Images & tick documents you received:</i>


<input id="pimgd" name="nf31"req="req" hidden>
<input id="simgd" name="nf32"req="req" hidden>
<table width=98% border=1>
<tr>
<td align="center" width="38%">HO/Sponsor's Image*</td>
<td align="center" width="38%">Student's Image*</td>
<td width="24%" align="center">Documents*</td></tr>
<tr>
<td><label for="pimgfile">
<img src="https://sites.google.com/site/kgndaftar/icon.png?" id="pimg" width="225px" height="260px"title="Tap on Image to change it.">
</label>
</td>
<td>
<label for="simgfile">
<img src="https://sites.google.com/site/kgndaftar/icon.png?" id="simg" width="225px" height="260px"title="Tap on Image to change it.">
</label>
</td>
<td style="color:green;font-size:11px;padding-left:3px;text-align:left;">
<i>Tick the document you receive.</i><hr>From Student:<br>
<input type="text"name="nf33" id="ostd"hidden>
<input type="checkbox"name="ch1"id="d1"value="Aadhaar"onchange="stF1(this)"> Aadhaar copy<br>
<input type="checkbox"name="ch1"id="d2"value="T.C"onchange="stF1(this)"> T.C<br>
<input type="checkbox"name="ch1"id="d3"value="Marks-sheet"onchange="stF1(this)"> Marks sheet<br>
<input type="checkbox"name="ch1"id="d4"value="Birth certificate"onchange="stF1(this)"> Birth certificate<br><hr>
From Sponsor/ HO:<br>
<input type="text"name="nf34" id="ospd"hidden>
<input type="checkbox"name="ch2"id="d5"value="Aadhaar"onchange="spF2(this)"> Aadhaar copy<br>
<input type="checkbox"name="ch2"id="d6"value="Voter ID"onchange="spF2(this)"> Voter ID<br>
<input type="checkbox"name="ch2"id="d7"value="Driving Licence"onchange="spF2(this)"> Driving licence<br>
<input type="checkbox"name="ch2"id="d8"value="Pan Card"onchange="spF2(this)"> Pancard<br>
<input type="checkbox"name="ch2"id="d9"value="PassBook"onchange="spF2(this)"> PassBook<br>
</td>
</tr>
<tr>
<td align="center"id="i4"style="color:green;font-size:10px;">Image background must be white</td>
<td align="center"id="i5"style="color:green;font-size:10px;">Image background must be white</td>
<td>(optional)</td>
</tr>
</table>
<i style="color:red;font-size:10px;">
*Only Image file size aqual to or smaller than 6.00 kb is allowed.</i>
<i style="color:black;font-size:10px;">
to reduce image file size, you can crop image and compress it. to compress visit <a href="">Compress Image</a></i>
</div>
 </div>
 </div>
 
<div class="tab">
<span class="step">7/7</span>  
 
<div class="panel panel-primary">
<div class="panel-body">
<i class="text-on-pannel  text-primary">Fill out the bank detail if child has his own else skip:</i>
 <div class="col-xs-4">
<div id="lavel">
    <input type="text"name="bkn"id="bkn"class="form-control"onkeyup="chkCase(this)">
    <lavel class="floating-label">Bank Name:</lavel>
</div>
</div>
<div class="col-xs-4">
<div id="lavel">
    <input type="number"id="bac" name="bac"class="form-control">
    <lavel class="floating-label">Account No:</lavel>
</div>
</div>

<div class="col-xs-4">
<div id="lavel">
    <input type="text"id="ifsc" name="ifsc"class="form-control">
    <lavel class="floating-label">IFSC Code:</lavel>
</div>
</div>
<div class="col-xs-6">
<textarea  name="adnote"rows="2"id="adnote" cols="50"Placeholder="Admission Note:"onkeyup="chkCase(this)"></textarea>
</div><div class="col-xs-6">
<textarea style="font-size:12px;" name="pnote"id="pnote"rows="2" cols="50"Placeholder="Payment Note:"onkeyup="chkCase(this)"></textarea></div>
</div>
</div>
</div>
</form>

<input type="file"id="simgfile" accept="image/*" onchange="loadImageFile2();">
<input type="file"id="pimgfile" accept="image/*" onchange="loadImageFile1();">





</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<script> 
    function loadImageFile1(){
    var files1 = document.getElementById("pimgfile").files;
    if (files1.length > 0) { 
    var fileToLoad = files1[0];
    var fileReader = new FileReader(); 
    fileReader.onload = function(fileLoadedEvent) {
    var srcData = fileLoadedEvent.target.result; 
    document.getElementById('pimg').src =srcData; 
    document.getElementById('pimgd').value =srcData; 
    }
    fileReader.readAsDataURL(fileToLoad);
  }
} 
        $('#pimgfile').on('change', function() { 
            const size =  
               (this.files[0].size / 1024 ).toFixed(2);
                $("#i4").html('<b>' + 
                   'Image file size: ' + size + " kb" + '</b>');
        }); 
        
        
        
         function loadImageFile2(){
    var files1 = document.getElementById("simgfile").files;
    if (files1.length > 0) { 
    var fileToLoad = files1[0];
    var fileReader = new FileReader(); 
    fileReader.onload = function(fileLoadedEvent) {
    var srcData = fileLoadedEvent.target.result; 
    document.getElementById('simg').src =srcData; 
    document.getElementById('simgd').value =srcData; 
    }
    fileReader.readAsDataURL(fileToLoad);
  }
} 
        $('#simgfile').on('change', function() { 
            const size =  
               (this.files[0].size / 1024 ).toFixed(2);
                $("#i5").html('<b>' + 
                   'Image file size: ' + size + " kb" + '</b>');
        }); 
   //step and function
    $(document).ready(function () {
    var current = 0;
    widget = $(".tab");
    btnnext = $(".next");
    btnback = $(".back");
    btnsubmit = $(".submit");
    btnclose = $(".btn-default");
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);
    btnnext.click(function () {
    if (current < widget.length) {
    //if ($("#iform").valid()) {
       widget.show();
       widget.not(':eq(' + (current++) + ')').hide();
       setProgress(current);
      //}
      }
     hideButtons(current);
    });
    // Back button click action
    btnback.click(function () {
        $("#pinfo").text("");
     if (current > 1) {
         current = current - 2;
     if (current < widget.length) {
         widget.show();
         widget.not(':eq(' + (current++) + ')').hide();
         setProgress(current);}
         }
         hideButtons(current);
         });
        btnsubmit.on("click", function() {
        $("#iform").onsubmit = submitFun();
   
    });
    btnclose.on("click", function() {
        current = 0;
       $('#pimg').prop("src", "/icon.png?");
       $('#simg').prop("src", "/icon.png?");
       $("#iform").trigger("reset");
        btnnext.trigger("click");
    });});
    // Change progress bar action
    var setProgress = function (currstep) {
    var percent = parseFloat(100 / widget.length) * currstep;
    percent = percent.toFixed();
    $(".progress-bar").css("width", percent + "%").html(percent + "%");};
         // Hide buttons according to the current step
    var hideButtons = function (current) {
    var limit = parseInt(widget.length);
    
    $(".action").hide();
    if (current < limit) 
    btnnext.show();
    btnclose.hide();
    if (current > 1) btnback.show();
    if (current === limit) {
        btnnext.hide();
        btnclose.hide();
        btnsubmit.show(); }};
</script>

        style.html           
  We have design the page and elements using css. All css codes are below.
<style>
body {width:70%;margin-left:10%;;
  background-size:cover;
  background-repeat:no-repeat;
  text-align: center;
  font-family: 'times', sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
textarea{
font-size:12px;width:330px;height:100px;}
hr{border:1px solid green;width:99%;height:0px;margin-bottom:0px;margin-top:1px;}
input[type=submit]{
width:50px;
border-radius: 50%;
border:none;
height:20px;font-size:10px;}
input[type=submit]:focus {
    outline: none;
}
input[type=submit]:active{
   background-color:red;
}
input[name=sid]{
width:100px;
font-weight:bold;
border:1px solid green;
height:18px;font-size:11px;
display:inline;}
input[name=sid]:focus {
    outline: none;
}
.btn-primary:focus {
    outline: none;
}
div[id="lavel"] {
  position: relative; /*  make label relate to div  */
  padding-top: 6px;
  padding-bottom:6px;
  /*  make space for label      */
}
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 1px;
  top: 15px;
  transition: 0.2s ease all;
}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: -1px;
}
lavel{
font-size:12px;
margin-left:5px;
background-color:white;}
input[type="file"]{display:none;}
input.invalid {
  background-color: #ffdddd;
}
input[type=text]{ 
    text-transform: uppercase;font-weight: bold;
}
input[type=number]{ 
    font-weight: bold;
}
#lo{
  border: 2px solid white;
  border-radius: 50%;
  border-top: 2px solid red;
  border-bottom: 2px solid green;
  width: 18px;
  height: 18px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  visibility:hidden;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
.tab .step{ 
  position:fixed; 
  top:20px; 
  left:12%;
  height: 20px;
  width: 40px;
  margin: 2 2px;
  border: 1px dotted green;  
  border-radius: 50%;
  display: inline-block;
  font-size:15px;
  font-weight:bold;
  color:green;
} 
.btn-primary{
width:50px;
border-radius: 50%;
border:none;
height:20px;font-size:10px;
}
.btn-default{
width:50px;
background-color: red;
border-radius: 50%;
border:none;
height:20px;font-size:10px;
}
.btn-default:hover{background-color:orange;}
.btn-primary:hover{background-color:orange;}
.ft .tf{ 
  position:fixed; 
  top:20px; 
  left:100px; 
} 
.sv:focus {
    outline: none;
}
.sv:hover{background-color:green;color:white;}
.sv{
font-size:12px;font-family:time;
display:inline;text-align:center;
border:1px solid green;
width:80px;
height:18px;}
.text-on-pannel {
  background: #fff;
  margin-left: 20px;
  position: absolute;
  padding: 2px 2px;
  margin-top: -46px;
}
.panel {
  /* for text on pannel */
  margin-top: 10px !important;text-align:left;width:99%;
}
.panel-body {
  padding-top: 30px !important;
}
</style>
              js.html          
This section of code helps other functions to run or design or selection of function. 
<script>
        function getInputValue(){
            var inputVal = document.getElementById("sid").value; 
           document.getElementById("pinfo").innerHTML = "<font size=3px>E"+inputVal+"</font>";}
    </script>
<script>
function stF1() {
  var ch1 = document.querySelectorAll('input[name=ch1]');
  var st = "";
  var i;
  for (i = 0; i < ch1.length; i++) {
    if (ch1[i].checked) {
      st = st + ch1[i].value + ",";}}
  document.getElementById("ostd").value = st;
}
function spF2() {
  var ch2 = document.querySelectorAll('input[name=ch2]');
  var sp = "";
  var l;
  for (l = 0; l < ch2.length; l++) {
    if (ch2[l].checked) {
      sp = sp + ch2[l].value + ",";}}
  document.getElementById("ospd").value = sp;
}
</script>
<script>
function setFunx(){
var svx = document.getElementById('sv');
var vfx = svx.options[svx.selectedIndex].value;
var vtx = svx.options[svx.selectedIndex].text;
var fm = document.getElementById('iform').setAttribute("onsubmit","event.preventDefault();"+vfx);
var fv = document.getElementById('btv').setAttribute("onclick", vfx);
if(vtx == "Submit"){
document.getElementById("sid").disabled = true;
document.getElementById("bts").disabled = false;
document.getElementById('btv').value = vtx;
document.getElementById("btv").style.visibility = "hidden";
}else{
document.getElementById('sid').setAttribute("required", "true");
document.getElementById("btv").disabled = false;
document.getElementById("sid").disabled = false;
document.getElementById("bts").disabled = true;
document.getElementById("btv").style.visibility = "visible";
document.getElementById('btv').value = vtx;}}
</script>
 
function.js.html          
        These all functions are require to operate the internal functions. Using following funcions we are sending and getting response back. 
<script>
function chkCase(elem) {
    var temp = elem.value;
     elem.value = temp.toLowerCase();
}
    function submitFun(fform) {
    var reqa = document.getElementById('id3').value;
     if(reqa === ""){
     document.getElementById('pinfo').innerHTML = "<i style='color:red;'>Aadhaar is required.</i>";
     }else{
    var loader ='Submitting...';
    document.getElementById('pinfo').innerHTML = loader;
    document.getElementById("btn").style.display ="none";
    document.getElementById("btp").style.display = "none";
    document.getElementById("btc").style.display = "none";
    document.getElementById("bts").style.display = "none";
    document.getElementById("lo").style.visibility = "visible";
    google.script.run.withFailureHandler(onFailure)
                     .withSuccessHandler(infoF)
                     .processF(fform);}}
           function infoF(fdata) {
        document.getElementById('pinfo').innerHTML = "";
        document.getElementById("lo").style.visibility = "hidden";
        if(fdata[0] == "EXA"){
        document.getElementById("btc").style.display = "inline";
        document.getElementById("btp").style.display = "inline";
        document.getElementById('pinfo').innerHTML = fdata[1];
         } else {
        document.getElementById('pinfo').innerHTML = "Admission number:<b>"+fdata[0];
        document.getElementById("bts").style.display = "none";
        document.getElementById("btc").style.display = "inline";
        }}
    function updateFun(fform) {
    var reqv = document.getElementById('sid').value;
     if(reqv === ""){
     document.getElementById('pinfo').innerHTML = "<i style='color:red;'>ID Number is required.</i>";
     }else{
    var loader ='Updating...';
    document.getElementById('pinfo').innerHTML = loader;
    document.getElementById("lo").style.visibility = "visible";
    google.script.run.withFailureHandler(onFailure)
                     .withSuccessHandler(stinfo)
                     .stForm(fform);}}
           function stinfo(sdata) {
        document.getElementById('pinfo').innerHTML = "";
        document.getElementById("lo").style.visibility = "hidden";
        document.getElementById('pinfo').innerHTML = sdata;
        document.getElementById("iform").reset();
        document.getElementById("btc").click();
        document.getElementById('pimg').src = "https://sites.google.com/site/kgndaftar/icon.png?";//sp-img
        document.getElementById('simg').src = "https://sites.google.com/site/kgndaftar/icon.png?";//st-img
        setFunx();
        }
   
    function deleteFun(dlp) {
    var reqv = document.getElementById('sid').value;
     if(reqv === ""){
     document.getElementById('pinfo').innerHTML = "<i style='color:red;'>ID Number is required.</i>";
     }else{
    var loader ='Deleting...';
    document.getElementById('pinfo').innerHTML = loader;
    document.getElementById("lo").style.visibility = "visible";
    google.script.run.withFailureHandler(onFailure)
                     .withSuccessHandler(dlpinfo)
                     .dlpForm(dlp);
           document.getElementById("iform").reset();
           return setFunx();}}
           function dlpinfo(ddata) {
        document.getElementById('pimg').src = "https://sites.google.com/site/kgndaftar/icon.png?";//sp-img
        document.getElementById('simg').src = "https://sites.google.com/site/kgndaftar/icon.png?";//st-img  
        document.getElementById('pinfo').innerHTML = "";
        document.getElementById("lo").style.visibility = "hidden";
        document.getElementById('pinfo').innerHTML = ddata;
        }
        
       
    function readFun(rform) {
    var reqv = document.getElementById('sid').value;
     if(reqv === ""){
     document.getElementById('pinfo').innerHTML = "<i style='color:red;'>ID Number is required.</i>";
     }else{
    var loader ='Getting details...';
    document.getElementById('pinfo').innerHTML = loader;
    document.getElementById("lo").style.visibility = "visible";
    google.script.run.withFailureHandler(onFailure)
                     .withSuccessHandler(gtinfo)
                     .submitID(rform);}}
        function gtinfo(pdata) {
        document.getElementById('pimg').src = "https://sites.google.com/site/kgndaftar/icon.png?";//sp-img
        document.getElementById('simg').src = "https://sites.google.com/site/kgndaftar/icon.png?";//st-img
        document.getElementById('pinfo').innerHTML = "";
        document.getElementById("lo").style.visibility = "hidden";
        if(pdata[0] == "N0"){
        document.getElementById('pinfo').innerHTML = pdata[1];
        }else{
        //write data
        document.getElementById('pinfo').innerHTML = pdata[0];
        document.getElementById('id1').value = pdata[1]; 
        document.getElementById('id2').value = pdata[2]; 
        document.getElementById('id3').value = pdata[3];
        document.getElementById('id4').value = pdata[4].toString();   
        document.getElementById('id5').value = pdata[5];
        document.getElementById('id6').value = pdata[6];
        document.getElementById('id7').value = pdata[7];
        document.getElementById('id8').value = pdata[8];
        document.getElementById('id9').value = pdata[9];
        document.getElementById('id10').value = pdata[10];
        document.getElementById('id11').value = pdata[11];
        document.getElementById('id12').value = pdata[12];
        document.getElementById('id13').value = pdata[13];
        document.getElementById('id14').value = pdata[14];    
        document.getElementById('id15').value = pdata[15];
        document.getElementById('id16').value = pdata[16];
        document.getElementById('id17').value = pdata[17];
        document.getElementById('id18').value = pdata[18];
        document.getElementById('id19').value = pdata[19];
        document.getElementById('id20').value = pdata[20];
        document.getElementById('id21').value = pdata[21];
        document.getElementById('id22').value = pdata[22];
        document.getElementById('id23').value = pdata[23];
        document.getElementById('id24').value = pdata[24];   
        document.getElementById('id25').value = pdata[25];
        document.getElementById('id26').value = pdata[26];
        document.getElementById('id27').value = pdata[27];
        document.getElementById('id28').value = pdata[28];
        document.getElementById('id29').value = pdata[29];
        document.getElementById('id30').value = pdata[30];
        document.getElementById('id36').value = pdata[31];
        document.getElementById('id37').value = pdata[32];
        document.getElementById('id38').value = pdata[33];
        document.getElementById('id39').value = pdata[34];
        document.getElementById('id40').value = pdata[35];
        document.getElementById('id41').value = pdata[36];
        document.getElementById('id42').value = pdata[37];
        document.getElementById('id43').value = pdata[38];
        document.getElementById('id44').value = pdata[39];
        document.getElementById('id45').value = pdata[40];
        document.getElementById('id46').value = pdata[41];
        document.getElementById('id47').value = pdata[42];
        document.getElementById('id48').value = pdata[43];
        document.getElementById('id49').value = pdata[49];
        document.getElementById('id50').value = pdata[50];
        document.getElementById('adnote').value = pdata[51];
        document.getElementById('bkn').value = pdata[52];
        document.getElementById('bac').value = pdata[53];
        document.getElementById('ifsc').value = pdata[54];
        document.getElementById('pnote').value = pdata[56];
        document.getElementById('ospd').value = pdata[44]; //sp-doc
        document.getElementById('ostd').value = pdata[45]; //st-doc
        document.getElementById('pimg').src = pdata[46];//sp-img
        document.getElementById('simg').src = pdata[47];//st-img
        document.getElementById('pimgd').value = pdata[46];//sp-img
        document.getElementById('simgd').value = pdata[47];//st-img
        document.getElementById('id35').value = pdata[48];
        var ch1u = document.querySelectorAll('input[name=ch1]');;
        for (r=0; r<ch1u.length; r++) {
        ch1u[r].checked = false;
        }
        var ch2u = document.querySelectorAll('input[name=ch2]');;
        for (k=0; k<ch2u.length; k++) {
        ch2u[k].checked = false;
        }
        var stdoc = pdata[45].split(",");
        var spdoc = pdata[44].split(",");
  var sList = stdoc;//student doc checked
  for (var i = 0; i < sList.length; i++) {
  if (sList[i] === "Aadhaar") {
  document.getElementById('d1').checked = true;}
  if (sList[i] === "T.C") {
  document.getElementById('d2').checked = true;}
  if (sList[i] === "Marks-sheet") {
  document.getElementById('d3').checked = true;}
  if (sList[i] === "Birth certificate") {
  document.getElementById('d4').checked = true;}}
  var iList = spdoc;//sponser doc checked
  for (var i = 0; i < iList.length; i++) {
  if (iList[i] === "Aadhaar") {
  document.getElementById('d5').checked = true;}
  if (iList[i] === "Voter ID") {
  document.getElementById('d6').checked = true;}
  if (iList[i] === "Driving Licence") {
  document.getElementById('d7').checked = true;}
  if (iList[i] === "Pan Card") {
  document.getElementById('d8').checked = true;}
  if (iList[i] === "PassBook") {
  document.getElementById('d9').checked = true;}}
       }}

   function onFailure(error){
           document.getElementById('pinfo').innerHTML = "<i style='color:red;'>"+error+"</i>";
           document.getElementById("lo").style.visibility = "hidden";
           document.getElementById("bts").style.display = "inline";
           document.getElementById("btp").style.display = "inline";
        }
</script>
read.gs              
    This is an internal function. Using this function, we are reading the detail of  student's id. This function is require to read data from the sheet.
var ws = SpreadsheetApp.openById('sheet id');
var wsP = ass.getSheetByName("alldatastore");
var pws = ass.getSheetByName("Diary");

function submitID(rform) {
  var code ="E"+rform.sid;
  var flag=1;
  var lr = wsP.getLastRow()+1;
  var lr = pws.getLastRow()+1;
      for(var i = 2;i <= lr;i++){
  var rid = wsP.getRange(i, 1).getValue();
  var rid = pws.getRange(i, 1).getValue();
      if(rid == code){
      flag=0;
  var b1 = wsP.getRange(i, 3).getValue();    
  var b2 = wsP.getRange(i, 4).getValue();
  var b3 = wsP.getRange(i, 19).getValue();
  var b4 = wsP.getRange(i, 5).getValue();      
  var b5 = wsP.getRange(i, 55).getValue();
  var b6 = wsP.getRange(i, 49).getValue();
  var b7 = wsP.getRange(i, 50).getValue();
  var b8 = wsP.getRange(i, 51).getValue();      
  var b9 = wsP.getRange(i, 52).getValue();
  var b10 = wsP.getRange(i, 53).getValue();
  var b11 = wsP.getRange(i, 54).getValue();      
  var b12 = wsP.getRange(i, 7).getValue();
  var b13 = wsP.getRange(i, 8).getValue();
  var b14 = wsP.getRange(i, 20).getValue();
  var b15 = wsP.getRange(i, 21).getValue();      
  var b16 = wsP.getRange(i, 9).getValue();
  var b17 = wsP.getRange(i, 10).getValue();
  var b18 = wsP.getRange(i, 11).getValue();      
  var b19 = wsP.getRange(i, 12).getValue();
  var b20 = wsP.getRange(i, 13).getValue();
  var b21 = wsP.getRange(i, 14).getValue();
  var b22 = wsP.getRange(i, 29).getValue();      
  var b23 = wsP.getRange(i, 31).getValue();
  var b24 = wsP.getRange(i, 32).getValue();
  var b25 = wsP.getRange(i, 27).getValue();      
  var b26 = wsP.getRange(i, 22).getValue();
  var b27 = wsP.getRange(i, 23).getValue();
  var b28 = wsP.getRange(i, 24).getValue();
  var b29 = wsP.getRange(i, 25).getValue();      
  var b30 = wsP.getRange(i, 26).getValue();
  var b31 = wsP.getRange(i, 34).getValue();
  var b32 = wsP.getRange(i, 35).getValue();      
  var b33 = wsP.getRange(i, 36).getValue();
  var b34 = wsP.getRange(i, 37).getValue();
  var b35 = wsP.getRange(i, 38).getValue();
  var b36 = wsP.getRange(i, 39).getValue();      
  var b37 = wsP.getRange(i, 40).getValue();
  var b38 = wsP.getRange(i, 15).getValue();
  var b39 = wsP.getRange(i, 16).getValue();      
  var b40 = wsP.getRange(i, 17).getValue();
  var b41 = wsP.getRange(i, 18).getValue();
  var b42 = pws.getRange(i, 9).getValue();
  var b43 = pws.getRange(i, 10).getValue();
  var b49 = wsP.getRange(i, 42).getValue();
  var b50 = pws.getRange(i, 23).getValue();
  var b51 = wsP.getRange(i, 43).getValue();      
  var b52 = wsP.getRange(i, 44).getValue();
  var b53 = wsP.getRange(i, 45).getValue();
  var b54 = wsP.getRange(i, 46).getValue();
  var b55 = wsP.getRange(i, 47).getValue();
  var b56 = pws.getRange(i, 22).getValue();
        
  var b44 = wsP.getRange(i, 33).getValue();//sp-doc
  var b45 = wsP.getRange(i, 41).getValue();//st-doc
  var b46 = wsP.getRange(i, 28).getValue();//sp-img      
  var b47 = wsP.getRange(i, 2).getValue();//st-img
  var b48 = wsP.getRange(i, 30).getValue();//sp-rela
  //system note
  
  var dd = new Date();
  var dt = dd.toLocaleString();
  var systemNote ="ID:"+code+",Mode:Read, Date:"+dt;
  var bvc = wsP.getRange(i, 58).setValue(systemNote); 
  var lastRow = wsP.getLastRow();
  var r1 = wsP.getRange('be'+ lastRow +':bh'+lastRow);r1.setNumberFormat('@STRING@');
  var result = ["Detail Fetched of ID: "+code+"",b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,b11,b12,b13,b14,b15,b16,b17,b18,b19,b20,b21,b22,b23,b24,b25,b26,b27,b28,b29,b30,b31,b32,b33,b34,b35,b36,b37,b38,b39,b40,b41,b42,b43,b44,b45,b46,b47,b48,b49,b50,b51,b52,b53,b54,b55,b56];
  return result;
    }}   
      if(flag==1){
  var result=["N0","ID <b>"+code+"</b> not exist."];
      return result;
    } }
          delete.gs        

  This is an internal function. Using this function we remove or delete student's data from the sheet using student's id.
var  ws = SpreadsheetApp.openById('sheetid');
var wsP = ass.getSheetByName("alldatastore");
var wD = ass.getSheetByName("Diary");

function dlpForm(dlp) {
  var dd = new Date();
  var dt = dd.toLocaleString();
  var code ="E"+dlp.sid;
  var systemNote ="ID:"+code+",Mode:Delete,Date:"+dt;
  var flag=1;
  var lr = wsP.getLastRow()+1;
  var lr = wD.getLastRow()+1;
      for(var i = 2;i <= lr;i++){
  var rid = wsP.getRange(i, 1).getValue();
  var rid = wD.getRange(i, 1).getValue();
      if(rid == code){
      flag=0;
  wsP.getRange(i, 58).setValue(systemNote);
  wsP.getRange(i, 1).setValue("delete");
  wsP.getRange(i, 56).setValue("removed");
  wD.getRange(i, 1).setValue("delete");
  wD.getRange(i, 7).setValue("Leaved");
  var lastRow = wsP.getLastRow();
  var r1 = wsP.getRange('be'+ lastRow +':bh'+lastRow);r1.setNumberFormat('@STRING@');
  var result = "Deletation is successfull.";
  return result;
    }}   
      if(flag==1){
  var result=["ID "+code+" not exist."];
      return result;
    } }
  update.gs             
       This is an internal function. Using this function we update the student's data using student's id.
var ws = SpreadsheetApp.openById('sheet id');
var wsP = ass.getSheetByName("alldatastore");
var pws = ass.getSheetByName("Diary");

function stForm(fform) {
  var code ="E"+fform.sid;
  var studentname = fform.nf1;
  var gender = fform.nf2;
  var studentAadhar = fform.nf3;
  var dob = fform.nf4;
  var bloodgroup = fform.nf5;
  var physi = fform.nf6;
  var recog = fform.nf7;
  var religion = fform.nf8;
  var caste = fform.nf9;
  var categ = fform.nf10;
  var ecol = fform.nf11;
  var faname = fform.nf12;
  var maname = fform.nf13;
  var fmobile = fform.nf14;
  var femail = fform.nf15;
  var pvill = fform.nf16;
  var ppo = fform.nf17;
  var pps = fform.nf18;
  var pdist = fform.nf19;
  var pstate = fform.nf20;
  var ppostal = fform.nf21;
  var spname = fform.nf22;
  var spmob = fform.nf23;
  var spaadhar = fform.nf24;
  var sptype = fform.nf25;
  var tvill = fform.nf26;
  var tpo = fform.nf27;
  var tps = fform.nf28;
  var tdist = fform.nf29;
  var tpostal = fform.nf30;
  var spimg = fform.nf31;
  var stimg = fform.nf32;
  var sdocument = fform.nf33;
  var spdocument = fform.nf34;
  var sprelation = fform.nf35;
  var prscl = fform.nf36;
  var prsgrade = fform.nf37;
  var prsmark = fform.nf38;
  var prsper = fform.nf39;
  var prsschool = fform.nf40;
  var prssad = fform.nf41;
  var prspostal = fform.nf42;
  var adin = fform.nf43;
  var adtype = fform.nf44;
  var adclass = fform.nf45;
  var adclsec = fform.nf46;
  var sclfee = fform.nf47;
  var vcharge = fform.nf48;
  var adcharge = fform.nf49;
  var annufee = fform.nf50;
  var bkn = fform.bkn;
  var bac = fform.bac;
  var ifsc = fform.ifsc;
  var adnote = fform.adnote;
  var pnote = fform.pnote;
  var dd = new Date();
  var dt = dd.toLocaleString();
  var flag=1;
  var lr = wsP.getLastRow()+1;
  var lr = pws.getLastRow()+1;
      for(var i = 2;i <= lr;i++){
  var rid = wsP.getRange(i, 1).getValue();
  var rid = pws.getRange(i, 1).getValue();
      if(rid == code){
      flag=0;
  wsP.getRange(i, 2).setValue(stimg);    
  wsP.getRange(i, 3).setValue(studentname);
  wsP.getRange(i, 4).setValue(gender);      
  wsP.getRange(i, 5).setValue(dob);
  wsP.getRange(i, 7).setValue(faname);
  wsP.getRange(i, 8).setValue(maname);      
  wsP.getRange(i, 9).setValue(pvill);
  wsP.getRange(i, 10).setValue(ppo);
  wsP.getRange(i, 11).setValue(pps);      
  wsP.getRange(i, 12).setValue(pdist);
  wsP.getRange(i, 13).setValue(pstate);
  wsP.getRange(i, 14).setValue(ppostal);
  wsP.getRange(i, 15).setValue(adin);      
  wsP.getRange(i, 16).setValue(adtype);
  wsP.getRange(i, 19).setValue(studentAadhar);
  wsP.getRange(i, 20).setValue(fmobile);
  wsP.getRange(i, 21).setValue(femail);
  wsP.getRange(i, 22).setValue(tvill);      
  wsP.getRange(i, 23).setValue(tpo);
  wsP.getRange(i, 24).setValue(tps);
  wsP.getRange(i, 25).setValue(tdist);      
  wsP.getRange(i, 26).setValue(tpostal);
  wsP.getRange(i, 27).setValue(sptype);
  wsP.getRange(i, 28).setValue(spimg);
  wsP.getRange(i, 29).setValue(spname);      
  wsP.getRange(i, 30).setValue(sprelation);
  wsP.getRange(i, 31).setValue(spmob);
  wsP.getRange(i, 32).setValue(spaadhar); 
  wsP.getRange(i, 33).setValue(spdocument);
  //prs field,
  wsP.getRange(i, 34).setValue(prscl);
  wsP.getRange(i, 35).setValue(prsgrade);
  wsP.getRange(i, 36).setValue(prsmark);
  wsP.getRange(i, 37).setValue(prsper);
  wsP.getRange(i, 38).setValue(prsschool);
  wsP.getRange(i, 39).setValue(prssad);
  wsP.getRange(i, 40).setValue(prspostal);
  
  wsP.getRange(i, 41).setValue(sdocument);
  wsP.getRange(i, 42).setValue(adcharge);      
  wsP.getRange(i, 43).setValue(adnote);
  wsP.getRange(i, 44).setValue(bkn);
  wsP.getRange(i, 45).setValue(bac);      
  wsP.getRange(i, 46).setValue(ifsc); 
  //date of data entry skip upade date write
  
  wsP.getRange(i, 48).setValue(dt);
  wsP.getRange(i, 49).setValue(physi);
  wsP.getRange(i, 50).setValue(recog);      
  wsP.getRange(i, 51).setValue(religion);
  wsP.getRange(i, 52).setValue(caste);
  wsP.getRange(i, 53).setValue(categ);      
  wsP.getRange(i, 54).setValue(ecol); 
  wsP.getRange(i, 55).setValue(bloodgroup); 
  wsP.getRange(i, 17).setValue(adclass); 
  wsP.getRange(i, 18).setValue(adclsec); 
  //update in diary
  pws.getRange(i, 2).setValue(studentname);
  pws.getRange(i, 3).setValue(faname);      
  pws.getRange(i, 4).setValue(tvill);
  pws.getRange(i, 5).setValue(fmobile);
  pws.getRange(i, 6).setValue(femail);      
  pws.getRange(i, 7).setValue(adclass);
  pws.getRange(i, 8).setValue(adclsec);
  pws.getRange(i, 9).setValue(sclfee);      
  pws.getRange(i, 10).setValue(vcharge);
  pws.getRange(i, 22).setValue(pnote);
  pws.getRange(i, 23).setValue(annufee);
  
  var systemNote ="ID:"+code+",Mode:Update, Date:"+dt;
  var bvc = wsP.getRange(i, 58).setValue(systemNote); 
  var lastRow = wsP.getLastRow();
  var r1 = wsP.getRange('e'+ lastRow +':bh'+lastRow);r1.setNumberFormat('@STRING@');
  
  var result = "Data successfully updated.";
  return result;
    }}   
      if(flag==1){
  var result1=["ID "+code+" not exist."];
      return result1;
    } }
LIVE DEMO
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT. I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM. THANKS FOR VISITING Have a nice day! -------------------------- -----------------







#apps script #automation #basic

2 comments

  1. where is the code for #cash-entry?
  2. please attach google sheet also
© ‧ CodyLab ‧ All rights reserved. Theme ByPremium Blogger Templates
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.