Recipe 11.13 Submitting a Form

11.13.1 Problem

You want to submit a form to a URL, such as a CGI script.

11.13.2 Solution

Use a LoadVars object with properties and values corresponding to each element of the form to be submitted. Or, alternatively, write a submitToURL( ) method for the custom Form class to handle this process dynamically for any form.

11.13.3 Discussion

Here are the steps for submitting form data to a URL using LoadVars:

  1. Create a LoadVars object.

  2. Add a property to the LoadVars object for each form element. The property name should be the name of the form element. For list boxes, combo boxes, text fields, and checkboxes, the property name is the value of the element's instance name (programmatically, this is the _name property value). For radio buttons, the name of the property should be the group name. The value of each property should be the value of the element as retrieved using the recipes in this chapter.

  3. Call the send( ) method of the LoadVars object to send all the properties and values to a specified URL.

Here is a code snippet that uses this process with just a few form elements:

lv = new LoadVars(  );
lv.myListBox_lb       = myListBox_lb.getSelectedIndex(  ).data;
lv.myCheckBox0_ch     = myCheckBox0_ch.getValue(  );
lv.myRadioButtonGroup = myRadioButtonGroup.getValue(  );

The preceding process is not too taxing, as long as there are only a few simple elements in the form. However, as you add more elements to the form, the process becomes more burdensome and error-prone. You can simplify the process by creating a submitToURL( ) method for the Form class (see Recipe 11.12) and using it for all your form submission needs.

The submitToURL( ) method shown in the following example accepts a single parameter: the URL to which to submit the form data. The submitToURL( ) method (shown later) also relies on another custom method, getValues( ), which populates an associative array with the form element names and their values, and then returns that array.

Form.prototype.getValues = function (  ) {

  // Create the associative array to hold the form element names and values.
  var obj = new Array(  );
  var values, value, elem;

  // Loop through all the form elements in the form.
  for (var i = 0; i < this.formElements.length; i++) {
    elem = this.formElements[i];

    // Process each form element, as appropriate to its type. The instanceof operator
    // indicates whether the element is of the specified class.
    if (elem instanceof TextField) {
      // Store each text field's value in the array 
      // with the text field name as the key.
      value = elem.text;
      obj[elem._name] = value;
    else if (elem instanceof FCheckBoxClass) {
      // Get the value of the checkbox, and assign it to an element of the
      // associative array using the checkbox's name as the key.
      value = elem.getValue(  );
      obj[elem._name] = value;
    else if (elem instanceof FCheckBoxGroupClass) {      
      // Get the values within the checkbox group (requires custom checkbox group
      // class (see Recipe 11.11).
      values = elem.getValues(  );

      // Store each checkbox value in the array, where the key is the name property
      // of the element returned by the checkbox group.
      for (var j = 0; j < values.length; j++) {
        obj[values[i].name] = values[i].value;
    else if (elem instanceof FRadioButtonGroupClass) {
      // Store the active radio button's value (obtained from getValue(  )), where the
      // key is the radio button group name.
      value = elem.getValue(  );
      obj[elem.getGroupName(  )] = value;
    else if (elem instanceof FComboBoxClass) {
      // For a combo box, retrieve the data property of the object returned by the
      // getSelectedItem(  ) method, unless it is undefined, in which case use the
      // label property.
      value = (elem.getSelectedItem(  ).data == undefined) ?
                 elem.getSelectedItem().label: elem.getSelectedItem(  ).data;

      // If value is an object (and not a primitive string), this means that the data 
      // property was assigned a reference to an object. In that case, assign to
      // value the value property from the data object. (See Recipe 12.3 regarding
      // assigning data objects.)
      if (value instanceof Object) {
        value = value.value;

     // Store the value, using a key that is the name of the combo box.
     obj[elem._name] = value;
    else if (elem instanceof FListBoxClass) {

      // Retrieve the values from the list box.
      values = elem.getSelectedItems(  );

      // Create an element whose key is the list box name. Assign to this element a
      // new array filled with the values from the list box (potentially multiple).
      obj[elem._name] = new Array(  );

      // For each selected item in the list box, add its value to the array. The
      // logic for getting each value is the same as used earlier for combo boxes.
      for (var j = 0; j < values.length; j++) {
        value = (values[j].data == undefined) ? values[j].label : values[j].data;
        if (value instanceof Object) {
          value = value.value;

  // Return the associative array containing all the form values.
  return obj;

// The submitToURL(  ) method should be called from your Form object to submit the form
// data to a URL.
Form.prototype.submitToURL = function (url) {

  // Create a new LoadVars object for sending the form data to the URL.
  var lv = new LoadVars(  );

  // Get the form values by calling the getValues(  ) method (defined earlier).
  var vals = this.getValues(  );

  // Add each form element to the LoadVars object so they will be submitted.
  for (var item in vals) {
    lv[item] = vals[item];

  // Send the data to the server script at the specified URL.


11.13.4 See Also

Recipe 11.12

    Part I: Local Recipes
    Part II: Remote Recipes