<!doctype html>
<html>
<head>
<title>HTML5 Form Constraint Validation Example - RJM Programming - October, 2017</title>
<script type='text/javascript'>

// https://en.wikipedia.org/wiki/ISO_3166-2:AU
var origwpurl='';
var aurl='';

function before() {
var ii=1;
if (document.getElementById('currency_code').value != '') {
ii=ii;
} else if (document.getElementById('country_code_2').value != '') {
ii=ii;
} else if (document.getElementById('country_code_3').value != '') {
ii=ii;
} else if (document.getElementById('country_numerical').value != '') {
ii=ii;
} else {
document.getElementById('currency_code').setCustomValidity('Invalid Currency Code');
document.getElementById('currency_code').validity.customError;
document.getElementById('country_code_2').setCustomValidity('Invalid ISO Two Letter Country Code');
document.getElementById('country_code_2').validity.customError;
document.getElementById('country_code_3').setCustomValidity('Invalid ISO Three Letter Country Code');
document.getElementById('country_code_3').validity.customError;
document.getElementById('country_numerical').setCustomValidity('Invalid ISO Country Number');
document.getElementById('country_numerical').validity.customError;
}
}

function lastCheck(oform) {
var retval=true;
aurl='';
if (document.getElementById('country_code_2').value != '') {
aurl=origwpurl + '?wpiso=' + encodeURIComponent('//en.wikipedia.org/wiki/ISO_3166-2:' + document.getElementById('country_code_2').value.toUpperCase());
} else if (document.getElementById('country_code_3').value != '') {
aurl=origwpurl + '?wpiso=' + encodeURIComponent('//en.wikipedia.org/wiki/ISO_3166-1_alpha-3#' + document.getElementById('country_code_3').value.toUpperCase());
} else if (document.getElementById('country_numerical').value != '') {
aurl=origwpurl + '?wpiso=' + encodeURIComponent('//en.wikipedia.org/wiki/ISO_3166-1_numeric#' + document.getElementById('country_numerical').value);
}
if (1 == 1) {
if (document.getElementById('currency_code').value != '') {
retval=false;
window.open('//www.xe.com/currency/' + document.getElementById('currency_code').value.toUpperCase(), '_blank', 'top=200,left=400,width=500,height=400');
//document.getElementById('currency_code').value='';
} else if (document.getElementById('country_code_2').value != '') {
retval=false;
window.open('//www.iso.org/obp/ui/#iso:code:3166:' + document.getElementById('country_code_2').value.toUpperCase(), '_blank', 'top=200,left=400,width=500,height=400');
//document.getElementById('country_code_2').value='';
} else if (document.getElementById('country_code_3').value != '') {
retval=false;
window.open('//en.wikipedia.org/wiki/ISO_3166-1_alpha-3#Current_codes', '_blank', 'top=200,left=400,width=500,height=400');
//document.getElementById('country_code_3').value='';
} else if (document.getElementById('country_numerical').value != '') {
retval=false;
window.open('//en.wikipedia.org/wiki/ISO_3166-1_numeric#Current_codes', '_blank', 'top=200,left=400,width=500,height=400');
//document.getElementById('country_numerical').value='';
}
}
setTimeout(alater, 2000);
return retval;
}

function blater() {
document.getElementById('currency_code').value='';
document.getElementById('country_code_2').value='';
document.getElementById('country_code_3').value='';
document.getElementById('country_numerical').value='';
}

function alater() {
if (aurl != '') {
document.getElementById('mywikipediaiframe').style.display='block';
document.getElementById('mywikipediaiframe').src=aurl;
}
setTimeout(blater, 15000);
}

function checkinpid() {
origwpurl=document.getElementById('mywikipediaiframe').src;
var inask=location.search.split('inpid=')[1] ? location.search.split('inpid=')[1].split('&')[0] : '';
if (inask != '') {
document.getElementById('realform').style.display='block';
document.getElementById('firstcheck').style.display='none';
document.getElementById('myid').value=decodeURIComponent(inask);
} else if ((location.search.split('myid=')[1] ? location.search.split('myid=')[1].split('&')[0] : '') != '') {
document.getElementById('realform').style.display='block';
document.getElementById('firstcheck').style.display='none';
document.getElementById('myid').value=decodeURIComponent((location.search.split('myid=')[1] ? location.search.split('myid=')[1].split('&')[0] : ''));
}
}

</script>
</head>
<body onload='checkinpid();'>

<h1>Currency Code and Country Code Lookup</h1>
<h3>RJM Programming - October, 2017</h3>
<h4>Thanks to <a target=_blank title='Making Forms Fabulous with HTML5 - HTML5 Rocks' href='https://www.html5rocks.com/en/tutorials/forms/html5forms/'>Making Forms Fabulous with HTML5 - HTML5 Rocks</a> and <a target=_blank title='Wikipedia' href='//wikipedia.org'>Wikipedia</a></h4>

<form style='display:block;' id='firstcheck' role="form" novalidate action='./html5_form_constraint_validation.html' method='GET'>
<label for="inpid">ID (if not blank) Proceeds</label>
<input onblur="if (this.value.length > 0) { location.href=document.URL.split('?')[0].split('#')[0] + '?inpid=' + encodeURIComponent(this.value); } " style='width:30%;' type="text" id="inpid" name='inpid' placeholder="Enter ID (if not blank) Proceeds">
</form>

<table style='width:100%;'><tr><td id=left>
<form style='display:none;' id='realform' onsubmit='return lastCheck(this);' action='#' method='GET'>
<br>Identifier: <input style='width:30%;' type='text' id='myid' name='myid' required></input>
<br><br>Currency code: <input max="zzz" min="AAA" type="text" id="currency_code" name="currency_code" pattern="[A-Za-z]{3}" title="Three letter currency code"></input>
<br><br>ISO Two Letter Country code: <input max="zz" min="AA" type="text" id="country_code_2" name="country_code_2" pattern="[A-Za-z]{2}" title="ISO Two letter country code"></input>
<br><br>ISO Three Letter Country code: <input max="zzz" min="AAA" type="text" id="country_code_3" name="country_code_3" pattern="[A-Za-z]{3}" title="ISO Three letter country code"></input>
<br><br>ISO Numerical Country code: <input onblur="if (('' + this.value).length > 0) { this.value=('000' + this.value).slice(-3); } " style='width:10%;' max="999" min="000" type="number" step="1" id="country_numerical" name="country_numerical" pattern="[0-9]{3}" title="ISO Numerical country code"></input>
<br><br><br><input style='background-color:yellow;width:150px;height:50px;border:5px solid orange;' onclick="before();" type='submit' value='Information'></input>
</form><br><br>
<iframe title='Wikipedia information ... thanks' style='display:none;width:100%;height:600px;background-color:#f0f0f0;' id=mywikipediaiframe src='../PHP/fgc/'></iframe>
</td><td id=right><iframe id=rcntry style='display:none;width:350px;height:300px;' src=''></iframe><br><iframe id=rcntrymap style='display:none;width:500px;height:600px;' src=''></iframe></td></tr></table>
<input type=text style='position:absolute;left:-200px;top-200px;'value=''></input>
</body>
</html>