// add_employee.js

/*  This page does all the magic for applying
 *  Ajax to an "add an employee" form.
 *  The form data is sent to a PHP 
 *  script using the POST method.
 *  The PHP script sends back a response in XML format.
 */
 
// Have a function run after the page loads:
window.onload = init;

// Function that adds the Ajax layer:
function init() {

  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();
  
  // Attach the function call to the form submission, if supported:
  if (ajax) {

    // Check for DOM support:
    if (document.getElementById('results')) {
  
      // Add an onsubmit event handler to the form:
      document.getElementById('newsform').onsubmit = function() {

        // Call the PHP script.
        // Use the POST method.
        
        // Open the connection:
        ajax.open('post', '/newsregistration/registration.php');
        
        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }

        // Assemble all the form data:
        var fields = ['name', 'email'];
        for (var i = 0; i < fields.length; i++) {
          fields[i] = fields[i] + '=' +
encodeURIComponent(document.getElementById(fields[i]).value);
        }
        var values = fields.join('&');

        // Set the request headers:
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        
        // Send the request along with the data:
        ajax.send(values);
      
        return false; // So form isn't submitted.

      } // End of anonymous function.
      
    } // End of DOM check.
    
  } // End of ajax IF.

} // End of init() function.

// Function that handles the response from the PHP script:
function handleResponse(ajax) {

  // Check that the transaction is complete:
  if (ajax.readyState == 4) {
  
    // Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {
      
      var results = document.getElementById('results');
      
      // Reset all the labels:
      document.getElementById('name_label').className = 'title';
      document.getElementById('email_label').className = 'title';

      // Get the XML data:
      var data = ajax.responseXML;
      
      // Get the main response:
      var message = data.getElementsByTagName('result');
      
      // Get all the errors:
      var errors = data.getElementsByTagName('error');

      // Temp variable to use in the loop:
      var temp = false;
      
      // Loop through each error:
      for (var i = 0; i < errors.length; i++) {
      
        // Get the error value:
        temp = errors[i].firstChild.nodeValue;
        
        // Change the class:
        document.getElementById(temp + '_label').className = 'error';
        
      } // End of FOR loop.
  
      // Put the received response in the DOM:
      results.innerHTML = message[0].firstChild.nodeValue;
      
      // Make the results box visible:
      results.style.display = 'block';

    } else { // Bad status code, submit the form.
      document.getElementById('newsform').submit();
    }
    
  } // End of readyState IF.
  
} // End of handleResponse() function.