The FormOverlay
widget allows the display and data
extraction of any form.
Data returned upon form submission:
The following Javascript and CSS files will need to be included on your page:
<script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script> <script type="text/javascript" src="../../build/overlay/overlay.js"></script> <script type="text/javascript" src="../../build/formoverlay/formoverlay.js"></script>
<link rel="stylesheet" href="../../build/overlay/assets/pretty-overlay-core.css" /> <link rel="stylesheet" href="../../build/overlay/assets/skins/sam/pretty-overlay-skin.css" /> <link rel="stylesheet" href="../../build/formoverlay/assets/formoverlay.css" />
The FormOverlay requires only form content during initialization. The normal Overlay attributes (such as headerContent) can be used as expected.
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).
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();
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.
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();