Sr. Web Developer
mediabistro.com
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume

AJAX and PHP Part: Forms and JavaScript Limitations
J.D.Campbell
AJAX is a very powerful system which enables dynamic, constantly changing content on a page--without refreshing the page. This useful system does, however, have some limitations with current browsers. We will cover these limitations in this article, specifically those pertaining to how HTML Forms operate within AJAX dynamic content and what type of JavaScript can be used in AJAX-generated content.
The FireFox browser has what actually amounts to a bug when using AJAX pages; if you browse to a Web page which uses AJAX by specifying a URL without the "www", such as http://jdcampbell.com/ajax/ajaxpart4.html, and then try and operate the AJAX-enabled pages you will find they may not work. FireFox will only allow AJAX requests from the same web site as the current HTML page in the browser. The missing "www" causes FireFox to view embedded URLs in AJAX requests as being from a different web site. For the bug to show itself, the embedded URLs would have to be www.jdcampbell.com and the URL you entered in the browser would be jdcampbell.com, without the "www". This bug does not exist in Microsoft IE, however.
AJAX & Form Limitations
First we will cover an example of how to use HTML Forms with AJAX dynamic content. When we say Forms, you should know we are talking about the <Form> tags and the elements within the <Form> tags such as <input  type=text  name=city> and all other elements. The basic rules are as follows.
  1. Within a dynamically updated section of the (AJAX generated) page you will not successfully get Forms to submit using standard Form submit methods (unless you are going to bypass AJAX and completely refresh the page).
  2. If you wish to have the Form submission results dynamically displayed using AJAX you must read each Form field element with JavaScript methods such as document.getElementById('txt1').value and build a Get or Post data string of the Form fields, then use AJAX to send that Form data (and of course get the response results and update your page dynamically). Your Form cannot be submitted as you submit a Form with the myform.submit( ) method or a Form submit button. Instead you must have onClick=" " or onBlur=" " events to call a JavaScript function that initiates an AJAX submit-request sending the Form field elements.
  3. Also in some browsers there are limitations on the ability to access Form field elements by their Name attribute within AJAX dynamic content. You should always use the JavaScript element ID for Form elements within AJAX dynamic content.
Now we will show the example itself. The first is the primary HTML page enabled with AJAX that updates a section of the page (itself) when you click a button. The section that is updated is specified as DIV tags with an ID (shown at the bottom of the listing).
Listing #A: Main HTML page, AJAX enabled 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<title>Advanced AJAX Part 4</title>

<script language="javascript"  type="text/javascript">


function doHttpRequest() {  // This function does the AJAX request
  http.open("GET", "http://www.jdcampbell.com/ajax/formdata.html", true);
  http.onreadystatechange = getHttpRes;
  http.send(null);
}

function doHttpRequest2() {  // This function does the AJAX request
http.open("GET", "http://www.jdcampbell.com/ajax/formrequest.php?txt1="+document.getElementById('txt1').value, true);
  http.onreadystatechange = getHttpRes;
  http.send(null);
}

function getHttpRes() {
  if (http.readyState == 4) { 
    res = http.responseText;  // These following lines get the response and update the page
    document.getElementById('div1').innerHTML = res;	
  }
}

function getXHTTP() {
  var xhttp;
   try {   // The following "try" blocks get the XMLHTTP object for various browsers…
      xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
 		 // This block handles Mozilla/Firefox browsers...
	    try {
	      xhttp = new XMLHttpRequest();
	    } catch (e3) {
	      xhttp = false;
	    }
      }
    }
  return xhttp; // Return the XMLHTTP object
}

var http = getXHTTP(); // This executes when the page first loads.

</script>

</head>

<body>

<input type="button" value="Press for AJAX" name="btn" onClick="doHttpRequest();" >

<br><br>

<div id="div1"> <h3> Dynamic AJAX will be displayed here. </h3>  </div>

</body>
</html>
The above div tag <div id="div1"> is automatically updated dynamically by AJAX. The content that is displayed by AJAX when you press the "Press for AJAX" button is the following HTML file content (Listing #B).
Listing #B: Content file displayed by AJAX within above HTML page. 
<h3>Here is an HTML Form, enter data, click submit…</h3>

<Form name="myform">

    	Type text: <input type="text" size="15" id="txt1" >
	<br><br>
    	<input type="button" value="Press to submit form" onClick="doHttpRequest2();">

</Form>
Both Listing #B above and Listing #C below are dynamically displayed using AJAX without refreshing the main page shown in Listing #A. As you can see, Listing #B is a Form with a button that initiates another AJAX request which displays the results of Listing #C below, including the Form field "txt1" contents.
Listing #C: PHP Form request handler, also displayed by AJAX 
<HTML>
<body>
<h3>Here is the Form field text: <? echo $_GET["txt1"]; ?></h3>
</body>
</HTML>
AJAX & JavaScript Limitations
There is also a clear limitation on how you can use JavaScript within the dynamically updated (AJAX generated) content of a page. You can do as we did in our example above in file Listing #B where we had an onClick event that calls a JavaScript function (which is actually defined in the main HTML page file which is Listing #A).
You can also do the following (note the following is an edited version of Listing #B above; it is displayed as dynamic AJAX content on a page). The following changes the "txt1" field element content with an onClick event that uses a standard JavaScript method, referencing the "txt1" field by ID as you notice on the highlighted line below. 
<h3>Here is an HTML Form, enter data, click submit X2...</h3>

<Form name="myform">

    	Type text: <input type="text" size="15" id="txt1" >
	<br><br>
    	<input type="button" value="Press to submit form" onClick="doHttpRequest2();">
    	<input type="button" value="Change" onClick="document.getElementById ('txt1').value='We-change';">

</Form>
Warning: You cannot do the following, which has a user-defined JavaScript function in the AJAX dynamic content. JavaScript functions defined within dynamic AJAX content simply will not function. 
<script language="javascript"  type="text/javascript">

  function changetxt1() { document.getElementById('txt1').value='We-change'; }

</script>

<h3>Here is an HTML Form, enter data, click submit X2...</h3>

<Form name="myform">

    	Type text: <input type="text" size="15" id="txt1" >
	<br><br>
    	<input type="button" value="Press to submit form" onClick="doHttpRequest2();">
    	<input type="button" value="Change" onClick="changetxt1();">

</Form>
Come back soon to read the next article in our series on Ajax and PHP!