Using forms in a LAZR overlay

The FormOverlay widget allows the display and data extraction of any form.

Demonstration

Page Setup

The following Javascript and CSS files will need to be included on your page:

Javascript

    <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
    <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
  

Widget Setup

The FormOverlay requires only form content during initialization. The normal Overlay attributes (such as headerContent) can be used as expected.

    var LAZR_YUI_CONFIG = {
        filter: "min",
        base: "../../build/",
        modules: LAZR_MODULES,
    };
    YUI(LAZR_YUI_CONFIG).use("lazr.formoverlay", function(Y){
      var form_content = 'Enter name: <input type="text" name="username" />';
      var formoverlay = new Y.lazr.FormOverlay({
          headerContent: '<h2>Your Form Title</h2>',
          form_content: form_content});
      formoverlay.render();
    });
  

Note: The form content can be passed as either a string of HTML (as is useful if the form is obtained via an AJAX request) or as an instance of a Y.Node (as is useful if the form is obtained from the current page).

Providing the submit callback

To do something useful with the FormOverlay, you will want to provide your own submit callback, so that you can do something with the data. Data is returned to your callback as a hash, where each value is a list, due to the ability to select multiple values for a single key with HTML check input elements.

      ...
      var submit_callback = function(data){
          // Do something useful with the data...
          Y.get("#data-display").set("innerHTML", Y.dump(data));
      };
      var formoverlay = new Y.lazr.FormOverlay({
          headerContent: '<h2>Your Form Title</h2>',
          form_content: form_content,
          form_submit_callback: submit_callback});
      formoverlay.render();
  

Displaying error messages

The FormOverlay includes showError() and clearError() methods that can be used to display an error (or a list of errors) inside the FormOverlay, as demonstrated in the example.

Providing a custom submit button

By default, the FormOverlay will create a submit button and include it in the form element. If you would like your own submit button, with it's own text etc., you can also pass it in as an attribute:

      ...
      var submit_button = Y.Node.create('<input type="submit" value="Hit me!">');
      var formoverlay = new Y.lazr.FormOverlay({
          headerContent: '<h2>Your Form Title</h2>',
          form_content: form_content,
          form_submit_callback: submit_callback,
          form_submit_button: submit_button});
      formoverlay.render();