{"id":50865,"date":"2020-11-14T03:01:07","date_gmt":"2020-11-13T17:01:07","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50865"},"modified":"2020-11-13T19:42:17","modified_gmt":"2020-11-13T09:42:17","slug":"favourites-poll-email-moderation-contenteditable-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/favourites-poll-email-moderation-contenteditable-tutorial\/","title":{"rendered":"Favourites Poll Email Moderation Contenteditable Tutorial"},"content":{"rendered":"
\"Favourites<\/a>

Favourites Poll Email Moderation Contenteditable Tutorial<\/p><\/div>\n

We think today’s blog posting title gives hints, but doesn’t completely give the game away to ask you, on top of the progress with our Favourites Poll up to yesterday’s Favourites Poll Email Moderation Client Validation Tutorial<\/a> …<\/p>\n

\nWhat could be a layer of moderation and user experience improvement to apply to this web application?\n<\/p><\/blockquote>\n

Anyone, anyone?<\/a> Yes, Stella Pajunas-Garnand<\/a>, open up the “Type” data item to be able to be defined by a user. And continuing that line of thinking (and not looking at today’s blog posting title)<\/font>, what might be a cute idea in HTML (via PHP) to achieve this?<\/p>\n

Anyone, anyone?<\/a> Yes, you next to R2D2 … is it …<\/font> W3C<\/a>, yes, splash the code with …<\/p>\n

\ncontenteditable<\/a> global attribute magic<\/font>\n<\/p><\/blockquote>\n

… such as …<\/p>\n


\n<th id='thfavouritetype'><div onblur='newtype(this);' title='Can moderate a new type you define via your keyboard here, as required' contenteditable=true id=thtype><\/font>Type<\/div><\/font><\/th>
\n<\/code><\/p>\n

… and even …<\/p>\n

<?php echo ”
\n
\n<td id='tdfavouritetype'><div title='Use keyboard to enter your own new type' onblur=dnewtype(this); onkeydown=dotdtypek(event); contenteditable=true id=tdtype><\/font><select onchange='selconv=huhit(this.value);' id=favouritetype name=favouritetype><option value=Book>Book<\/option><option value=Movie>Movie<\/option><option value=Play>Play<\/option><option value=Song>Song<\/option><option value=Video>Video<\/option><option value=Audio>Audio<\/option>\" . $anyextras . \"<\/select><\/div><\/font><\/td>
\n<\/code>
\n“; ?><\/p>\n

… that last one a first for us here at RJM Programming allowing an embedded dropdown (select element) be temporary clobbered via HTML div keyboard “onkeydown” action and “onblur” event resurrection, perhaps with a new option element added, perhaps, via a new user entered Favourites Poll “Type” (data item) value, sent off to RJM Programming for moderation along with the accompanying “Title” (data item) value. See the new Javascript below regarding these event logics …<\/p>\n

<?php
\n$anyextras=””;
\n$ourlistc=”Book,Movie,Play,Song,Video,Audio”;
\n$ourlist=[“Book”,”Movie”,”Play”,”Song”,”Video”,”Audio”];
\n$mytype=””;
\n$umytype=””;
\n
\n\/\/ PHP updates global variables above
\n\/\/ End of … PHP updates global variables above
\n
\necho ”
\n
\nvar dou=false;
\nvar mytype='\" . $mytype . \"';
\nvar umytype='\" . $umytype . \"';
\nvar alltogether=\\\"\" . $ourlistc . str_replace('\"','',$anyextras) . \"\\\";
\n
\n function newtype(odiv) {
\n if ((odiv.innerText || odiv.contentWindow || odiv.contentDocument).trim() == '') {
\n odiv.innerHTML='Type';
\n } else {
\n mytype=(odiv.innerText || odiv.contentWindow || odiv.contentDocument);
\n umytype=mytype;
\n if (umytype.substring(0,1) == umytype.substring(0,1).toLowerCase()) {
\n umytype=umytype.replace(umytype.substring(0,1).toLowerCase(), umytype.substring(0,1).toUpperCase());
\n }
\n if (alltogether.indexOf(umytype) == -1) {
\n document.getElementById('favouritetype').innerHTML+='<option value=\\\"' + umytype + '\\\">' + umytype + '<\/option>';
\n document.getElementById('favouritetype').value=umytype;
\n dou=true;
\n selcon=document.getElementById('favouritetype').outerHTML;
\n selconv=document.getElementById('favouritetype').value;
\n prevh=document.getElementById('htimestamp').value;
\n document.getElementById('htimestamp').value+=umytype;
\n }
\n odiv.innerHTML='Type';
\n }
\n }
\n
\n function dnewtype(odiv) {
\n if ((odiv.innerText || odiv.contentWindow || odiv.contentDocument).trim() == '') {
\n odiv.innerHTML=selcon;
\n document.getElementById('favouritetype').value=selconv;
\n } else {
\n mytype=(odiv.innerText || odiv.contentWindow || odiv.contentDocument);
\n umytype=mytype;
\n if (umytype.substring(0,1) == umytype.substring(0,1).toLowerCase()) {
\n umytype=umytype.replace(umytype.substring(0,1).toLowerCase(), umytype.substring(0,1).toUpperCase());
\n }
\n if (alltogether.indexOf(umytype) == -1) {
\n odiv.innerHTML=selcon;
\n document.getElementById('favouritetype').innerHTML+='<option value=\\\"' + umytype + '\\\">' + umytype + '<\/option>';
\n document.getElementById('favouritetype').value=umytype;
\n dou=true;
\n selcon=document.getElementById('favouritetype').outerHTML;
\n selconv=document.getElementById('favouritetype').value;
\n document.getElementById('htimestamp').value+=umytype;
\n } else {
\n selconv=umytype;
\n }
\n odiv.innerHTML=selcon;
\n document.getElementById('favouritetype').value=selconv;
\n }
\n }
\n
\n function dotdtypek(event) {
\n if (event.target.innerHTML.indexOf('<') != -1) {
\n event.target.innerHTML='';
\n }
\n }
\n
\n function huhit(selval) {
\n if (selval != '' && umytype != '' && selval.toLowerCase() != umytype.toLowerCase()) {
\n dou=false;
\n } else if (selval != '' && umytype != '' && selval.toLowerCase() == umytype.toLowerCase()) {
\n dou=true;
\n }
\n }
\n<\/code>
\n“; ?><\/p>\n

So we hope you’re now more tempted to try the changed PHP<\/a> favourites_midair.php<\/a> code for (the obviously optional)<\/font> Favourites Poll<\/a> web application.<\/p>\n

\n

\n

Previous relevant Favourites Poll Email Moderation Client Validation Tutorial<\/a> is shown below.<\/p>\n

\"Favourites<\/a>

Favourites Poll Email Moderation Client Validation Tutorial<\/p><\/div>\n

Yesterday’s Favourites Poll web application of Favourites Poll Email Moderation Primer Tutorial<\/a> involves client-side HTML textboxes asking for interactive entry using an HTML form methodology. Not with all such projects with HTML form textboxes do we apply any client-side Javascript validation logic but today we are for the following reasons …<\/p>\n