Fandom

JavaScript Wiki

Form

87pages on
this wiki
Add New Page
Talk0 Share

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.

constructorEdit

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.

concatQueriesEdit

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.

extractPathEdit

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/

extractQueryEdit

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

makeQueryEdit

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

prototypeEdit

These members are available on each instance of Form.

ajaxEdit

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 alsoEdit
  • submit - Submits the form in the conventional manner.

elementsEdit

Data type array
Standard none
Documentation this article

An array similar to HTMLFormElement.elements.

getElementsEdit

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 alsoEdit

getValuesEdit

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.

withNullsEdit

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

See alsoEdit

onsubmitEdit

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.

eventEdit

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

See alsoEdit
  • submit - Submits the form in the conventional manner.
  • ajax - Submits the form via AJAX.

redirectEdit

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.

windowEdit

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

urlEdit

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.

elementsEdit

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

setValuesEdit

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.

valuesEdit

An object which associates element names with intended string values.

See alsoEdit
  • getValues - Gets the form's elements' values.

submitEdit

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.

methodEdit

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

actionEdit

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

elementsEdit

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 alsoEdit

updateEdit

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.

validateEdit

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.

callbacksEdit

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.
valuesEdit

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.
ExampleEdit
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';
    }
};

SourceEdit

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);
    }
};

ReferencesEdit

  1. http://www.accessify.com/features/tutorials/new-windows/

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.