{"id":18976,"date":"2015-12-22T02:01:07","date_gmt":"2015-12-21T16:01:07","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18976"},"modified":"2015-12-21T15:16:16","modified_gmt":"2015-12-21T05:16:16","slug":"htmljavascript-cockpit-of-web-applications-form-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-cockpit-of-web-applications-form-tutorial\/","title":{"rendered":"HTML\/Javascript Cockpit of Web Applications Form Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Cockpit of Web Applications Form Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.gif\" title=\"HTML\/Javascript Cockpit of Web Applications Form Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Cockpit of Web Applications Form Tutorial<\/p><\/div>\n<p>Today&#8217;s Cockpit Feel web application adds functionality along with yesterday&#8217;s pre-existing &#8230;<\/p>\n<ul>\n<li>Javascript DOM document.write() method nesting &#8230;<\/li>\n<li>Javascript prompt() window method<\/li>\n<\/ul>\n<p> &#8230; way that asks for input from the user in that old interactive desktop command line application feeling kind of way, an &#8230;<\/p>\n<ul>\n<li>HTML <a target=_blank title='HTML form information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>form<\/a><\/li>\n<\/ul>\n<p> &#8230; method, the more usual web application way of asking for user input.<\/p>\n<p>Most websites present interactive input in an HTML form for a few reasons (we can think of) &#8230;<\/p>\n<ul>\n<li>everything that will be asked can be there on the webpage (so that you know what is coming)<\/li>\n<li>HTML form elements can direct the web traffic from one web page to the next via HTML input type=&#8217;submit&#8217; buttons teamed with HTML form action=[Url] arrangements<\/li>\n<li>validation of this user entered data can be validated at the one place (via the HTML form <a target=_blank title='HTML onsubmit event information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'>onsubmit<\/a> event we&#8217;ve talked about <a target=_blank title='Onsubmit blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onsubmit\/'>before<\/a>), and the HTML5 input element type has several self-validating types (like type=&#8217;url&#8217; that we make use of today)<\/li>\n<li>huge amounts of user entered data can make use of the HTML form method=&#8217;POST&#8217; as necessary, though today we use method=&#8217;GET&#8217; for the amounts of data we have and in order to remain with client side programming (method=&#8217;POST&#8217; needs server side programming intervention)<\/li>\n<li>uploading of files is possible via HTML form element<\/li>\n<\/ul>\n<p>The concept today remains simple &#8230;<\/p>\n<ol>\n<li>take the same 3&#215;3 grid (to the beach this time, because yesterday they enjoyed the zoo so much (they&#8217;d like you to know))<\/li>\n<li>check for cookie data and $_GET[] parameters for any\/all of the 3&#215;3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display &#8230; that being &#8230;\n<ul>\n<li><a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'> iframe<\/a><\/li>\n<li><a target=_blank title='Javascript window.open() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open()<\/a> popup window<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p> &#8230; so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they&#8217;re using, will happen.<\/p>\n<p>Again, regarding research and development we&#8217;d like to thank <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> for the great code regarding cookies.<\/p>\n<p>The HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html-GETME\" title='cockpit_feel.html'>cockpit_feel.html<\/a> (changed for HTML form functionality in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html-GETME\" title='cockpit_feel.html'>this way<\/a>) for which you can use this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html\" title='Click picture'>live run link<\/a>.  If you want to simulate the tutorial picture &#8220;Cockpit&#8221; today try <a target=_blank title='Tutorial picture simulation' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html?url1=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FPieChart%2F%23iframe&#038;url2=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FLineChart%2F%23iframe&#038;url3=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FBarChart%2F%23iframe&#038;url4=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FAreaChart%2F%23iframe&#038;url5=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FMap%2F%23iframe&#038;url6=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FGeoChart%2F%23iframe&#038;url7=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FBubbleChart%2F%23iframe&#038;url8=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FTimelineChart%2F%23iframe&#038;url9=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FCalendarChart%2F%23iframe'>this link<\/a>.  We hope some\/all\/grid-maintenance information helps today.<\/p>\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='#d18947' onclick='var dv=document.getElementById(\"d18947\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cookies\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18947' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p id='hjcowapt'>Previous relevant <a target=_blank title='HTML\/Javascript Cockpit of Web Applications Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-cockpit-of-web-applications-primer-tutorial\/'>HTML\/Javascript Cockpit of Web Applications Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Cockpit of Web Applications Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.jpg\" title=\"HTML\/Javascript Cockpit of Web Applications Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Cockpit of Web Applications Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s web application continues our interest in &#8230;<\/p>\n<ul>\n<li>Javascript DOM document.write() method nesting &#8230;<\/li>\n<li>Javascript prompt() window method<\/li>\n<\/ul>\n<p> &#8230; to give that old interactive desktop command line application feel that many of the &#8220;senior citizens&#8221; (should we diplomatically say) of the web world, may still secretly gravitate towards?!<\/p>\n<p><b><i>Okay &#8230; who are the closet interactive desktop command line application lovers out there? &#8230; Come on &#8230; you know who you are?!<\/i><\/b><\/p>\n<p>But we digress &#8230; so today, we have a web application a bit like a dashboard, a bit like a cockpit (we&#8217;ve called it) &#8230; though the looks aren&#8217;t as good at this stage.   Nevertheless, maybe it has a feel of a widget to it as well, because today we only use HTML, making use of <a target=_blank title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>cookies<\/i><\/a> to do away with the need for a serverside language like PHP, which could have done the job as well.  But not everybody has PHP?  Right &#8230; <\/p>\n<blockquote><p><font size=1> &#8230; left &#8230;<\/font><\/p><\/blockquote>\n<p> &#8230; <b><i>Damn! Those pesky psychological tests!<\/i><\/b><\/p>\n<p>The concept today is very simple &#8230;<\/p>\n<ol>\n<li>take a 3&#215;3 grid (to the zoo would be nice)<\/li>\n<li>check for cookie data for any\/all of the 3&#215;3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display &#8230; that being &#8230;\n<ul>\n<li><a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'> iframe<\/a><\/li>\n<li><a target=_blank title='Javascript window.open() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open()<\/a> popup window<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p> &#8230; so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they&#8217;re using, will happen.<\/p>\n<p>Regarding research and development we&#8217;d like to thank <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> for the invaluable code regarding cookies, and an interesting sideline, which we ended up not perusing, but is active in your *._GETME file today, to show you what is possible comes from this <a target=_blank href='http:\/\/l2.io\/' title='Useful website'>useful website<\/a> &#8230; thanks.<\/p>\n<p>The (purely) HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html_GETME\" title='cockpit_feel.html'>cockpit_feel.html<\/a> for which you can use this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cockpit_feel.html\" title='Click picture'>live run link<\/a>.  If this helps then we&#8217;re happy.<\/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='#d18947' onclick='var dv=document.getElementById(\"d18947\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cookies\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18947' 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='#d18976' onclick='var dv=document.getElementById(\"d18976\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18976' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s Cockpit Feel web application adds functionality along with yesterday&#8217;s pre-existing &#8230; Javascript DOM document.write() method nesting &#8230; Javascript prompt() window method &#8230; way that asks for input from the user in that old interactive desktop command line application feeling &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-cockpit-of-web-applications-form-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":[264,352,354,452,576,578,587,652,1712,997,1761,1319,1433],"class_list":["post-18976","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cookies","tag-document-write","tag-dom","tag-form","tag-html","tag-html5","tag-iframe","tag-javascript","tag-onsubmit","tag-programming","tag-prompt","tag-tutorial","tag-window-open"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18976"}],"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=18976"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18976\/revisions"}],"predecessor-version":[{"id":18981,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18976\/revisions\/18981"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=18976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=18976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=18976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}