Javascript for IoT Clock Settings page. Page was too big for ESP8622 when it was included directly. Oops, can's serve .js out of a gist.

iotclock.js

var xmlhttp = new XMLHttpRequest();
var url = "http://apa.hopto.org/tz_data.json"; // do we need the domain??
var tzArr;

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        tzArr = JSON.parse(xmlhttp.responseText);
        populateOptions(tzArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function friendly(region) {
  if (region == 'America') return 'Americas';
  if (region == 'Atlantic' || region == 'Arctic' || region == 'Indian' || region == 'Pacific')
    return region + " Ocean";
  return region;
}

function populateOptions(arr) {
    var out = "tz_data.json version: " + arr.version;
    document.getElementById('lead').innerHTML = out;
	
	var reg = document.getElementById('region');
	//var matched = false;
	for(var i=0; i<arr.regions.length; i++){
	  appOp(reg, friendly(arr.regions[i].name), arr.regions[i].name);
	  if(document.getElementById('set_region').value == arr.regions[i].name){
	    reg.value = arr.regions[i].name; // select this option
		//matched = true;
	  }
    }
    appOp(reg, 'User Supplied TZ', 'User_TZ');
	//if(matched) doRegion();
	doRegion();

	var srv = document.getElementById('server_ddl');
	var matched = false;
	for(var i=0; i<arr.servers.length; i++){
	  appOp(srv, arr.servers[i].name, arr.servers[i].name);
	  if(arr.servers[i].name == document.getElementById('server').value) {
	    srv.value = arr.servers[i].name;
		document.getElementById('server').value = "";
		matched = true;
	  }
    }
    appOp(srv, 'Other...', 'txt');
	if ( !matched ) {
	  document.getElementById('server_txt').value = document.getElementById('server').value;
	  document.getElementById('server_txt').style.display = "";
	  document.getElementById('server').value = "";
	  document.getElementById('server_ddl').value = "txt";
	}
}

function DropDownChanged(oDDL) {
    var oTextbox = oDDL.form.elements["server_txt"];
    if (oTextbox) {
        oTextbox.style.display = (oDDL.value == "txt") ? "" : "none";
        if (oDDL.value == "")
            oTextbox.focus();
    }
}

function FormSubmit(oForm) {
    var oHidden = oForm.elements["server"];
    var oDDL = oForm.elements["server_ddl"];
    var oTextbox = oForm.elements["server_txt"];
    if (oHidden && oDDL && oTextbox)
        oHidden.value = (oDDL.value == "txt") ? oTextbox.value : oDDL.value;
}

function say_hi() {
  document.getElementById('lag').innerHTML = 'Lag paragraph.'; // can put the HTML of our choice in this <p>
  doRegion(); // attempt to get displayed after settings change
  doZone();
  DropDownChanged(document.getElementById('server_ddl'));
}

function doRegion() {
  //var x = document.getElementById('region').value;
  var reg_i = document.getElementById('region').selectedIndex - 1;
  var zon = document.getElementById('zone');
  clrOps(zon); // in case the user changes zone
  zon.selectedIndex = 0; // -- select --
  if (0 <= reg_i && reg_i < tzArr.regions.length) {
	for(var i=0; i < tzArr.regions[reg_i].zones.length; i++){
	  appOp(zon, tzArr.regions[reg_i].zones[i].name, tzArr.regions[reg_i].zones[i].name);
	  if(document.getElementById('set_zone').value == tzArr.regions[reg_i].zones[i].name){
	    zon.value = tzArr.regions[reg_i].zones[i].name; // select it
	  }
	}
	doZone(); // fill tz_string
    document.getElementById('zone_div').style.display = 'inline';
    document.getElementById('tz_div').style.display = 'none';
  } // if
  else if (reg_i > 0) { // must be TZ
    document.getElementById('tz_div').style.display = 'inline';
    document.getElementById('zone_div').style.display = 'none';
  }
}

function doZone() {
  var reg_i = document.getElementById('region').selectedIndex - 1;
  var zon_i = document.getElementById('zone').selectedIndex - 1;
  var tz = document.getElementById('tz_string');
  
  if (0 <= reg_i && reg_i < tzArr.regions.length) {
    if (0 <= zon_i && zon_i < tzArr.regions[reg_i].zones.length) {
	  tz.value = tzArr.regions[reg_i].zones[zon_i].tz;
	}
  }
}

function clrOps(sel) {
  var len, par;
  len = sel.options.length;
  for (var i = len; i > 1; i--) { // leaves first option
    par = sel.options[i - 1].parentNode;
    par.removeChild(sel.options[i - 1]);
  }
}

function appOp(sel, txt, val) {
  var opt = document.createElement('option');
  opt.appendChild(document.createTextNode(txt));
  opt.value = val;
  sel.appendChild(opt);
}