Source Code

for file /ajaxcore/ajaxForms.js

/// Ajax = Asynchronous JavaScript + XML (+ HTML)
/// Ajax framework for Internet Explorer (6.0, ...) and Firefox (1.0, ...)
/// by Matthias Hertel
/// More information on: http://ajaxaspects.blogspot.com/ and http://ajaxaspekte.blogspot.com/
/// -----
/// ajaxforms.js: Methods for handling Form data
/// 07.07.2005 creation.
/// 14.08.2006 data binding functions for <span> elements.
/// 18.08.2006 data binding functions
/// getData(): to get normalized data as a value from the element.
/// getData(): to set normalized data to the element.
/// 19.08.2006 formatting functions
/// 30.09.2006 formatting decimal with precission

// ----- global variable for ajaxForms functionality. -----

/// <summary>The root object for the ajaxForms functionality.</summary>
var ajaxForms = new Object();

// ----- ajaxForms implementation -----

///<summary>Walk all html INPUT, TEXTAREA and SELECT elements contained by the passed object
///and return the current values.</summary>
///<param name="obj">A reference or an id of the html object containing the ajax form UI.</param>
///<returns>The data of inside the form as XML Document.</returns>
ajaxForms.getData = function (obj) {
  var n, aList, elem, val;
  var xData = ajaxForms._getXMLDOM("<data></data>");
  var xNode;

  obj = ajaxForms._getFormObj("ajaxForms.getData", obj);

  // get text & checked
  aList = obj.getElementsByTagName("INPUT");
  for (n = 0; n < aList.length; n++) {
    elem = aList[n];
    if ((elem.name != null) && (elem.name != "")) {
      if (elem.getData != null) {
        val = elem.getData();
      } else if (elem.type === "text") {
        val = elem.value;
      } else if (elem.type === "checkbox") {
        val = elem.checked;
      } else {
        val = "";
      }// if  
      xNode = xData.documentElement.appendChild(xData.createElement(elem.name));
      xNode.appendChild(xData.createTextNode(val));
    } // if
  } // for

  // get text
  aList = obj.getElementsByTagName("TEXTAREA");
  for (n = 0; n < aList.length; n++) {
    elem = aList[n];
    if ((elem.name != null) && (elem.name != "")) {
      if (elem.getData != null) {
        val = elem.getData();
      } else {
        val = elem.value;
      }// if  
      xNode = xData.documentElement.appendChild(xData.createElement(elem.name));
      xNode.appendChild(xData.createTextNode(val));
    } // if
  } // for

  // get value of selected option
  aList = obj.getElementsByTagName("SELECT");
  for (n = 0; n < aList.length; n++) {
    elem = aList[n];
    if ((elem.name != null) && (elem.name != "")) {
      if (elem.getData != null) {
        val = elem.getData();
      } else {
        val = elem.value;
      }// if  
      xNode = xData.documentElement.appendChild(xData.createElement(elem.name));
      xNode.appendChild(xData.createTextNode(val));
    } // if
  } // for

  return (xData);
}; // ajaxForms.getFormData


///<summary>This method transfers the values of the data into the corresponding INPUT, TEXTAREA and SELECT elements.
///All HTML elements of these types that have a name but no value will be cleared.</summary>
///<param name="data">The data for the form. This can be a XML string or an XML document.</param>
///<param name="obj">A reference or an id of the html object containing the ajax form UI.</param>
ajaxForms.setData = function (data, obj) {
  var n, aList, dataElements;
  var xData, xElem, val;

  obj = ajaxForms._getFormObj("ajaxForms.setData", obj);

  if (data === null)
    throw new Error("ajaxForms.setData: Argument 'data' must be set.");

  if (typeof (data) === "string")
    xData = ajaxForms._getXMLDOM(data);
  else
    xData = data;

  // collect all possible data bound elements
  dataElements = new Array();
  aList = obj.getElementsByTagName("INPUT");
  for (n = 0; n < aList.length; n++)
    dataElements.push(aList[n]);
  aList = obj.getElementsByTagName("SPAN");
  for (n = 0; n < aList.length; n++)
    dataElements.push(aList[n]);

  aList = obj.getElementsByTagName("TEXTAREA");
  for (n = 0; n < aList.length; n++)
    if (aList[n].setData) dataElements.push(aList[n]);
  aList = obj.getElementsByTagName("SELECT");
  for (n = 0; n < aList.length; n++)
    if (aList[n].setData) dataElements.push(aList[n]);
  aList = obj.getElementsByTagName("DIV");
  for (n = 0; n < aList.length; n++)
    if (aList[n].setData) dataElements.push(aList[n]);

  // set text & checked
  for (n = 0; n < dataElements.length; n++) {
    elem = dataElements[n];
    if ((elem.name != null) && (elem.name != "")) {
      xElem = xData.documentElement.getElementsByTagName(elem.name);
      if ((xElem.length === 0) || (xElem[0].firstChild === null)) {
        // no XML data found
      } else {
        val = xElem[0].firstChild.nodeValue;
        if (elem.setData != null) {
          elem.setData(val);
        } else if ((elem.tagName === "INPUT") && (elem.type === "text")) {
          if (elem.value != val) elem.value = val;
        } else if ((elem.tagName === "INPUT") && (elem.type === "checkbox")) {
          elem.checked = (val.toLowerCase() === "true");
        } else if ((elem.tagName != "SPAN") && (elem.value != val)) {
          elem.value = val;
        } // if
      } // if
    } // if
  } // for

  ajaxForms.clearErrors(obj);
}; // ajaxForms.setData



///<summary>This method clears the values of the html elements of type INPUT, TEXTAREA and SELECT that have a name.</summary>
///<param name="obj">A reference or an id of the html object containing the ajax form UI.</param>
ajaxForms.clearData = function (obj) {
  var n, aList;

  obj = ajaxForms._getFormObj("ajaxForms.clearData", obj);

  // clear the text of fields and uncheck checkboxes.
  aList = obj.getElementsByTagName("INPUT");
  for (n = 0; n < aList.length; n++) {
    if ((aList[n].name != null) && (aList[n].name != "")) {
      if (aList[n].type === "text") {
        aList[n].value = "";
      } else if (aList[n].type === "checkbox") {
        aList[n].checked = false;
      } // if
    } // if
  } // for

  // clear the text of textareas
  aList = obj.getElementsByTagName("TEXTAREA");
  for (n = 0; n < aList.length; n++) {
    if ((aList[n].name != null) && (aList[n].name != "")) {
      aList[n].value = "";
    } // if
  } // for

  // because there is no real clear with select objects, the select is reset to the default-value
  aList = obj.getElementsByTagName("SELECT");
  for (n = 0; n < aList.length; n++) {
    if ((aList[n].name != null) && (aList[n].name != ""))
      for (o = 0; o < aList[n].options.length; o++) {
        if (aList[n].options[o].defaultSelected) {
          aList[n].selectedIndex = o;
          break;
        } // if
      } // for
  } // for

  ajaxForms.clearErrors(obj);
}; // ajaxForms.clearData


///<summary>This method clears the values of the html elements of type INPUT, TEXTAREA and SELECT that have a name.</summary>
///<param name="obj">A reference or an id of the html object containing the ajax form UI.</param>
ajaxForms.resetData = function (obj) {
  var n, aList;

  obj = ajaxForms._getFormObj("ajaxForms.resetData", obj);

  // reset text & checked
  aList = obj.getElementsByTagName("INPUT");
  for (n = 0; n < aList.length; n++) {
    if ((aList[n].name != null) && (aList[n].name != "")) {
      if (aList[n].type === "text") {
        aList[n].value = aList[n].defaultValue;
      } else if (aList[n].type === "checkbox") {
        aList[n].checked = aList[n].defaultSelected;
      } // if
    } // if
  } // for

  // reset text
  aList = obj.getElementsByTagName("TEXTAREA");
  for (n = 0; n < aList.length; n++) {
    if ((aList[n].name != null) && (aList[n].name != "")) {
      aList[n].value = aList[n].defaultValue;
    } // if
  } // for

  // reset selected
  aList = obj.getElementsByTagName("SELECT");
  for (n = 0; n < aList.length; n++) {
    if ((aList[n].name != null) && (aList[n].name != ""))
      for (o = 0; o < aList[n].options.length; o++) {
        if (aList[n].options[o].defaultSelected) {
          aList[n].selectedIndex = o;
          break;
        } // if
      } // for
  } // for

  ajaxForms.clearErrors(obj);
}; // ajaxForms.resetData


///<summary>Parse an exception for an ArgumentException and set the error annotations</summary>
///<param name="ex">An exception object.</param>
///<param name="obj">A reference or an id of the html object containing the ajax form UI.</param>
ajaxForms.processException = function (ex, obj) {
  var txt = ex.description;
  if ((ex.message === "soap:Server") && (txt != null) && (txt.indexOf("System.ArgumentException: ") > 0)) {
    obj = ajaxForms._getFormObj("ajaxForms.processException", obj);

    txt = txt.substr(txt.indexOf("System.ArgumentException: ") + 26).split('\n');
    var param = txt[1].substr(txt[1].indexOf(':') + 2);

    var aList = document.getElementsByTagName("SPAN");
    for (var n = 0; n < aList.length; n++) {
      if ((aList[n].className === "AJAXFORMEXCEPTION") && (aList[n].getAttribute("name") === param)) {
        aList[n].style.display = "inline";
        aList[n].innerText = txt[0]; // IE
        aList[n].textContent = txt[0]; // FF
        break;
      } // if
    } // for
  } else {
    proxies.alertException(ex);
  } // if
};


///<summary>This method clears the error annotations of the html elements of type SPAN
///that have the className AJAXFORMEXCEPTION.</summary>
///<param name="obj">A reference or an id of the html object containing the ajax form UI.</param>
ajaxForms.clearErrors = function (obj) {
  var n;
  var aList = document.getElementsByTagName("SPAN");
  for (n = 0; n < aList.length; n++) {
    if (aList[n].className === "AJAXFORMEXCEPTION") {
      aList[n].style.display = "none";
      aList[n].innerText = ""; // IE
      aList[n].textContent = ""; // FF
    } // if
  } // for
}; // clearErrors


///<summary>private method for getting the html object containing the ajax form UI.</summary>
// txt the name of the public method
///<param name="obj">A reference or an id of the html object containing the ajax form UI.</param>
ajaxForms._getFormObj = function (txt, obj) {
  if (obj === null)
    throw new Error(txt + ": Argument 'obj' must be set.");

  // maybe an id of an object was passed.
  if (obj.constructor === String)
    obj = document.getElementById(obj);
  if (obj == null)
    throw new Error(txt + ": Argument 'obj' is unknown.");
  return (obj);
}; // _getFormObj


///<summary>Get a browser specific implementation of the XMLDOM object, containing a XML document.</summary>
///<param name="xmlText">the xml document as string.</param>
ajaxForms._getXMLDOM = function (xmlText) {
  var obj = null;

  if (typeof (DOMParser) != "undefined") {
    // Gecko / Mozilla / Firefox
    var parser = new DOMParser();
    obj = parser.parseFromString(xmlText, "text/xml");

  } else {
    // IE
    try {
      obj = new ActiveXObject("MSXML2.DOMDocument");
    } catch (e) { }

    if (obj == null) {
      try {
        obj = new ActiveXObject("Microsoft.XMLDOM");
      } catch (e) { }
    } // if

    if (obj != null) {
      obj.async = false;
      obj.validateOnParse = false;
    } // if
    obj.loadXML(xmlText);
  } // if
  return (obj);
}; // _getXMLDOM


// ----- formatting functions -----
// These functions are used for formatting values (number, dates...) to human readable strings
// with the typical national language specific notation.
// current: German: de

var nls = {
  string: {
    title: "Geben Sie einen Wert ein.",
    toString: function (v) { return (v); },
    toValue: function (s) { return (s); }
  }, // string


  int: {
    title: "Geben Sie einen ganzzahligen Wert ein.",
    keys: "-0123456789",
    toString: function (v) { return (v); },
    toValue: function (s) { return (s); }
  }, // int


  decimal: {
    title: "Geben Sie einen Wert mit optionalen Nachkommastellen in der Form '123.456,78' ein.",
    keys: ",-0123456789", mapkeys: ". ",
    toString: function (v, p) {
      var s = String(v);

      // adjust precission digits
      if (p == null) {
      } else if (p <= 0) {
        s = s.replace(/\..*$/g, ''); // remove precission digits
      } else {
        if (s.indexOf('.') < 0)
          s = s + '.';
        s = s + '0000000000';
        s = s.substr(0, s.indexOf('.') + p + 1);
      } // if

      s = s.replace(/\./g, ','); // use decimal komma
      s = s.replace(/(\d{1,})(\d{3})(\d{3})(,|$)/, "$1.$2.$3$4"); // use decimal points
      s = s.replace(/(\d{1,})(\d{3})(,|$)/, "$1.$2$3"); // use decimal points
      return (s);
    },

    toValue: function (s, p) {
      s = String(s);
      s = s.replace(/\./g, ''); // use decimal komma
      s = s.replace(/\,/g, '.'); // use decimal points
      return (s);
    }
  }, // decimal


  date: {
    title: "Geben Sie ein Datum in der Form 'tt.mm.jjjj' ein.",
    keys: ".0123456789", mapkeys: ",",
    toString: function (v) {
      var s = "";
      if ((v != null) && (v.constructor == Date))
        s = nls.d2(v.getDate()) + "." + nls.d2(v.getMonth() + 1) + "." + v.getFullYear();
      return (s);
    },

    toValue: function (s) {
      var d = null;
      if ((s == null) || (s == "")) {
        return (d);
      } else if (s == "*") {
        d = new Date();
      } else if (s.match(/^\d+\.\d+\.\d+^/)) {
        s = s.split('.');
        d = new Date(parseInt(s[2], 10), parseInt(s[1], 10) - 1, parseInt(s[0], 10), 0, 0, 0);
      } else if (s.match(/^\d+\.\d+\.?$/)) {
        s = s.split('.');
        d = new Date((new Date().getFullYear()), parseInt(s[1], 10) - 1, parseInt(s[0], 10), 0, 0, 0);
      } else if (s.match(/^\d{4}$/)) {
        d = new Date((new Date().getFullYear()), parseInt(s.substr(2, 2), 10) - 1, parseInt(s.substr(0, 2), 10), 0, 0, 0);
      } else if (s.match(/^\d{6}$/)) {
        d = new Date(parseInt(s.substr(4, 2), 10), parseInt(s.substr(2, 2), 10) - 1, parseInt(s.substr(0, 2), 10), 0, 0, 0);
      } else if (s.match(/^\d{8}$/)) {
        d = new Date(parseInt(s.substr(4, 4), 10), parseInt(s.substr(2, 2), 10) - 1, parseInt(s.substr(0, 2), 10), 0, 0, 0);
      }
      return (d);
    },
    firstDayOfWeek: 1, // mo
    weekdayName: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    monthName: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
  }, // date


  // format a number using 2 characters min. with leading 0s
  d2: function (d) {
    d = String(d);
    if (d.length == 0)
      d = "00";
    else if (d.length == 1)
      d = "0" + d;
    return (d);
  } // d2
}; // nls

// ----- End -----

This page is part of the http://www.mathertel.de/ web site.

For updates and discussions see http://ajaxaspects.blogspot.com/.