Index

How do I create a form and submit it?

XUL has no mechanism to submit forms, as XUL uses a different UI model where form submission is rarely applicable. Many people who ask about how to submit forms using XUL are usually just used to the way that HTML works, and expect XUL to function in a similar fashion.

Specifically, in HTML, one creates a document with fields with which the user can enter information. The user selects a Submit button which takes all of the information in the form and sends it to a remote site. The remote site processes the information and returns a new page, which replaces the previous one.

A UI doesn't generally operate this way. Instead, actions need to be performed constantly, for instance when selecting from lists, dragging items, or selecting menu commands. The UI doesn't gets replaced until the window is closed.

That said, you may certainly need to send information to a remote site, however, you likely don't need a form. There are several possibilities:

XMLHttpRequest

Mozilla supports an object XMLHttpRequest which can be used to make arbitrary requests to a remote site. You can send data with the request and you can make the request in the background or wait until a response is returned. The XMLHttpRequest also has the ability to parse the content as XML. The following example shows how this works:

var url="http://www.example.com/test.xml";
// create a new XMLHttpRequest object
var xrequest=new XMLHttpRequest();
// open a connection to the remote site. You can use a GET
// or a POST. The second argument to the open function should
// be the URL to open. The third argument should be false for a
// synchronous connection, which will cause the open method to wait
// until the response is received. If the third argument is set
// to true, the open method does not wait. You can assign a script to
// the XMLHttpRequest's onload property in this case and it will
// be executed when the response is available.
xrequest.open("GET",url,false);
// The request is not made until the send function is called. If
// doing a POST, you can pass a string or a document object which
// will be sent as the post content.
xrequest.send(null);
// The response will be returned in both the responseText and
// responseXML properties. The former holds the plain text version
// whereas the latter returns the XML parsed as a document, if the
// content is XML. If it isn't, you can still use responseText to
// get the content.
var result=xrequest.responseXML;

Mozilla supports a number of other mechanisms to send data remotely, such as XML-RPC and SOAP.

However, if you absolutely must, you can still embed an HTML form in a XUL window, using the HTML namespace. Note that only HTML form elements can be submitted in this manner -- XUL elements are not submitted.

<html:form xmlns:html="http://www.w3.org/1999/xhtml"
           method="post" action="http://www.example.com/handleForm">
  <html:select name="time">
    <html:option value="morning">Morning</html:option>
    <html:option value="noon">Noon</html:option>
    <html:option value="midnight">Midnight</html:option>
  </html:select>
  <html:input type="submit" value="Go"/>
</html:form>

This example is just like an HTML form except that the HTML namespace has been used. Note also that tags must be properly closed, so the closing option tags are necessary.

Copyright © 1999 - 2005 XULPlanet.com