Admission form || School Management System || CRUD
This form is designed for the described School Management Software that is built on Apps Script and Google Sheets. Here, we are going to provide all necessary files required to run the software. We also need to follow all the steps carefully to make it error-free.
Please note that you should not remove any input field or sheet column because it may affect references.
adform.html
<script>
var zer = (num, places) => String(num).padStart(places, '0')
function getInputValue1(){
var inputVal = document.getElementById("enro").value;
document.getElementById("Funid1info").innerHTML = "<font size=3px>E"+zer(inputVal, 6)+"</font>";}
function setFun1(){
var svx = document.getElementById('fc1');
var vfx = svx.options[svx.selectedIndex].value;
var vtx = svx.options[svx.selectedIndex].text;
var fm = document.getElementById('studentRform').setAttribute("onsubmit","event.preventDefault();"+vfx);
var fv = document.getElementById('btf1').setAttribute("onclick", vfx);
let adreg = document.querySelector('#adreg').value;
document.getElementById("opre").value = adreg;
if(vtx == "newEntry"){
document.getElementById("enro").disabled = true;
document.getElementById("bts").disabled = false;
document.getElementById("btf1").disabled = true;
document.getElementById('enro').setAttribute("placeholder", "");
}else{
document.getElementById('enro').setAttribute("required", "true");
document.getElementById('enro').setAttribute("placeholder", "Enter ID");
document.getElementById("btf1").disabled = false;
document.getElementById("enro").disabled = false;
document.getElementById("bts").disabled = true;
document.getElementById("btf1").style.visibility = "visible";
document.getElementById('btf1').innerHTML = vtx+' <i class="fa fa-refresh fa-0"id="runfun1"></i>';}}
function duckselect1() {
var ch1 = document.querySelectorAll('input[name=ch1]');
var st = "";
for (var i = 0; i < ch1.length; i++) {
if (ch1[i].checked) {
st = st + ch1[i].value + ",";}}
document.getElementById("nf51").value = st;}
function duckselect2() {
var ch2 = document.querySelectorAll('input[name=ch2]');
var sp = "";
for (var l = 0; l < ch2.length; l++) {
if (ch2[l].checked) {
sp = sp + ch2[l].value + ",";}}
document.getElementById("nf52").value = sp;}
</script>
<script>
function newEntry1(data) {
var reqa = document.getElementById('nf9').value;
if(reqa === ""){
document.getElementById('Funid1info').innerHTML = "<i style='color:red;'>Document number is required.</i>";
}else{
var loader ='Submitting...';
document.getElementById('Funid1info').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("runfun1").classList.add('fa-spin');
google.script.run.withFailureHandler(addFailure)
.withSuccessHandler(infoF)
.addNewStudent(data);}}
function infoF(fdata) {
document.getElementById('Funid1info').innerHTML = "";
document.getElementById("runfun1").classList.remove('fa-spin');
if(fdata[0] == "exist"){
document.getElementById("btc").style.display = "inline";
document.getElementById("btp").style.display = "inline";
document.getElementById("bts").style.display = "none";
document.getElementById('Funid1info').innerHTML = fdata[1];
}else{
document.getElementById('Funid1info').innerHTML = "Addmissoin successfully taken with Id-<b>"+fdata[0]+fdata[1];
document.getElementById("bts").style.display = "none";
document.getElementById("btc").style.display = "inline";
}}
function updateFun1(data) {
var reqv = document.getElementById('enro').value;
if(reqv === ""){
document.getElementById('Funid1info').innerHTML = "<i style='color:red;'>ID Number is required.</i>";
}else{
document.getElementById('Funid1info').innerHTML = "Updating.....";
document.getElementById("runfun1").classList.add('fa-spin');
google.script.run.withFailureHandler(addFailure)
.withSuccessHandler(updateinfo)
.updateFunST(data);}}
function updateinfo(sdata) {
if(sdata[0] == "pass"){
document.getElementById("runfun1").classList.remove('fa-spin');
document.getElementById('Funid1info').innerHTML = sdata[1];
document.getElementById("studentRform").reset();
document.getElementById("btc").click();
document.getElementById('SponsorSrc').src = "";//sp-img
document.getElementById('studentSrc').src = "";//st-img
setFun1();
}else{
document.getElementById("runfun1").classList.remove('fa-spin');
document.getElementById('Funid1info').innerHTML = sdata[1];
}};
function deleteFun1(data) {
var reqv = document.getElementById('enro').value;
if(reqv === ""){
document.getElementById('Funid1info').innerHTML = "<i style='color:red;'>ID Number is required.</i>";
}else{
document.getElementById('Funid1info').innerHTML = "Deleting.....";
document.getElementById("runfun1").classList.add('fa-spin');
google.script.run.withFailureHandler(addFailure)
.withSuccessHandler(deleteinfo)
.deleteFunST(data);}}
function deleteinfo(sdata) {
if(sdata[0] == "pass"){
document.getElementById("runfun1").classList.remove('fa-spin');
document.getElementById('Funid1info').innerHTML = sdata[1];
document.getElementById("studentRform").reset();
document.getElementById("btc").click();
let adreg = document.querySelector('#adreg').value;
document.getElementById("opre").value = adreg;
setFun1();
}else{
document.getElementById("runfun1").classList.remove('fa-spin');
document.getElementById('Funid1info').innerHTML = sdata[1];
}};
function readFun1(data) {
var reqv = document.getElementById('enro').value;
if(reqv === ""){
document.getElementById('Funid1info').innerHTML = "<i style='color:red;'>ID Number is required.</i>";
}else{
document.getElementById('Funid1info').innerHTML = "Fetching detail.....";
document.getElementById("runfun1").classList.add('fa-spin');
google.script.run.withFailureHandler(addFailure)
.withSuccessHandler(readinfo)
.readFunST(data);}}
function readinfo(pdata){
if(pdata != ""){
for(var i=0; i<pdata.length; i++) {
document.getElementById("runfun1").classList.remove('fa-spin');
document.getElementById('Funid1info').innerHTML = "Detail fetched of Id: "+pdata[i][0];
document.getElementById('nf50').value = pdata[i][1];
document.getElementById('studentSrc').src = pdata[i][1];
document.getElementById('nf1').value = pdata[i][2];
document.getElementById('nf2').value = pdata[i][53];
document.getElementById('nf3').value = pdata[i][54];
document.getElementById('nf4').value = pdata[i][3];
document.getElementById('nf5').value = pdata[i][4].toString();
document.getElementById('nf6').value = pdata[i][55];
document.getElementById('nf7').value = pdata[i][56];
document.getElementById('nf8').value = pdata[i][21];
document.getElementById('nf9').value = pdata[i][22];
document.getElementById('nf09').value = pdata[i][52];
document.getElementById('nf11').value = pdata[i][6];
document.getElementById('nf12').value = pdata[i][7];
document.getElementById('nf14').value = pdata[i][19];
document.getElementById('nf15').value = pdata[i][20];
document.getElementById('nf16').value = pdata[i][8];
document.getElementById('nf17').value = pdata[i][9];
document.getElementById('nf18').value = pdata[i][10];
document.getElementById('nf19').value = pdata[i][11];
document.getElementById('nf20').value = pdata[i][12];
document.getElementById('nf21').value = pdata[i][13];
document.getElementById('nf22').value = pdata[i][41];
document.getElementById('nf24').value = pdata[i][42];
document.getElementById('nf23').value = pdata[i][43];
document.getElementById('nf25').value = pdata[i][45];
document.getElementById('nf26').value = pdata[i][47];
document.getElementById('nf27').value = pdata[i][14];
document.getElementById('nf28').value = pdata[i][15];
document.getElementById('nf29').value = pdata[i][16];
document.getElementById('nf30').value = pdata[i][17];
document.getElementById('nf31').value = pdata[i][18];
document.getElementById('nf32').value = pdata[i][26];
document.getElementById('nf33').value = pdata[i][27];
document.getElementById('nf34').value = pdata[i][28];
document.getElementById('nf35').value = pdata[i][29];
document.getElementById('nf36').value = pdata[i][24];
document.getElementById('nf37').value = pdata[i][25];
document.getElementById('nf39').value = pdata[i][31];
document.getElementById('nf40').value = pdata[i][32];
document.getElementById('nf41').value = pdata[i][33];
document.getElementById('nf42').value = pdata[i][74];
document.getElementById('nf43').value = pdata[i][70];
document.getElementById('nf44').value = pdata[i][36];
document.getElementById('nf45').value = pdata[i][37];
document.getElementById('nf46').value = pdata[i][67];
document.getElementById('nf47').value = pdata[i][68];
document.getElementById('nf48').value = pdata[i][69];
document.getElementById('nfoth').value = pdata[i][71];
document.getElementById('nf49').value = pdata[i][40];
document.getElementById('SponsorSrc').src = pdata[i][40];
document.getElementById('nfe').value = pdata[i][44];
document.getElementById('adnote').value = pdata[i][30];
document.getElementById('pnote').value = pdata[i][66];
document.getElementById('bkn').value = pdata[i][48];
document.getElementById('bknac').value = pdata[i][49];
document.getElementById('ifsc').value = pdata[i][50];
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 sList = pdata[i][23].split(",");
var iList = pdata[i][46].split(",");
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;}}
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;}}
}}else{
document.getElementById("runfun1").classList.remove('fa-spin');
document.getElementById('Funid1info').innerHTML = "ID NOT EXIST.";
}};
function addFailure(error){
var te = error;
if(te === "ScriptError: TypeError: Cannot read properties of null (reading 'adreg')"){
document.getElementById('Funid1info').innerHTML ="Still working...";
}if(te != "ScriptError: TypeError: Cannot read properties of null (reading 'adreg')"){
document.getElementById('Funid1info').innerHTML = "<i style='color:red;'>"+error+"</i>";
document.getElementById("runfun1").classList.remove('fa-spin');
document.getElementById("bts").style.display = "inline";
document.getElementById("btp").style.display = "inline";}}
</script>
<form id="studentRform" onsubmit="event.preventDefault();newEntry1('this')">
<fieldset class="w3-border-teal">
<legend><i>function:</i></legend>
<div class="w3-container w3-light-gray w3-small">
<table class="bnone" >
<tr class="nh">
<td width="35%" colspan="2"class="bnone">
<input id="opre"name="adreg"hidden>
<select name="fc1"id="fc1" onchange="setFun1()"class="w3-select w3-col s3 w3-small">
<option value="newEntry1(this)">newEntry</option>
<option value="readFun1(this)">READ</option>
<option value="updateFun1(this)">UPDATE</option>
<option value="deleteFun1(this)">DELETE</option></select>
<input type="number"name="enro"id="enro"placeholder="Enter ID"
class="w3-input w3-col s5 w3-small"onkeyup="getInputValue1();">
<button type="submit"id="btf1" onclick="readFun1(this)"
class="w3-btn w3-teal w3-hover-red w3-small">newEntry <i class="fa fa-refresh fa-0"id="runfun1"></i> </button>
</td>
<td class="bnone"width="45%" id="Funid1info"></td>
<td class="bnone"width="20%" align="right">
<button type="button"id="btp" class="btnc1 back-sm w3-button w3-teal w3-hover-red">Back</button>
<button type="button"id="btn"class="btnc1 next-sm w3-button w3-teal w3-hover-red">Next</button>
<button id="bts"class="btnc1 submit-sm w3-button w3-teal w3-hover-red">Submit</button>
<button type="button"id="btc"class="close-sm w3-button w3-red w3-hover-red" data-dismiss="modal">Close</button>
</td>
</tr>
</table>
</div>
</fieldset>
<div class="student-reg-form">
<span class="step w3-indigo">1/7</span>
<fieldset class="w3-border-teal">
<legend><i>Basic Information of the student:</i></legend>
<div class="w3-row-padding w3-light-gray w3-small">
<div class="w3-col s6">
<lavel>Full Name:*</lavel>
<input type="text"name="nf1"id="nf1"class="w3-input w3-border" onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>Religion:*</lavel>
<select name="nf2"id="nf2" class="w3-select w3-border">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Islam">Islam</option>
<option value="Baudh">Baudh</option>
<option value="Sikh">Sikh</option>
<option value="Parsi">Parsi</option>
<option value="Jain">Jain</option>
<option value="Other">Other</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Caste:*</lavel>
<input name="nf3"id="nf3"class="w3-input w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>Father's name:*</lavel>
<input type="text"name="nf11"id="nf11"class="w3-input w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>Mother's name:*</lavel>
<input type="text"name="nf12"id="nf12"class="w3-input w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>Gender:*</lavel>
<select name="nf4"id="nf4"class="w3-select w3-small w3-border">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Date of birth:*</lavel>
<input type="date"name="nf5"id="nf5"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>Category:</lavel>
<select name="nf6"id="nf6"class="w3-select w3-small w3-border">
<option value="">Select</option>
<option value="General">General</option>
<option value="Minority">Minority</option>
<option value="Backward">Backward</option>
<option value="Forward">Forward</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Economical-level:</lavel>
<select name="nf7"id="nf7"class="w3-select w3-small w3-border">
<option value="">Select</option>
<option value="Medium">Medium</option>
<option value="Poor">Poor</option>
<option value="Poorer">Poorer</option>
<option value="Poorest">Poorest</option>
<option value="Rich">Rich</option>
<option value="Richer">Richer</option>
<option value="Richest">Richest</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Document Type:*</lavel>
<select name="nf8"id="nf8"class="w3-select w3-small w3-border">
<option value="Aadhaar">Aadhaar</option>
<option value="Birth certificate">Birth certificate</option>
<option value="certificate">Certificate</option>
<option value="Marks-sheet">Marks-sheet</option>
<option value="Outer">Other</option>
<option value="noDoc">No document</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Document Number:*</lavel>
<input type="text" name="nf9"id="nf9"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>Physically:*</lavel>
<select name="nf10"id="nf10"class="w3-select w3-small w3-border">
<option value="Fit">Fit</option>
<option value="Blind">Blind</option>
<option value="Lame">Lame</option>
<option value="Paralyze">Paralyze</option>
<option value="Other">Other</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Blood Group:</lavel>
<input type="text"name="nf09"id="nf09"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>Mobile Number:*</lavel>
<input type="tel"name="nf14"id="nf14"class="w3-input w3-small w3-border"maxlength="10"minlength="10">
</div>
<div class="w3-col s3">
<lavel>Email ID:</lavel>
<input type="email"name="nf15"id="nf15"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s6">
<p class="w3-pale-red">Asterisk (*) marked field are necessory to filled out.</p>
</div>
</div>
</fieldset>
</div>
<div class="student-reg-form">
<span class="step w3-indigo">2/7</span>
<fieldset class="w3-border-teal">
<legend><i>Permament Address:*(Please provide the native address of the child.)</i></legend>
<div class="w3-row-padding w3-light-gray w3-small">
<div class="w3-col s6">
<lavel>Village:*</lavel>
<input type="text"name="nf16"id="nf16"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s6">
<lavel>Post Office:*</lavel>
<input type="text"name="nf17"id="nf17"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s6">
<lavel>Police Station:*</lavel>
<input type="text"name="nf18"id="nf18"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s6">
<lavel>District:*</lavel>
<input type="text"name="nf19"id="nf19"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>State:*</lavel>
<input type="text"name="nf20"id="nf20"value="Bihar"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>Postal Code:*</lavel>
<input type="number"name="nf21"id="nf21"class="w3-input w3-small w3-border"maxlength="6"minlength="6">
</div>
</div>
</fieldset>
</div>
<div class="student-reg-form">
<span class="step w3-indigo">3/7</span>
<fieldset class="w3-border-teal">
<legend><i>Temporary Address:*(Please provide the address where child lives in persent.)</i></legend>
<div class="w3-row-padding w3-light-gray w3-small">
<div class="w3-col s4">
<lavel>Sponsor name:*</lavel>
<input type="text"class="w3-input w3-small w3-border"name="nf22"id="nf22"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s2">
<lavel>Relation:</lavel>
<select name="nf24"id="nf24"class="w3-select w3-small w3-border">
<option value="">Select</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Cousin">Cousin</option>
<option value="Grandpa">Grandpa</option>
<option value="Grandma">Grandma</option>
<option value="Uncle">Uncle</option>
<option value="Aunty">Aunty</option>
<option value="Other">Other</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Mobile no:*</lavel>
<input type="tel"name="nf23"id="nf23"class="w3-input w3-small w3-border"maxlength="10"minlength="10">
</div>
<div class="w3-col s3">
<lavel>Email:</lavel>
<input type="email"name="nfe"id="nfe"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s3">
<lavel>Sponsor Aadhaar no:*</lavel>
<input type="number"name="nf25"id="nf25"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s9">
<lavel>Sponser Note:(if need.)</lavel>
<input type="text"name="nf26"id="nf26"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s12"style="background-color:gray;color:white;font-size:12px;margin:10px;">
Temporary address of the student:
</div>
<div class="w3-col s6">
<lavel>Village:*</lavel>
<input type="text"name="nf27"id="nf27"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s6">
<lavel>Post Office:</lavel>
<input type="text"name="nf28"id="nf28"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s6">
<lavel>Police Station:</lavel>
<input type="text"name="nf29"id="nf29"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s4">
<lavel>District:</lavel>
<input type="text"name="nf30"id="nf30" class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s2">
<lavel>Pin Code:</lavel>
<input type="text"name="nf31"id="nf31"class="w3-input w3-small w3-border"maxlength="6"minlength="6">
</div>
</div>
</fieldset>
</div>
<div class="student-reg-form">
<span class="step w3-indigo">4/7</span>
<fieldset class="w3-border-teal">
<legend><i>Previous Reading Status of the child:(Skip if child is fresh.)</i></legend>
<div class="w3-row-padding w3-light-gray w3-small">
<div class="w3-col s3">
<lavel>Class:*</lavel>
<select name="nf32"id="nf32"class="w3-select w3-small w3-border">
<option value="">Select</option>
<option value="Fresh">Fresh</option>
<option value="Nur">Nursery</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Pass Grade:</lavel>
<select name="nf33"id="nf33"class="w3-select w3-small w3-border">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Total Marks:</lavel>
<input type="number"name="nf34"id="nf34"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>Percentage:</lavel>
<input type="number"name="nf35"id="nf35"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s12">
<lavel>School Name where child was read:</lavel>
<input type="text"name="nf36"id="nf36"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s12">
<lavel>School Address:</lavel>
<input type="text"name="nf37"id="nf37"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
</div>
</fieldset>
</div>
<div class="student-reg-form">
<span class="step w3-indigo">5/7</span>
<fieldset class="w3-border-teal">
<legend><i>Admission-type, class and charges:</i></legend>
<div class="w3-row-padding w3-light-gray">
<div class="w3-col s3">
<lavel>Admission Type:*</lavel>
<select name="nf39"id="nf39" class="w3-select w3-small w3-border w3-col s8">
<option value="School">School</option>
<option value="Hostal">Hostal</option>
</select>
<select name="nf40"id="nf40" class="w3-select w3-small w3-border w3-col s4">
<option value="Outer">Outer</option>
<option value="Stayer">Stayer</option>
</select>
</div>
<div class="w3-col s3">
<lavel>Class & Sec:*</lavel>
<select name="nf44"id="nf44" class="w3-select w3-small w3-border w3-col s8">
<option value="Nur">Nursery</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="Pending">Pending</option>
<option value="Leaved">Leaved</option>
</select>
<select name="nf45"id="nf45" class="w3-select w3-small w3-border w3-col s4">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="w3-col s2">
<lavel>Admission Charge:*</lavel>
<input type="number"placeholder="0.0"name="nf41"id="nf41"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s4"style="background-color:gray;color:white;font-size:12px;">
<lavel>Note:</lavel>
<p><i>Admission charge is not included in payment history.</i></p>
</div>
<div class="w3-col s12"style="background-color:gray;color:white;font-size:12px;margin:10px;">
Following fees count monthly except annual fee.
</div>
<div class="w3-col s3">
<lavel>Annual Fee*</lavel>
<input type="number"placeholder="0.0"name="nf42"id="nf42"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>School Fee:</lavel>
<input type="number"placeholder="0.0"name="nf46"id="nf46"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>Transport Charge:*</lavel>
<input type="number"placeholder="0.0"name="nf43"id="nf43"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>Tuation Fee:*</lavel>
<input type="number"placeholder="0.0" name="nf47"id="nf47"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>Computer Fee:*</lavel>
<input type="number"placeholder="0.0" name="nf48"id="nf48"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s3">
<lavel>Other Fee:*</lavel>
<input type="number"placeholder="0.0" name="nfoth"id="nfoth"class="w3-input w3-small w3-border">
</div>
</div>
</fieldset>
</div>
<div class="student-reg-form">
<span class="step w3-indigo">5/7</span>
<fieldset class="w3-border-teal">
<legend><i>Upload Images & tick documents you received:</i></legend>
<div class="w3-row-padding w3-small w3-light-gray">
<input id="nf49" name="nf49" hidden>
<input id="nf50" name="nf50" hidden>
<table class="w3-table">
<tr class="nh">
<td rowspan=4 width="105px">
<label for="sudentImage">
<img src="" id="studentSrc" width="105px" height="137px">
</label>
</td>
<td colspan=2>From student</td>
<td rowspan=4 width="105px">
<label for="SponsorImage">
<img src="" id="SponsorSrc" width="105" height="137px">
</label></td>
<td colspan=2>From Sponsor/HO</td>
</tr>
<tr class="nh">
<td>
<input type="text"name="nf51" id="nf51"hidden>
<input type="checkbox"name="ch1"id="d1"value="Aadhaar"onchange="duckselect1(this)"> Aadhaar copy
</td>
<td>
<input type="checkbox"name="ch1"id="d2"value="T.C"onchange="duckselect1(this)"> T.C
</td>
<td>
<input type="text"name="nf52" id="nf52"hidden>
<input type="checkbox"name="ch2"id="d5"value="Aadhaar"onchange="duckselect2(this)"> Aadhaar copy
</td>
<td>
<input type="checkbox"name="ch2"id="d6"value="Voter ID"onchange="duckselect2(this)"> Voter ID
</td>
</tr>
<tr class="nh">
<td>
<input type="checkbox"name="ch1"id="d3"value="Marks-sheet"onchange="duckselect1(this)"> Marks sheet
</td>
<td>
<input type="checkbox"name="ch1"id="d4"value="Birth certificate"onchange="duckselect1(this)"> Birth certificate
</td>
<td>
<input type="checkbox"name="ch2"id="d7"value="Driving Licence"onchange="duckselect2(this)"> Driving licence
</td>
<td>
<input type="checkbox"name="ch2"id="d9"value="PassBook"onchange="duckselect2(this)"> PassBook
</td>
</tr>
<tr class="nh">
<td align="center"id="is4"style="color:green;font-size:10px;"colspan="2">Image size must be smaller thant 10kb</td>
<td align="center"id="is5"style="color:green;font-size:10px;"colspan="2">Image size must be smaller thant 10kb</td>
</tr>
</table>
<i style="color:red;font-size:14px;">
*Only Image file size aqual to or smaller than 10.00 kb is allowed.</i>
<i style="color:black;font-size:14px;">
to reduce image file size, you can crop image and compress it. to compress visit <a href="">Compress Image</a></i>
</div>
</fieldset>
</div>
<div class="student-reg-form">
<span class="step w3-indigo">7/7</span>
<fieldset class="w3-border-teal">
<legend><i>Fill out the bank detail if child has his own else skip:</i></legend>
<div class="w3-row-padding w3-light-gray w3-small">
<div class="w3-col s4">
<lavel>Bank Name:</lavel>
<input type="text"name="bkn"id="bkn"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s4">
<lavel>Account No:</lavel>
<input type="number"id="bknac" name="bknac"class="w3-input w3-small w3-border">
</div>
<div class="w3-col s4">
<lavel>IFSC Code:</lavel>
<input type="text"id="ifsc" name="ifsc"class="w3-input w3-small w3-border"onkeyup="lowerCase(this)">
</div>
<div class="w3-col s6">
<lavel>Note:</lavel>
<textarea name="adnote"rows="5"id="adnote"class="w3-input w3-small w3-border" cols="50"Placeholder="Admission Note:"onkeyup="lowerCase(this)"></textarea>
</div><div class="w3-col s6">
<lavel>Note:</lavel>
<textarea name="pnote"id="pnote"class="w3-input w3-small w3-border"rows="5" cols="50"Placeholder="Payment Note:"onkeyup="lowerCase(this)"></textarea></div>
</div>
</fieldset>
</div>
</form>
<input type="file"id="sudentImage" accept="image/*" onchange="stuImage();">
<input type="file"id="SponsorImage" accept="image/*" onchange="sponImage();">
<script>
//sponser Image select
function sponImage(){
var files1 = document.getElementById("SponsorImage").files;
if (files1.length > 0) {
var fileToLoad = files1[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result;
document.getElementById('SponsorSrc').src =srcData;
document.getElementById('nf49').value =srcData;}
fileReader.readAsDataURL(fileToLoad);}}
$('#SponsorImage').on('change', function() {
const size =(this.files[0].size / 1024 ).toFixed(2);
$("#is5").html('<b>' + 'Image file size: ' + size + " kb" + '</b>');});
</script>
<script>
//Image-Load-of-student
function stuImage(){
var files2 = document.getElementById("sudentImage").files;
if (files2.length > 0) {
var fileToLoad2 = files2[0];
var fileReader2 = new FileReader();
fileReader2.onload = function(fileLoadedEvent2) {
var srcData2 = fileLoadedEvent2.target.result;
document.getElementById('studentSrc').src =srcData2;
document.getElementById('nf50').value =srcData2; }
fileReader2.readAsDataURL(fileToLoad2);}}
$('#sudentImage').on('change', function(){
const size2 = (this.files[0].size / 1024 ).toFixed(2);
$("#is4").html('<b>' + 'Image file size: ' + size2 + " kb" + '</b>');});
</script>
<script>
//step and function
$(document).ready(function () {
var stepb = 0;
widb = $(".student-reg-form");
nextb = $(".next-sm");
backb = $(".back-sm");
subb = $(".submit-sm");
closeb = $(".close-sm");
widb.not(':eq(0)').hide();
hideBb(stepb);
setPrb(stepb);
nextb.click(function () {
if (stepb < widb.length) {
//if ($("#iform").valid()) {
widb.show();
widb.not(':eq(' + (stepb++) + ')').hide();
setPrb(stepb);
//}
}
hideBb(stepb);
});
// Back button click action
backb.click(function () {
$("#pinfo").text("");
if (stepb > 1) {
stepb = stepb - 2;
if (stepb < widb.length) {
widb.show();
widb.not(':eq(' + (stepb++) + ')').hide();
setPrb(stepb);}
}
hideBb(stepb);
});
subb.on("click", function() {
$("#studentRform").onsubmit = newEntry1();
});
closeb.on("click", function() {
stepb = 0;
$('#SponsorSrc').prop("src", "");
$('#studentSrc').prop("src", "");
$("#studentRform").trigger("reset");
setFun1();
nextb.trigger("click");
});});
// Change progress bar action
var setPrb = function (currstep) {
var percent = parseFloat(100 / widb.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width", percent + "%").html(percent + "%");};
// Hide buttons according to the stepb step
var hideBb = function (stepb) {
var limit = parseInt(widb.length);
$(".btnc1").hide();
if (stepb < limit)
nextb.show();
closeb.hide();
if (stepb > 1) backb.show();
if (stepb === limit) {
nextb.hide();
closeb.hide();
subb.show(); }};
</script>
Code.gs
Code.gs for admission will available in the next page.