JavaScript Wiki
Don't have an account?
Register
Advertisement
Register
in: Pages using deprecated source tags, Wiki scripts

Form

Edit

The following script provides a wrapper class for forms complete with validation, traditional and AJAX submission, and default values for most parameters.

For AJAX functionality, it requires the getAjax function at AJAX.

constructor[]

Data type function
Return type undefined
Parameter list form (HTMLFormElement or string)
Standard none
Documentation this article

Initializes the wrapper object. If the argument is a string, it is used to find the form in the document; otherwise, it is assumed to be the form.

concatQueries[]

Data type function
Return type string
Parameter list queries (array or string), [...]
Standard none
Documentation this article

Recursively removes all empty URL parameters from the several strings passed and returns the result of joining them together. An empty parameter is any set of consecutive parameter delimiters, as represented by the regular expression /[&;^$]{2,}/.

The parameters are unlimited. Each should be either a string or an array of strings. Arrays of strings may have any depth, but circular references are not anticipated and will cause a JavaScript error.

extractPath[]

Data type function
Return type string
Parameter list URL (string)
Standard none
Documentation this article

Returns the path portion of a URL. For example:

var url = 'http://www.example.com/?foo=bar#baz';
var path = extractPath(url); // http://www.example.com/

extractQuery[]

Data type function
Return type string
Parameter list URL (string)
Standard none
Documentation this article

Returns the query portion of a URL. For example:

var url = 'http://www.example.com/?foo=bar#baz';
var query = extractQuery(url); // foo=bar

makeQuery[]

Data type function
Return type string
Parameter list elements (object)
Standard none
Documentation this article

Returns a query string in the following format, where a string valueX is the value of the property named nameX in elements.

name1=value1&name2=value2&...&nameN=valueN

prototype[]

These members are available on each instance of Form.

ajax[]

Data type function
Return type undefined
Parameter list callback (function), method (string), action (string), async (boolean), elements (array of HTMLElements)
Standard none
Documentation this article

Connects to the server using the specified method, action, and async arguments (which default to the form's method attribute, the form's action attribute, and true, respectively), serializes and sends the specified elements (which default to the HTML elements), and passes the response to callback if everything went smoothly.

See also[]
  • submit - Submits the form in the conventional manner.

elements[]

Data type array
Standard none
Documentation this article

An array similar to HTMLFormElement.elements.

getElements[]

Data type function
Return type array
Parameter list withNulls (boolean)
Standard none
Documentation this article

Returns an associative-numerical array of the currently populated elements. Each element may be accessed by either a numerical index or a string index equal to its name attribute value.

The withNulls argument defaults to false; if it is true, the returned array will additionally include null elements.

See also[]
  • elements - An array similar to HTMLFormElement.elements.
  • update - Updates the elements array.
  • getValues - Gets the form's elements' values.

getValues[]

Data type function
Return type array
Parameter list withNulls (boolean)
Standard none
Documentation this article

Returns an associative-numerical array of the current elements' contents. Each value may be accessed by either a numerical index or a string index equal to the element's name attribute value.

withNulls[]

Defaults to false; if it is true, the returned array will additionally include null values.

See also[]

onsubmit[]

Data type function
Return type undefined
Parameter list event (Event)
Standard none
Documentation this article

This user-defined method, if it exists, is called by the HTMLFormElement's event-handler by the same name. The return value is intentionally inconsequential; the event-handler will always return false, thus keeping JavaScript-enabled browsers on the page if the user tries to submit the form.

event[]

If present, this is simply passed from the event-handler.

See also[]
  • submit - Submits the form in the conventional manner.
  • ajax - Submits the form via AJAX.

redirect[]

Data type function
Return type undefined
Parameter list window (Window), [url (string)], [elements (object)]
Standard none
Documentation this article

Simulates a GET form submission targeting the given window. The POST method cannot be simulated.

This method is only useful in HTML 4.01 Strict and XHTML Strict documents, where the target attribute is invalid[1]; in other document types, or if you use the XHTML Target Module, you may simply use the form's target with the submit method.

window[]

Required; the window which will display the form's results. If this is the window which contains the form, the submit method is recommended.

url[]

Optional; overrides the form's action. In the absence of both this argument and the form's action, the window's current location will be used.

elements[]

Optional; overrides the form's set of elements and values. (The resulting query string is of the same form as makeQuery.)

setValues[]

Data type function
Return type undefined
Parameter list values (object)
Standard none
Documentation this article

For each property name in the values object which matches an element's name, assigns the property's value to the element's. Unmentioned elements will not be changed.

values[]

An object which associates element names with intended string values.

See also[]
  • getValues - Gets the form's elements' values.

submit[]

Data type function
Return type undefined
Parameter list [method (string)], [action (string)], [elements (object of HTMLElements)]
Standard none
Documentation this article

Changes the values of the form's attributes and elements to those of the arguments, if any, before calling HTMLFormElement.submit. If any elements or attributes are not mentioned, they are not changed.

method[]

Optional; "GET" or "POST" (case-insensitive). Overrides the form's attribute by the same name.

action[]

Optional; a filename. Overrides the form's attribute by the same name.

elements[]

Optional; a (modified) copy of the form's actual elements, obtained from the getValues method. Overrides the values of the form's elements by the same names.

See also[]

update[]

Data type function
Return type undefined
Parameter list none
Standard none
Documentation this article

Assigns getElements(true) to elements. This should be called if, for instance, elements are added to or subtracted from the form.

validate[]

Data type function
Return type boolean
Parameter list callbacks (object of functions), values (object of strings)
Standard none
Documentation this article

Validates the form's values according to the passed callbacks; if values were passed, validates them instead. The callbacks must have names which match those of the form elements they are to validate. Warning: Always validate user input on the server side; see the tutorial.

callbacks[]

Several methods, each of which

  • has the name of its corresponding element as its method name;
  • takes its corresponding element's value as its sole argument; and
  • returns either true or false according to whether the value is valid.
values[]

Several strings, each of which

  • has the name of its corresponding element as its property name; and
  • overrides its corresponding element's value as the argument to the validating function.
Example[]

output of index.php

<html>
  <head>
    <title>Titled Document</title>
    <script type="text/javascript" src="Form.js"></script>
    <style type="text/css">
      body, td{
          text-align:center;
      }
      table{
          margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <form name="example" id="example" action="index.php" method="GET">
      <table>
        <tr>
          <td>
            <label for="menu">Menu:</label>
          </td>
          <td>
            <select name="menu" id="menu">
              <option value="A">A</option>
              <option value="B">B</option>
              <option value="C">C</option>
              <option value="D">D</option>
              <option value="E">E</option>
              <option value="F">F</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="checkbox" name="finished" id="finished" value="yes"><label for="finished">Finished?</label>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" value="Submit">
	  </td>
        </tr>
      </table>
    </form>
    <script type="text/javascript" src="example.js"></script>
  </body>
</html>

example.js

var form = new Form('example');
form.onsubmit = function(){
    if(form.validate(callbacks)){
        //...
    }
};
var callbacks = {
    menu: function(value){
        //...
        return true;
    },
    finished: function(value){
        return value === 'yes';
    }
};

Source[]

function Form(form){
    var that = this;
    if(typeof form === 'string')
        form = document.forms[form] || document.getElementById(form);
    form.onsubmit = function(event){
        event = event || window.event;
        (that.onsubmit || function(){})(event);
        return false;
    };
    this.getElements = function(withNulls){
	var elements = [];
	for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
	    if(withNulls || element.value)
		elements.push(elements[element.name] = element);
	return elements;
    };
    this.update();
    this.getValues = function(withNulls){
	var values = [];
	for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
	    if(withNulls || element.value)
		values.push(values[element.name] = element.value);
	return values;
    };
    this.setValues = function(values){
	for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
	    element.value = values[element.name] || element.value;
    };
    this.submit = function(method, action, elements){
	if(elements)
	    this.setValues(elements);
	form.onsubmit();
	form.method = method || form.method;
	form.action = action || form.action;
	form.submit();
    };
    this.ajax = function(callback, method, action, async, elements){
	var ajax = getAjax();
	if(ajax){
	    method = (method || form.method).toUpperCase();
            var query = Form.makeQuery(elements || this.getElements());
	    ajax.open(method || form.method,
		      (action || form.action) + (method === 'GET' ? '?' + query : ''),
		      async !== false);
	    ajax.onreadystatechange = function(){
		if(this.readyState === 4)
		    callback({text: this.responseText, xml: this.responseXML});
	    };
	    ajax.send(method === 'POST' ? query : null);
	    return true;
	}else
	    return false;
    };
    this.redirect = function(window, url, elements){
        url = url || form.action || window.location.href;
        elements = elements || this.getElements();
        var location = Form.extractPath(url) + '?'
                             + Form.concatQueries(
                                   Form.extractQuery(url),
                                   Form.makeQuery(elements)
                               );
        window.location.href = location;
    };
}
Form.concatQueries = function(queries){
    if(arguments.length > 1){
        queries = [queries];
        for(var i = 1; i < arguments.length; i++)
            queries[i] = arguments[i];
    }
    return concat(queries);
    function concat(array){
        for(var i = 0; i < array.length; i++)
            if(typeof array[i] === 'string' || array instanceof String){
                if(array[i] === '')
                    array.splice(i, 1);
                else{
                    array[i] = array[i].replace(/[&;^$]{2,}/, '&');
                }
            }else
                array[i] = concat(array[i]);
        return array.join('&');
    }
};
Form.makeQuery = function(elements){
    var query = [];
    for(var i = 0; i < elements.length; i++)
        query.push(elements[i].name + '=' + elements[i].value);
    return query.join('&');
};
Form.extractQuery = function(url){
    if(url.indexOf('?') === -1)
        return '';
    var end =  url.indexOf('#') === -1 ? url.length : url.indexOf('#');
    return url.substring(url.indexOf('?') + 1, end);
};
Form.extractPath = function(url){
    return url.substring(0, url.indexOf('?'));
};
Form.prototype = {
    validate: function(callbacks, values){
	values = values || this.getValues(true);
	for(var i in callbacks)
	    if(values[i] && !callbacks[i](values[i]))
		return false;
	return true;
    },
    update: function(){
	this.elements = this.getElements(true);
    }
};

References[]

  1. ↑ http://www.accessify.com/features/tutorials/new-windows/
Community content is available under CC-BY-SA unless otherwise noted.
Advertisement

Fan Feed