{"id":8520,"date":"2014-07-17T05:02:48","date_gmt":"2014-07-16T19:02:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8520"},"modified":"2014-07-17T05:02:48","modified_gmt":"2014-07-16T19:02:48","slug":"ajax-all-textboxes-all-mandatory-form-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-all-textboxes-all-mandatory-form-primer-tutorial\/","title":{"rendered":"Ajax All Textboxes All Mandatory Form Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Ajax\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax All Textboxes All Mandatory Form Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Ajax\/Ajax_Form_OnBlur.jpg\" title=\"Ajax All Textboxes All Mandatory Form Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax All Textboxes All Mandatory Form Primer Tutorial<\/p><\/div>\n<p>Was wondering, today, whether we&#8217;ve ever mentioned the very useful <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/event_onblur.asp' title='onblur event information from w3schools ... thanks'><i>onblur<\/i><\/a> event for the textbox input HTML tag, which fires after you leave a textbox, whether you have filled it in or not.   It pans out we have, with the previous relevant <a target=_blank href='#ajpt' title='Ajax jQuery Primer Tutorial'>Ajax jQuery Primer Tutorial<\/a> as shown below, which is an Ajax tutorial.<\/p>\n<p>Ajax is a client-side meets server-side melding of (local file server files, typically XML and\/or JSON, or) PHP (or <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1646'>ASP.Net<\/a>) and Javascript and HTML and CSS and allows you to stay on the web page you are on doing many more things, rather than constantly changing web pages the way that HTML form tag makes you do.  Ajax works with <a target=_blank title='XMLHttpRequest' href='http:\/\/www.w3schools.com\/xml\/xml_http.asp'>XMLHttpRequest<\/a> object to quiz the server-side while staying on the client side.   You can do the server-side work ahead of time by placing your own data file on the server ahead of time, and in such scenarios, PHP or ASP.Net may not be needed to perform Ajax functionality.   For working up to using Ajax, here on this blog, I would refer you to the previous tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=574'>JavaScript and the DOM Tutorial<\/a> and <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=550'>PHP + JavaScript + HTML Primer Tutorial<\/a> for important information to learn before tackling Ajax.   Ajax shares similar restrictions to iFrames in limiting you to work within your own domain, generally speaking.   Ajax often makes use of the onmouseover events of HTML elements, but today we show you an onblur input tag method of using Ajax where a local MySql database is the data source accessed via PHP.   With <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8901' title='Ajax Div Overlay Primer Tutorial'>Ajax Div Overlay Primer Tutorial<\/a> (into the future) we show that the <i>onclick<\/i> event can be combined with a Javascript timer (eg. setInterval() method) to dovetail with Ajax functionality, as another thought, when the requirement is not so much for dynamic active user intervention with a mouse, but for display dynamics that are watched.<\/p>\n<p>Let&#8217;s extend the ideas presented there to the idea of <i>&#8220;validation as you go&#8221;<\/i> via Ajax (to PHP) with an HTML form.   With this method, if there was no need to store this data in any way, there&#8217;d be no role for the submit button, because you&#8217;d know that everything passes validation by the time that final submit button press causes the webpage to move on to some new functionality.<\/p>\n<p>It may be that this method also helps the user be patient with the process, because they don&#8217;t have to wait to the end to work out if everything is okay, as far as what they have entered is concerned.<\/p>\n<p>The <i>onblur<\/i> event works with (mobile) touch phones and tablets in a much more reliable way than <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/event_onmouseover.asp' title='onmouseover information from w3schools ... thanks'><i>onmouseover<\/i><\/a> (another popular event to hang Ajax code off).<\/p>\n<p>Download HTML supervisory programming source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Ajax\/form-textbox-ajax-missing-validation.html_GETME'>form-textbox-ajax-missing-validation.html<\/a> &#8230; supervises PHP &#8230; <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Ajax\/form-textbox-ajax-missing-validation.php_GETME'>form-textbox-ajax-missing-validation.php<\/a> (which is responsible for validation &#8230; you&#8217;d add the nitty-gritty of your business logic to this file, but for today, we just check that you have entered something &#8230; anything).<\/p>\n<p>And yes, that is <a target=_blank href='http:\/\/www.firephp.org\/' title='FirePHP'>FirePHP<\/a> (depends on both <a target=_blank href='http:\/\/www.mozilla.org\/' title='Firefox web bowser'>Firefox<\/a> web browser and <a target=_blank href='http:\/\/getfirebug.com\/' title='Firebug'>Firebug<\/a> addon), in action, as a debugger, in the tutorial picture today.  FirePHP is brilliant for PHP and\/or Ajax debugging, being able to show you the Ajax messaging to and fro, and you can read more about this with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5622' title='PHP Debug via Firefox and FirePHP Primer Tutorial''>PHP Debug via Firefox and FirePHP Primer Tutorial<\/a>.<\/p>\n<p>Hope this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Ajax\/\">live run<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Ajax\/Ajax_Form_OnBlur.jpg\">tutorial<\/a> helps you out with something &#8230; anything.<\/p>\n<hr \/>\n<p id='ajpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6170' title='Ajax jQuery Primer Tutorial'>Ajax jQuery 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\/Ajax\/jQuery\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax jQuery Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/jQuery\/Ajax_jQuery.jpg\" title=\"Ajax jQuery Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax jQuery Primer Tutorial<\/p><\/div>\n<p>A lot of the things people like about the Web are to do with Javascript and client-side activities.   Adding to that experience are Javascript libraries packed full of features.    Probably the best known of these is jQuery.   It is very popular, and it is often the case that the term jQuery has completely replaced Javascript for some users who never need to leave the jQuery &#8220;world&#8221; to do their client-side code.   Let&#8217;s see what Wikipedia says about jQuery.<\/p>\n<blockquote>\n<p>jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.[4] It was released in January 2006 at BarCamp NYC by John Resig. It is currently developed by a team of developers led by Dave Methvin. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.[5][6]<\/p>\n<p>jQuery is free, open source software, licensed under the MIT License.[7] jQuery&#8217;s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.\n<\/p>\n<\/blockquote>\n<p>Ajax is a client-side meets server-side melding of PHP (or <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1646'>ASP.Net<\/a>) and Javascript and HTML and CSS and allows you to stay on the web page you are on doing many more things, rather than constantly changing web pages the way that HTML form tag makes you do.  Ajax works with XMLHttpRequest object to quiz the server-side while staying on the client side.   You can do the server-side work ahead of time by placing your own data file on the server ahead of time, and in such scenarios, PHP or ASP.Net may not be needed to perform Ajax functionality.   For working up to using Ajax, here on this blog, I would refer you to the previous tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=574'>JavaScript and the DOM Tutorial<\/a> and <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=550'>PHP + JavaScript + HTML Primer Tutorial<\/a> for important information to learn before tackling Ajax.   Ajax shares similar restrictions to iFrames in limiting you to work within your own domain, generally speaking.   Ajax often makes use of the onmouseover events of HTML elements, but today we show you an onblur input tag method of using Ajax where a local MySql database is the data source accessed vi PHP.<\/p>\n<p>Today these two big &#8220;worlds&#8221; meet by the use of jQuery Ajax functionality calls and a good informational webpage about this is <a target=_blank title='jQuery Ajax' href='http:\/\/api.jquery.com\/jquery.ajax\/'>here<\/a>.<\/p>\n<p>Click <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/Ajax\/jQuery\/'>on picture above<\/a> to go to a live run of a Country\/City MySql database scenario, where you can enter a Country or enter a City name and receive information regarding what you didn&#8217;t enter.<\/p>\n<p>Link to jQuery information <a target=_blank title='jQuery information' href='http:\/\/en.wikipedia.org\/wiki\/jQuery'> &#8230; via Wikipedia, from where quote above is derived<\/a>.<br \/>\nLink to jQuery spiritual home page  <a target=_blank title='jQuery spiritual home' href='http:\/\/jquery.com\/'> &#8230; via jQuery Foundation<\/a>.<br \/>\nLink to jQuery download page  &#8230; <a target=_blank title='DOM' href='http:\/\/jquery.com\/download\/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DDownloading_jQuery%26redirect%3Dno'>download jQuery here<\/a>.<br \/>\nLink to jQuery Ajax page  &#8230; <a target=_blank title='jQuery Ajax' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a>.<\/p>\n<p>Download HTML programming source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/jQuery\/getcountrydata.html_GETME'>getcountrydata.html<\/a> &#8230; supervises PHP &#8230; <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/jQuery\/getcountrydata.php_GETME'>getcountrydata.php<\/a><\/p>\n<p>The MySql data was created via the data of <a target=_blank title='data source' href='http:\/\/docs.oracle.com\/cd\/E16162_01\/apirefs.1112\/e17490\/thematicMap\/world-cities-ids.csv'>this link<\/a>, for which we give thanks.<\/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='#d6170' onclick='var dv=document.getElementById(\"d6170\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6170' 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='#d8520' onclick='var dv=document.getElementById(\"d8520\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=52\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8520' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Was wondering, today, whether we&#8217;ve ever mentioned the very useful onblur event for the textbox input HTML tag, which fires after you leave a textbox, whether you have filled it in or not. It pans out we have, with the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-all-textboxes-all-mandatory-form-primer-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":[2,12,14,37],"tags":[69,442,453,576,609,664,860,932,997,1319,1480,1481],"class_list":["post-8520","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-firephp","tag-form-validation","tag-html","tag-input","tag-json","tag-onblur","tag-php","tag-programming","tag-tutorial","tag-xml","tag-xmlhttprequest"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8520"}],"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=8520"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8520\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=8520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=8520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=8520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}