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:

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(  );
lv.send("http://www.yourdomain.com/cgi/getFormData.cgi");

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;
        }
        obj[elem._name].push(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.
  lv.send(url);

};

11.13.4 See Also

Recipe 11.12