{"id":63535,"date":"2024-05-05T03:01:56","date_gmt":"2024-05-04T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63535"},"modified":"2024-05-05T08:19:42","modified_gmt":"2024-05-04T22:19:42","slug":"colour-coded-form-with-onsubmit-captcha-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-form-with-onsubmit-captcha-tutorial\/","title":{"rendered":"Colour Coded Form With Onsubmit Captcha Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.htm?rand=765786\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colour Coded Form With Onsubmit Captcha Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/colour_code_captcha_again.jpg\" title=\"Colour Coded Form With Onsubmit Captcha Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Colour Coded Form With Onsubmit Captcha Tutorial<\/p><\/div>\n<p>We suspected there would be difficulties when, elaborating on yesterday&#8217;s <a title='Colour Coded Form Captcha Tutorial' href='#ccfct'>Colour Coded Form Captcha Tutorial<\/a>&#8216;s start &#8230;<\/p>\n<ul>\n<li>dynamically adding Captcha Colour Code logic (<font color=blue>via the use of external Javascript<\/font>) to an HTML webpage form &#8230; which had no form <i>onsubmit<\/i> event defined &#8230; when today we tested that logic for a form with existant <i>onsubmit<\/i> event logic (and needed) &#8230;<\/li>\n<li>new dynamically adding Captcha Colour Code logic (via the use of external Javascript (still <font color=blue>via the use of external Javascript<\/font> &#8230;<br \/>\n<code><br \/>\n<font color=blue>&lt;script type='text\/javascript' src='\/\/www.rjmprogramming.com.au\/colour_code_captcha.js' defer&gt;&lt;\/script&gt;<\/font><br \/>\n<\/code><br \/>\n) for an HTML webpage form &#8230; which had an existant form <i>onsubmit<\/i> event defined<\/li>\n<\/ul>\n<p>Recreating <i>onsubmit<\/i> logic panned out to be the wrong approach, and the KISS (&#8220;keep it simple signorina&#8221;) approach much more the go.  We ended up &#8230;<\/p>\n<ul>\n<li>recognising the existence of an <i>onsubmit<\/i> event<\/li>\n<li>show the Colour Coded Captcha image and &#8220;span&#8221; question near the document.body onload event &#8230; at the same time as &#8230;<\/li>\n<li>overlay the input type=submit <font size=1>(remembering from yesterday, that we arrange for this to exist)<\/font> button with an input type=button<\/li>\n<\/ul>\n<p> &#8230; to start with.  If the user solves the Captcha that input type=button is made to disappear, allowing the true original input type=submit be used as per the original webpage design &#8230;<\/p>\n<p><code><br \/>\n function onsubmitreturn(arguin) {<br \/>\n  var farris=[], vscanvasoh='', ifarris=0, newcimgis=null;<br \/>\n  if (imgcaptcha && submitcaptcha && spancaptcha && canvascaptcha && formelemofinterest) {<br \/>\n    if (('' + arguin) != 'frombutton' || 8 == 8) {<br \/>\n    if (('' + arguin).replace('null','').replace('undefined','') == '') {<br \/>\n      arguin=imgcaptcha.getAttribute('data-clickedcol');<br \/>\n    }<br \/>\n    spancaptcha.style.display='inline';<br \/>\n    imgcaptcha.style.display='block';<br \/>\n    \/\/alert('' + arguin + ' vs ' + mcollist[eval('' + formelemofinterest.getAttribute('data-need'))]);<br \/>\n    if (('' + arguin).replace('#','').toLowerCase() == mcollist[eval('' + formelemofinterest.getAttribute('data-need'))].replace('#','').toLowerCase()) {<br \/>\n  \/\/alert('yay');<br \/>\n      if (document.getElementById('myoverlaybo')) {<br \/>\n        document.getElementById('myoverlaybo').style.display='none';<br \/>\n      }<br \/>\n      formelemofinterest.submit();<br \/>\n      return true;<br \/>\n    } else {<br \/>\n      return false;<br \/>\n    }<br \/>\n    } else {<br \/>\n    spancaptcha.style.display='inline';<br \/>\n    imgcaptcha.style.display='block';<br \/>\n    return false;<br \/>\n    }<br \/>\n  } \/\/else {<br \/>\n    \/\/if (!imgcaptcha) { alert('no img'); }<br \/>\n    \/\/if (!spancaptcha) { alert('no span'); }<br \/>\n    \/\/if (!canvascaptcha) { alert('no canvas'); }<br \/>\n    \/\/if (!formelemofinterest) { alert('no form'); }<br \/>\n  \/\/}<br \/>\n  if (!canvascaptcha) {<br \/>\n    if (document.getElementById('canvascaptcha')) {<br \/>\n      canvascaptcha=document.getElementById('canvascaptcha');<br \/>\n    }<br \/>\n    if (!formelemofinterest) {<br \/>\n      if (('' + arguin).replace('null','').replace('undefined','') == '') {<br \/>\n        farris=document.getElementsByTagName('form');<br \/>\n        if (eval('' + farris.length) &gt; 0) {<br \/>\n          formelemofinterest=farris[0];<br \/>\n          if (formelemofinterest.innerHTML.indexOf('&lt;canvas') != -1) {<br \/>\n            vscanvasoh='&lt;canvas' + formelemofinterest.innerHTML.split('&lt;canvas')[0].split('&gt;')[0] + '&gt;';<br \/>\n            farris=document.getElementsByTagName('canvas');<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {<br \/>\n                canvascaptcha=farris[ifarris];<br \/>\n                if (canvascaptcha.outerHTML.indexOf(' id=') == -1) {<br \/>\n                  canvascaptcha.id='canvascaptcha';<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      } else if (('' + arguin.innerHTML).replace('null','').replace('undefined','') != '') {<br \/>\n          formelemofinterest=arguin;<br \/>\n          if (formelemofinterest.innerHTML.indexOf('&lt;canvas') != -1) {<br \/>\n            vscanvasoh='&lt;canvas' + formelemofinterest.innerHTML.split('&lt;canvas')[0].split('&gt;')[0] + '&gt;';<br \/>\n            farris=document.getElementsByTagName('canvas');<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {<br \/>\n                canvascaptcha=farris[ifarris];<br \/>\n                if (canvascaptcha.outerHTML.indexOf(' id=') == -1) {<br \/>\n                  canvascaptcha.id='canvascaptcha';<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  if (!formelemofinterest) { return false; }<br \/>\n  <br \/>\n  if (!canvascaptcha) {<br \/>\n    formelemofinterest.innerHTML+='&lt;canvas id=canvascaptcha style=display:none;&gt;&lt;\/canvas&gt;';<br \/>\n    canvascaptcha=document.getElementById('canvascaptcha');<br \/>\n  }<br \/>\n  if (!canvascaptcha) { return false; }<br \/>\n  if (('' + canvascaptcha.getAttribute('data-initialized')).replace('null','').replace('undefined','') == '') {<br \/>\n    newcimgis=new Image();<br \/>\n    newcimgis.onload=function(e){<br \/>\n      var osbit='';<br \/>\n      iandcwidth=newcimgis.width;<br \/>\n      iandcheight=newcimgis.height;<br \/>\n      if (iandcwidth &gt; 800) {<br \/>\n        canvascaptcha.width=iandcwidth;<br \/>\n        canvascaptcha.height=iandcheight;<br \/>\n      } else {<br \/>\n        canvascaptcha.width=800;<br \/>\n        canvascaptcha.height=Math.round(newcimgis.height * 800 \/ newcimgis.width);<br \/>\n      }<br \/>\n      canvascaptchacontext=canvascaptcha.getContext('2d');<br \/>\n      canvascaptchacontext.drawImage(newcimgis, 0, 0, newcimgis.width, newcimgis.height, 0, 0, canvascaptcha.width, canvascaptcha.height);<br \/>\n      canvascaptcha.setAttribute('data-initialized', 'y');<br \/>\n      mcolrand=eval(1 + Math.floor(Math.random() * eval(-1 + eval('' + mcollist.length))));<br \/>\n      if (formelemofinterest.innerHTML.replace(\/\\\"\/g,'').replace(\/\\'\/g,'').indexOf(' type=submit') == -1) {<br \/>\n      formelemofinterest.innerHTML+='&lt;br&gt;&lt;input id=subcaptcha type=submit style=display:block; value=Submit&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;div id=cstuff&gt;&lt;span id=spancaptcha style=\"display:none;background-color:' + mcollist[mcolrand] + ';\"&gt;Click below on same colour as background of this text.&lt;br&gt;On success image disappears and you can retry.&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&lt;img style=display:none; onclick=checkcaptcha(event); id=imgcaptcha data-clickedcol=\"#000000\" width=' + canvascaptcha.width + ' height=' + canvascaptcha.height + ' src=\"' + canvascaptcha.toDataURL('image\/png') + '\"&gt;&lt;\/img&gt;&lt;\/div&gt;';<br \/>\n      submitcaptcha=document.getElementById('subcaptcha');<br \/>\n      } else {<br \/>\n      if (formelemofinterest.innerHTML.indexOf(' type=\"submit\"') != -1) {<br \/>\n            vscanvasoh='&lt;input' + formelemofinterest.innerHTML.split(' type=\"submit\"')[0].split('&lt;input')[eval(-1 + formelemofinterest.innerHTML.split(' type=\"submit\"')[0].split('&lt;input').length)] + ' type=\"submit\"' + formelemofinterest.innerHTML.split(' type=\"submit\"')[1].split('&gt;')[0] + '&gt;';<br \/>\n            farris=document.getElementsByTagName('input');<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {<br \/>\n                submitcaptcha=farris[ifarris];<br \/>\n                overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n              }<br \/>\n            }<br \/>\n      } else if (formelemofinterest.innerHTML.indexOf(\" type='submit'\") != -1) {<br \/>\n            vscanvasoh='&lt;input' + formelemofinterest.innerHTML.split(\" type='submit'\")[0].split('&lt;input')[eval(-1 + formelemofinterest.innerHTML.split(\" type='submit'\")[0].split('&lt;input').length)] + \" type='submit'\" + formelemofinterest.innerHTML.split(\" type='submit'\")[1].split('&gt;')[0] + '&gt;';<br \/>\n            farris=document.getElementsByTagName('input');<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {<br \/>\n                submitcaptcha=farris[ifarris];<br \/>\n                overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n              }<br \/>\n            }<br \/>\n      } else {<br \/>\n            vscanvasoh='&lt;input' + formelemofinterest.innerHTML.split(\" type=submit\")[0].split('&lt;input')[eval(-1 + formelemofinterest.innerHTML.split(\" type=submit\")[0].split('&lt;input').length)] + \" type=submit\" + formelemofinterest.innerHTML.split(\" type=submit\")[1].split('&gt;')[0] + '&gt;';<br \/>\n            farris=document.getElementsByTagName('input');<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {<br \/>\n                submitcaptcha=farris[ifarris];<br \/>\n                overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n              }<br \/>\n            }<br \/>\n      }<br \/>\n      formelemofinterest.innerHTML+='&lt;br&gt;&lt;br&gt;&lt;div id=cstuff&gt;&lt;span id=spancaptcha style=\"display:none;background-color:' + mcollist[mcolrand] + ';\"&gt;Click below on same colour as background of this text.&lt;br&gt;On success image disappears and you can retry.&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&lt;img style=display:none; onclick=checkcaptcha(event); id=imgcaptcha data-clickedcol=\"#000000\" width=' + canvascaptcha.width + ' height=' + canvascaptcha.height + ' src=\"' + canvascaptcha.toDataURL('image\/png') + '\"&gt;&lt;\/img&gt;&lt;\/div&gt;';<br \/>\n      }<br \/>\n      formelemofinterest.setAttribute('data-need', '' + mcolrand);<br \/>\n      imgcaptcha=document.getElementById('imgcaptcha');<br \/>\n      spancaptcha=document.getElementById('spancaptcha');<br \/>\n  <br \/>\n  if (formelemofinterest.outerHTML.indexOf(' onsubmit=') == -1) {<br \/>\n    formelemofinterest.onsubmit=function(){ return realonsubmitreturn(''); };<br \/>\n  } else if (formelemofinterest.outerHTML.indexOf(' onsubmit=\"') != -1) {<br \/>\n    osbit=formelemofinterest.outerHTML.split(' onsubmit=\"')[1].split('\"')[0];<br \/>\n    if (osbit.indexOf('onsubmitreturn(') == -1) {<br \/>\n    oldOsHandler=formelemofinterest.onsubmit;<br \/>\n    formelemofinterest.setAttribute('data-wasos', osbit);<br \/>\n    if (11 == 11) {<br \/>\n    spancaptcha.style.display='inline';<br \/>\n    imgcaptcha.style.display='block';<br \/>\n    if (!submitcaptcha || 1== 1) {<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').indexOf(' type=submit') != -1) { \/\/ && !submitcaptcha) {<br \/>\n                if (!submitcaptcha && overlaybrect == null) {<br \/>\n                submitcaptcha=farris[ifarris];<br \/>\n                overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n    } else {<br \/>\n    overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n    }<br \/>\n    formelemofinterest.innerHTML+='&lt;input type=button style=\"z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;\" value=\"' + submitcaptcha.value + '\" id=myoverlaybo data-onclick=\"if (onsubmitreturn(' + \"'frombutton'\" + ')) { this.style.display=' + \"'none'\" + '; } \"&gt;&lt;\/input&gt;';<br \/>\n    overlaybo=document.getElementById('myverlaybo');<br \/>\n    } else if (1 == 1) {<br \/>\n    \/\/alert('1:' + submitcaptcha.id);<br \/>\n    overlaybrect=document.getElementById('mysub').getBoundingClientRect();<br \/>\n    formelemofinterest.innerHTML+='&lt;input type=button style=\"z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;\" value=\"' + submitcaptcha.value + '\" id=myoverlaybo onclick=\"spancaptcha.style.display=' + \"'inline'\" + '; imgcaptcha.style.display=' + \"'block'\" + '; alert(1987); this.style.display=' + \"'none'\" + '; \"&gt;&lt;\/input&gt;';<br \/>\n    overlaybo=document.getElementById('myverlaybo');<br \/>\n    \/\/submitcaptcha.onmouseover=function(event){ document.title=('' + event.target.id); return realonsubmitreturn(''); };<br \/>\n    \/\/alert('11:' + submitcaptcha.id);<br \/>\n    submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };<br \/>\n    \/\/alert('111:' + submitcaptcha.id + ' ' + submitcaptcha.outerHTML);<br \/>\n    } else {<br \/>\n    formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; }  };<br \/>\n    }<br \/>\n    }<br \/>\n  } else if (formelemofinterest.outerHTML.indexOf(\" onsubmit='\") != -1) {<br \/>\n    osbit=formelemofinterest.outerHTML.split(\" onsubmit='\")[1].split(\"'\")[0];<br \/>\n    if (osbit.indexOf('onsubmitreturn(') == -1) {<br \/>\n    oldOsHandler=formelemofinterest.onsubmit;<br \/>\n    formelemofinterest.setAttribute('data-wasos', osbit);<br \/>\n    if (11 == 11) {<br \/>\n    spancaptcha.style.display='inline';<br \/>\n    imgcaptcha.style.display='block';<br \/>\n    if (!submitcaptcha && overlaybrect == null) {<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').indexOf(' type=submit') != -1) { \/\/ && !submitcaptcha) {<br \/>\n                if (!submitcaptcha && overlaybrect == null) {<br \/>\n                submitcaptcha=farris[ifarris];<br \/>\n                overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n    } else {<br \/>\n    overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n    }<br \/>\n    formelemofinterest.innerHTML+='&lt;input type=button style=\"z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;\" value=\"' + submitcaptcha.value + '\" id=myoverlaybo data-onclick=\"if (onsubmitreturn(' + \"'frombutton'\" + ')) { this.style.display=' + \"'none'\" + '; } \"&gt;&lt;\/input&gt;';<br \/>\n    overlaybo=document.getElementById('myverlaybo');<br \/>\n    } else if (1 == 1) {<br \/>\n    \/\/alert('' + submitcaptcha.id);<br \/>\n    submitcaptcha.onmousedown=function(event){ return realonsubmitreturn(''); };<br \/>\n    submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };<br \/>\n    } else {<br \/>\n    formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; }  };<br \/>\n    }<br \/>\n    }<br \/>\n  } else if (formelemofinterest.outerHTML.indexOf(' onsubmit=') != -1) {<br \/>\n    osbit=formelemofinterest.outerHTML.split(' onsubmit=')[1].split(' ')[0];<br \/>\n    if (osbit.indexOf('onsubmitreturn(') == -1) {<br \/>\n    oldOsHandler=formelemofinterest.onsubmit;<br \/>\n    formelemofinterest.setAttribute('data-wasos', osbit);<br \/>\n    if (11 == 11) {<br \/>\n    spancaptcha.style.display='inline';<br \/>\n    imgcaptcha.style.display='block';<br \/>\n    if (!submitcaptcha || 2 == 2) {<br \/>\n            for (ifrarris=0; ifarris&lt;farris.length; ifarris++) {<br \/>\n              if (farris[ifarris].outerHTML.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').indexOf(' type=submit') != -1) { \/\/ && !submitcaptcha) {<br \/>\n                if (!submitcaptcha && overlaybrect == null) {<br \/>\n                submitcaptcha=farris[ifarris];<br \/>\n                overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n    } else {<br \/>\n    overlaybrect=submitcaptcha.getBoundingClientRect();<br \/>\n    }<br \/>\n    formelemofinterest.innerHTML+='&lt;input type=button style=\"z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;\" value=\"' + submitcaptcha.value + '\" id=myoverlaybo data-onclick=\"if (onsubmitreturn(' + \"'frombutton'\" + ')) { this.style.display=' + \"'none'\" + '; } \"&gt;&lt;\/input&gt;';<br \/>\n    overlaybo=document.getElementById('myverlaybo');<br \/>\n    } else if (1 == 1) {<br \/>\n    \/\/alert('3:' + submitcaptcha.id);<br \/>\n    submitcaptcha.onmousedown=function(event){ return realonsubmitreturn(''); };<br \/>\n    submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };<br \/>\n    } else {<br \/>\n    formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; }  };<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n    };<br \/>\n    setTimeout(function(){<br \/>\n    newcimgis.src='data:image\/webp;base64,UklGRl4JAABXRUJQVlA4TFEJAAAv\/8TvAFWO47aNJEly\/ll3uWb23mdETIAqEJYJ27jlP2ldJUmL4OXmWUiSiT+vKorqpIAtSayAqczxbr5ZTzK3uI16cFqLHXD63N7kOKgiN5Jt11bmf1QeuESHS0TYEAQxady3v7j36X4i3Ma2rSrnva8ZUAF1UAKpQw3uLoVpSO5ORurOk9t\/Rm7bhqGAfKDddlzOlCUAMmxLWX27nz02V7aXtm2ubHtW8xGe2du2bXtmZR1UdZ+MeKvKiMrsuhEnphRQbFtbtuzns19GgFtyqleJLLrDIBiRu3vVyDSoxP9b39d\/J2wkOVL586Pb1eOLT+DY1ha3+YgQFsKfsDLPyRazuVRZU7pUczr+Alme\/Qs4tq0de877\/qhsjOSPbaPNSulWfQag2rbtpM1KZ9t8vkwgbmvbVqKNRWRaERHN0aLb+ORI\/51AkqRIWUf+0e2hQa7o5J8tAhRg7YNpjC4tMvghLO9kPV\/AcGtisdAkSl63vsCl4A8qAARAYlC0ndEJPuCzsR6f8M38mokAoGliVZWeXMJos8KFycute6Auk6UZaUdoIjPkUAag9HOvIBVAolWU2AYpIBE2RME7ox0f8QP\/wEri9RkMk7NJF+WeddB0bKulTQX\/4z\/+4z\/+C\/7Hf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/zHf\/x3dl7rKLntCpv+8cVYxydibdbjtQxHjE0Mkfp+EGPcMLkMdNGltJpFfZKJba\/+yZmwqjPwEu+M9XiDz\/hD5JV5jGGrzUzOQx60y51blDaGNIOfFnIIKQxJqJpS92g7LGeCh\/ofUYz54CTxwwAGJ08sU9oaYukkR3HEkY4WAcVBd8ceH3l+1JkMYsqAomDJIkW3vi7Xe5hkk9SlbI4612ivzmfLAAollarTnu\/HHx5+yeaHX0442PkHqNo2Bcx3qiMdhZ+TgKk\/tYYzIqm6bDpyqEtSmVlbYbcRmMGijPemMhhfC1VFSWlwFMHUn+B\/wf\/4j\/8O\/gv+939BxYY7HF84LqMjuS3qYJX+Xu\/q8H+oOQVt63jczQucwxFnO1chdbrz5HMIIV6A1AnOd7bify6fMXIcASY2XqqWrF\/GQqHypUqvV2Uqxyf74NgCrpar4Crlkrp6NgGQvKmAJS53DoYuwGS7i7IkUlLs5\/0\/yA99wORgf4cksLpUsf7s2iZat\/KG+KagaTiQ0\/4wlXaEwiJ9v4u2gVgyNEeMdP5D6nsoajIYK7Q+lAc0yS3iwb4tDwgwLItQqh\/17r9a9UtEORN+RhS8wFu5xDNRNK0kNobGNH4MJttd+bPcyTKYyLQ+g1rZ+\/zDbeYDOQowLItRahwlV20fztwJvyif\/eGceCuKpsO\/gdnvVK\/oU7n4bu\/LRboSa2Y2\/IKM9of44L\/gf\/wX\/I\/\/Dv4L\/sd\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/\/Md\/e\/t9BrV8tw\/kKF3JVZM74Rf944tMTEPE0Bwx0vkPqe+hqMngJ+4zH8oDmuQW8WDflgcEGJZFKNWPevdfrfolZsPPiIIXeCuXeCaKppXExlY+iI6UJKMz84\/sh+ai9CskgdVQah2tW3kmwr7+RxT5VNohEptDLF3pcq64ymUAxTmuEaVw+4LR1+Es17rMFaL3ydcClM4gwMTmGzWAYlsslKxbtXq11apGvYwQ2xQUteVmDVwNVyuXXJVZM5sOgJb+tqyNsHwCU0U+lg2G1RruIOXCwnEZHcltUQerUMrMWrdGYAaLnIImoIBvsCxN3xD5SvA\/\/uM\/\/uO\/4H9nvMSGM6KQa7SMxNUPllW45T3uaiRVl02Hk6qaYlzvZkqfYtkR9uOIfeyvkNrDAWKWQcwHIVVF1ZmqJFWKVbej2mzmHwAl\/W\/PLg60j\/30lpgPkZJim6rT7h8H3u\/zst8TF3u\/HnS39S9Qtf28p9+hjgdvd5ECFNugKM\/0P6JYgVv8Mn7p+71SS59D\/Wa5VLGtqtKP\/RicPLEMmo79vG8GsdQyHDE2MUTc7raxIgOtgwClsKUz8ArvrLrxBh91BmMj8RQ01DL6ihbRXJRemccYttrM5DzkQbvcuUVpY1683ZW0wp4o+IAv+GzFjU\/4RuZZqNVr28M5D6XXZzDarHChi3LPOqVNeX9hVxS8x2erPqPXmouWyYP\/Bf87+I\/\/gv8F\/wv+x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x3\/8x39n2UzDXXfznyRLjZD\/O8yZsGnlv+\/6n9Rn\/zvNMYP28NIixqCtCy4+SGX3Xf8m0JjGz2+8IIlUK8thZn5s8Wslfu4OjIfEh1C\/WYzSNyMYnLzSSGwBZdEfRkjd6hH3uZ8QvuMbRpoW7Tjfyffw3Vbb1HfxvdphsAGgpKqkmz3hXvfrLw96zDxAsU3V6Zb9x1fuXbt\/lQt9o36hBSxH+uu+jmfdj6GveEH+sDIwjeUF+QupmiRGoMFs1X\/uSiqx35CqqrrkZJJQIkdv8JJMaz3wH\/\/x38F\/wf\/476wWSCGRw22k4jzhWoWrOEVmVLyYweC88Eek4x+koAd6oUsM+Ueu2e6ZLnlMq2\/PdJJRv8Fq1rW6NXmv8oQFAIP01z1tZE0MfcIL0iLVM1qQ4iG2+folv\/RgzIqt\/gesv6yltyEvdj\/QsJ\/3rfDcILlXsndbpyi1HMLEZ6MYJp\/1NklKWfwPqoq03ZX+m4buARrCbHfgq5FIL0PJMV1MktmuLiWnTXivMWqdCX7WdqSPEcZW4dOx4H\/8F\/yP\/\/gv+B\/\/Bf\/jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/7jP\/47sfGzRSg1XRCd8038CPxnf8wd2E\/n43FzM9KDUMt\/M\/KtUs1+3nfEshsA';<br \/>\n    }, 2000);<br \/>\n  }<br \/>\n<br \/>\n  return false;<br \/>\n }<br \/>\n<\/code>  <\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.js-GETME\">a changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.js-GETME\">colour_code_captcha.js<\/a> external Javascript helping out <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html-GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html-GETME\">colour_code_captcha.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.htm\">testing HTML with onsubmit already defined<\/a> &#8230;<\/p>\n<p><iframe src=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.htm?rand=6547364\" style=\"width:100%;height:1000px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-form-with-onsubmit-captcha-tutorial\/'>Colour Coded Form With Onsubmit Captcha Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ccfct'>Previous relevant <a target=_blank title='Colour Coded Form Captcha Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-form-captcha-tutorial\/'>Colour Coded Form Captcha Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colour Coded Form Captcha Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/colour_code_captcha.gif\" title=\"Colour Coded Form Captcha Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Colour Coded Form Captcha Tutorial<\/p><\/div>\n<blockquote><p>\nAre you human?\n<\/p><\/blockquote>\n<p>This is not such a silly question, in the online world.  There are ways to access software with no real human intervention among &#8230;<\/p>\n<ul>\n<li>legitimately<\/li>\n<li>usefully<\/li>\n<li>unintendedly<\/li>\n<li>maliciously<\/li>\n<\/ul>\n<p> &#8230; and if you design a web application looking after details entered by a user, often you want to ensure the processing is being done by a real user, in the first two ways.<\/p>\n<p>Years ago, with this in mind, came <a target=_blank title='CAPTCHA information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/CAPTCHA'>CAPTCHA<\/a> logic &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/CAPTCHA'><p>\nA CAPTCHA (\/\u02c8k\u00e6p.t\u0283\u0259\/ KAP-ch\u0259) is a type of challenge\u2013response test used in computing to determine whether the user is human in order to deter bot attacks and spam.\n<\/p><\/blockquote>\n<p>Those ones with the segmented images and you are asked to click in all parts containing a bike, for instance, yours truly finds very tricky.  Yes, today&#8217;s idea from us is a lot simpler.  It just involves &#8230;<\/p>\n<ul>\n<li>colour coding<\/li>\n<li>a Dutch artistic genius &#8230; <a target=_blank title='Piet Mondrian information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Piet_Mondrian'>Piet Mondrian<\/a> &#8230;<\/li>\n<li><a target=_blank href='https:\/\/pixabay.com\/illustrations\/mondrian-red-blue-yellow-1504681\/'>Pixabay<\/a>&#8216;s access to that genius &#8230; thanks, all concerned &#8230;<\/li>\n<li>a love of simplicity (and mostly, primary colours) &#8230;<\/li>\n<li>HTML<sub>5<\/sub> <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element &#8230; especially it&#8217;s method &#8230;<\/li>\n<li><a target=_blank title='HTML Canvas element getImageData method information from w3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_getimagedata.asp'>getImageData()<\/a> method<\/li>\n<\/ul>\n<p> &#8230; allowing us to scrutinize image pixel colours at a clicked position.  And just in case users are colour blind, we diss any colour names and use background comparison question reasoning in the code.<\/p>\n<p>As seemingly silly as this sounds, it&#8217;s insertion into an HTML webpage <a target=_blank title='HTML form element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_form.asp'>form<\/a> element&#8217;s <a target=_blank title='Javascript onsubmit event information from W3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'><i>onsubmit<\/i><\/a> event logic (and we found out, we needed to force an <a target=_blank title='HTML input type=submit button information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_type_submit.asp'>input type=submit<\/a> button, if not there), is an extra step to deter processes not being run by a real user accessing the form.<\/p>\n<p>Today, we&#8217;ve supplied a really simple parent overseer <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html_GETME\">colour_code_captcha.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html\">example usage<\/a> (that just writes a personalized <font size=1>(but <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=cfNzZre-sIU'>not gift wrapped<\/a>, alas)<\/font> welcome message near the top of the webpage)<\/a> &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n<font color=blue>&lt;script type='text\/javascript' src='\/\/www.rjmprogramming.com.au\/colour_code_captcha.js' defer&gt;&lt;\/script&gt;<\/font><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n var fname=location.search.split('fname=')[1] ? decodeURIComponent(location.search.split('fname=')[1].split('&')[0]) : \"\";<br \/>\n var lname=location.search.split('lname=')[1] ? decodeURIComponent(location.search.split('lname=')[1].split('&')[0]) : \"\";<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"if ((fname + lname).trim() != '' && document.referrer.indexOf('\/colour_code_captcha.') != -1) { document.getElementById('welcome').innerHTML='&lt;h2&gt;Welcome to ' + fname + ' ' + lname + ' at ' + ('' + new Date()) + ' ...&lt;\/h2&gt;';  }\"&gt;<br \/>\n&lt;div id=welcome&gt;&lt;\/div&gt;<br \/>\n&lt;form data-onsubmit=\"return onsubmitreturn('');\" action='.\/colour_code_captcha.html' method=GET&gt;<br \/>\n&lt;input style=text placeholder=\"First name\" name=fname type=text&gt;&lt;\/input&gt;&lt;br&gt;<br \/>\n&lt;input style=text placeholder=\"Last name\" name=lname type=text&gt;&lt;\/input&gt;&lt;br&gt;<br \/>\n&lt;br&gt;&lt;input id=mysub type=submit value=\"Say hello ...\"&gt;&lt;\/input&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; of that <font color=blue>one external Javascript script<\/font> tool doing just about all the CAPTCHA work insinuated into the parent webpage&#8217;s first such HTML form element found, via <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.js_GETME\">colour_code_captcha.js<\/a> first draft external Javascript you can also try below &#8230;<\/p>\n<p><iframe src=\"https:\/\/www.rjmprogramming.com.au\/colour_code_captcha.html\" style=\"width:100%;height:1000px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63521' onclick='var dv=document.getElementById(\"d63521\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/captcha\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63521' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63535' onclick='var dv=document.getElementById(\"d63535\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onsubmit\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63535' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We suspected there would be difficulties when, elaborating on yesterday&#8217;s Colour Coded Form Captcha Tutorial&#8216;s start &#8230; dynamically adding Captcha Colour Code logic (via the use of external Javascript) to an HTML webpage form &#8230; which had no form onsubmit &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-form-with-onsubmit-captcha-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2367,174,184,1502,211,224,4742,4506,2988,400,409,452,2800,576,578,4419,590,599,652,3373,4740,830,861,870,1712,1918,1988,4741,997,2085,4743,1105,1114,2334,3536,2005,1319,1891,1358,1418],"class_list":["post-63535","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-answer","tag-button","tag-canvas","tag-captcha","tag-click","tag-colour","tag-colour-blindness","tag-colour-code","tag-defer","tag-event","tag-external-javascript","tag-form","tag-getimagedata","tag-html","tag-html5","tag-human","tag-image","tag-img","tag-javascript","tag-logic","tag-mondrian","tag-navigation","tag-onclick","tag-onload","tag-onsubmit","tag-pixel","tag-position","tag-primary-colours","tag-programming","tag-question","tag-real-person","tag-script","tag-security","tag-submit","tag-test","tag-tool","tag-tutorial","tag-user","tag-validation","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63535"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=63535"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63535\/revisions"}],"predecessor-version":[{"id":63545,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63535\/revisions\/63545"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=63535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=63535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=63535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}