$(document).ready(function () {
setSelectState();
setFormBody();
$('#state').change(function() {
//alert ($('#state').val());
setSelectDivision();
});
});
function setSelectDivision(){
var request;
$('#division').empty();
$('#division').append("<option value='' disabled selected>Wait...</option>")
$('#division').material_select();
request = $.ajax({
url: "https://script.google.com/macros/s/AKfycbygVbZJEaZEEaKGAYPLiFgNDgZ0dSaqgmnfFKUMXCtsCmNhoHEe/exec?action=finddivisions&statecode="+ $('#state').val(),
type: "get"
});
request.done(function(response, textStatus, jqXHR) {
// log a message to the console
//console.log(response);
//console.log(textStatus);
//console.log(jqXHR);
$('#division').empty();
$('#division').append("<option value='' disabled selected>Select Division</option>")
$.each(response.values, function(key, item) {
//console.log(item);
$('#division').append("<option value="+item.District_Code+">" + item.District_Name + "</option>");
$('#division').material_select();
});
});
// callback handler that will be called on failure
request.fail(function(jqXHR, textStatus, errorThrown) {
// log the error to the console
console.error(
"The following error occured: " +
textStatus, errorThrown
);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function() {
// reenable the inputs
//$inputs.prop("disabled", false);
});
}
function setSelectState(){
var request;
$('#state').empty();
$('#state').append("<option value='' disabled selected>Wait...</option>")
$('#state').material_select();
$('#division').empty();
$('#division').material_select();
request = $.ajax({
url: "https://script.google.com/macros/s/AKfycbygVbZJEaZEEaKGAYPLiFgNDgZ0dSaqgmnfFKUMXCtsCmNhoHEe/exec?action=getstates",
type: "get"
});
request.done(function(response, textStatus, jqXHR) {
// log a message to the console
//console.log(response);
//console.log(textStatus);
//console.log(jqXHR);
$('#state').empty();
$('#state').append("<option value='' disabled selected>Select State</option>")
$.each(response.values, function(key, item) {
//console.log(item);
$('#state').append("<option value="+item.State_Code+">" + item.State_Name + "</option>");
$('select').material_select();
});
});
// callback handler that will be called on failure
request.fail(function(jqXHR, textStatus, errorThrown) {
// log the error to the console
console.error(
"The following error occured: " +
textStatus, errorThrown
);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function() {
// reenable the inputs
//$inputs.prop("disabled", false);
});
}
function setFormBody(){
var labelPerson = "Delegate";
var htmlFormSection = "<div id='FormSection{Person}'><h5 class='left-align teal-text' style='padding-top:20px;'> <span id='Label{Person}'>{labelPerson}</span></h5><div class='input-field col s12'> <i class='material-icons prefix'>account_circle</i> <input id='{Person}_Name' type='text' name='{Person}_Name' class='validate' required='' aria-required='true'> <label for='{Person}_Name'>Name</label></div><div class='input-field col s12'> <i class='material-icons prefix'>picture_in_picture</i> <input id='{Person}_Pid' type='text' name='{Person}_Pid' class='validate' required='' aria-required='true'> <label for='{Person}_Pid'>Personal ID</label></div><div class='input-field col s12'> <i class='material-icons prefix'>assignment_ind</i> <input id='{Person}_Oid' type='text' name='{Person}_Oid' class='validate' required='' aria-required='true'> <label for='{Person}_Oid'>Organization ID</label></div><div class='input-field col s12'> <i class='material-icons prefix'>work</i> <select id='{Person}_Position' name='{Person}_Position'><option value='' disabled selected>Position</option><option value='Head'>Head</option><option value='Vice'>Vice</option><option value='Deputy'>Deputy</option><option value='Secretary'>Secretary</option><option value='Others'>Others</option> </select></div><div class='file-field input-field col s12'><div class='btn yellow accent-4'> <span>Picture</span> <input id='{Person}_File' name='{Person}_File' type='file'></div><div class='file-path-wrapper'> <input class='file-path validate' type='text' placeholder='Select Picture'></div></div></div>";
var totalPerson = 1;
for (i = 1; i < totalPerson + 1; i++) { /*create a unique label*/
var newLabelPerson = labelPerson.concat(" ", i); /*create unique id */
var newIdPerson = "Person" + i; /*replace id placeholders */
var regex = new RegExp('{Person}', 'g');
var newHtmlFormSection = htmlFormSection;
newHtmlFormSection = newHtmlFormSection.replace('{labelPerson}', newLabelPerson);
newHtmlFormSection = newHtmlFormSection.replace(regex, newIdPerson);
$('#FormBody').append(newHtmlFormSection);
}
$('select').material_select();
}
function isEmpty($inputs) {
var check = false;
$.each($inputs, function (key, item) {
if (item.value == "") {
check = true
}
});
return check;
}
function newForm(){
$('#DivDone').hide();
$('#DivForm').show();
$('#FormPerson')[0].reset();
setSelectState();
setFormBody();
}
function sendDone(){
$('#DivProgress').hide();
$('#DivDone').show();
}
function sendForm(){
var $inputs = $('#FormPerson').find("input, select");
if (isEmpty($inputs)) {
alert("Please fill all the fields.")
} else {
alert("Sending now...");
$('#DivForm').hide();
$('#DivProgress').show();
setTimeout(sendDone, 3000);
}
/*
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)
*/
}
| 
