//a form is created with a submit button
//the allowed character types must be selected when creating a field
/** Insert the following in the head tags
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='googleSheetsPortal.css'>
<script src='guiForm.js'></script>
**/
/**
Call this function to get the text in a field
function getFieldText(nameOfField)
**/
/**
Call this function to create a text field
function makeField(nameOfField)
**/
/**
Call this function to get the UI as a string
getFormUiAsString()
**/
/** Insert the following in the script tags to execute code once the submit button has be pressed
function send(){}
**/
var fieldsAsString='';
function resetUi(){
fieldsAsString='';
}
function getFormUiAsString(){
return "<div class='container' style='width: 300px;'><form action='javascript:send()' autocomplete='off'><div class='form-group grid-container' style='display: grid;grid-template-columns: auto;padding: 10px;grid-gap: 10px;'>"+fieldsAsString+"<button type='submit' class='btn btn-default' id='submitButtonGuiForm'>Submit</button></div></form></div>";
}
function makeField(nameOfField){
fieldsAsString=fieldsAsString+"<input 'class='form-control' id='"+nameOfField+"' placeholder='"+nameOfField+"'>";
}
function makePasswordField(nameOfField){
fieldsAsString=fieldsAsString+"<input class='form-control' id='"+nameOfField+"' placeholder='"+nameOfField+"' type='password'>";
}
function makeTitle(sectionTitle){
fieldsAsString=fieldsAsString+ "<div id='"+sectionTitle+"' style='margin-bottom:10px;padding:5px;background-color:black;color:white; text-align:left'>"+sectionTitle+"</div>";
}
function makePicture(pictureFileName){
fieldsAsString=fieldsAsString+"<div style='margin-bottom:10px;' id='"+pictureFileName+"'><img src='"+pictureFileName+"' width=250></div>";
}
function makeChoice(choiceName,choiceText){
fieldsAsString=fieldsAsString+ "<div><input type='checkbox' id='"+choiceName+"' onclick='javascript:onClickCheckbox('"+choiceName+"')'><label for='"+choiceName+"'> "+choiceText+"</label></div>";
}
function makeHeading(headingName){
fieldsAsString=fieldsAsString+"<div id='"+headingName+"'><h5><u>"+headingName+"</u></h5></div>";
}
function makeBreak(){
fieldsAsString=fieldsAsString+'<div><hr></div>';
}
function makeText(textName,text){
fieldsAsString=fieldsAsString+"<div id='"+textName+"'>"+text+"</div>";
}
function makeDateField(nameOfField){
fieldsAsString=fieldsAsString+"<div style='white-space:nowrap;display: grid;grid-template-columns: 100px 50px 0px 42px 0px 58px;width:250;'><span style='padding: 10px;color:gray'>"+nameOfField+"</span><input class='form-control' placeholder='mm' id='"+nameOfField+"|monthField'><span></span><input class='form-control' placeholder='dd' id='"+nameOfField+"|dayField'><span ></span><input class='form-control' placeholder='yyyy' id='"+nameOfField+"|yearField'></div>";
}
function getFieldText(nameOfField){
var fieldText='';
try{fieldText=document.getElementById(nameOfField).value;}catch(err){}
return fieldText;
}
function setFieldText(nameOfField,text){
document.getElementById(nameOfField).value=text;
}
function isFieldEmpty(nameOfField){
if(getFieldText(nameOfField)==''){
return true;}
return false;}
function isCharactersValid(nameOfField,type){
var text=getFieldText(nameOfField).toLowerCase();
var matchLength=-1;
if(type=='alpha'){
try{matchLength=text.match(/[a-z]/g).length;}catch(err){}
if(text.length==matchLength){
document.getElementById(nameOfField).style='background-color:white';
return true;}else{
document.getElementById(nameOfField).style='background-color:lightyellow';
return false;}
}
if(type=='numeric'){
try{matchLength=text.match(/[0-9]/g).length;}catch(err){}
if(text.length==matchLength){
document.getElementById(nameOfField).style='background-color:white';
return true;}else{
document.getElementById(nameOfField).style='background-color:lightyellow';
return false;}
}
if(type==''){
if(text.length!=0){
document.getElementById(nameOfField).style='background-color:white';
return true;}else{
document.getElementById(nameOfField).style='background-color:lightyellow';
return false;}
}
}