Beginner's Javascript & AJAX

( concentrating on getElementById method and innerHTML property )

Andy Griffiths

Midboh Web services

The positives using Javascript

Immediate feedback to the end-user
Good for simple validation
Executes in browser - no traffic to server (unless specifically calling a script from server)

The negatives using Javascript

Extra hassle duplicating validation already done in php
May impact on Search Engine results when used for navigation.
Efforts will be ignored by text browsers or browsers with Javascript disabled

A practical example

The demo

Disclaimer:

The code in this example is in no way meant to suggest the "best" method of implementing these processes.

This was a first attempt using javascript. The best that can be said is - it works!

How does it hang together?

The demonstration used 3 files:

The HTML page
The Javascript which does the work
The PHP code executed by the AJAX call

The html

The key to the process is defining an id to an HTML "open" tag which is used by the javascript (defined prior to the /body tag).

This code uses the span tag

<html><body>
<form name="innerhtml_and_ajax_example" autocomplete="off" method="post">
.
.
.
    <table>
    <tr><td>comment will update onblur</td></tr>
    <tr><td><input type=text name="F_1" size=20></td></tr>
    <tr><td>  <span id="F_1_msg">...comment...</span></td></tr>
    </table>
.
.
.
</form>
<script src="innerhtml_and_ajax_example.js"></script>
</body></html>

The Javascript doing the work (part 1)

This chunk of the included javascript loops through each form on the page and each element within the forms, checking for a defined event on specific fields, triggering the execution of the function "My_events"


for (var i = 0; i < document.forms.length; i++) {
  for (var j = 0; j < document.forms[i].elements.length; j++) {
     if (document.forms[i].elements[j].name == 'F_1')   document.forms[i].elements[j].onblur = My_events;
     if (document.forms[i].elements[j].name == 'F_3')   document.forms[i].elements[j].onkeyup = My_events;
     if (document.forms[i].elements[j].name == 'F_4')   document.forms[i].elements[j].onblur = My_events;
     if (document.forms[i].elements[j].name == 'F_5')   document.forms[i].elements[j].onclick = My_events;
  }
}


function My_events(e) {
  var ie  = navigator.appName == "Microsoft Internet Explorer";
  var tag = ie ? window.event.srcElement : e.target;
  do_it(tag);
}

The Javascript doing the work (part 2)

The code shows how the javascript replaces the content between the open/close tags, for the specified id.

<span id="F_1_msg">...comment...</span>

function do_it(the_field) {
    switch (the_field.name) {
    case 'F_1':
        document.getElementById('F_1_msg').innerHTML = the_field.value.length ;
        document.getElementById('F_1_msg').style.color = "red";
        break;
    case 'F_3':
        document.getElementById('F_3_msg').innerHTML = the_field.value.length;
        document.getElementById('F_3_msg').style.color = "silver";
        document.getElementById('F_3A_msg').innerHTML = '     ' + the_field.name + ' = "' + the_field.value + '"';
        break;
.
.
    case 'F_5':
        if (the_field.value == 'hide') document.getElementById('F_5_msg').innerHTML = '<input type=hidden name="F_5A" value="not applicable"> ';
        if (the_field.value == 'show') document.getElementById('F_5_msg').innerHTML = '<input type=text name="F_5A" size=20>';
        break;
    }
  return true;
}

The Javascript doing the work (part 3)

This section of the javascript code is the ajax call to a php script.

.
.
    case 'F_4':
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", 'ajax_example.php?F_4=' + the_field.value  , true);
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4)  document.getElementById('F_4_msg').innerHTML = xmlhttp.responseText;
        }
        xmlhttp.send(null)
        break;
.
.

The php script called via AJAX

<?php

if (isset($_GET["F_4"])) {
    if (strlen($_GET["F_4"]) > 5) $result = 'More than 5 characters entered';
    else                          $result = 'Less than 5 characters entered';
} else                            $result = 'Unknown Parameter passed';
echo $result;

?>

The wrap-up

Worth the investment of time and effort to provide a more effective and user-friendly interface

At the same time reduce some of the traffic / load on your server

Code must be tested with Javascript disabled on the browser to ensure code "degrades gracefully"

Full source code used in demo available DOWNLOAD

Sydney PHP User Group