jQuery - jQuery's javascript library and jQueryUI's functionality are leveraged heavily throughout this project. Below you'll find two lists. The first list serves as this example file's table of contents and will help you find the specific subsection you're looking for in this lengthy webpage. The second list provides more details on the various form/element attributes that affect jQuery's behavior within this project.
jQueryUI Datepicker Widget - The date element utilizes jQueryUI's datepicker widget. Below, you'll find several ways you can use the addDate function in your forms. See http://jqueryui.com/demos/datepicker/ for more information on this jQueryUI widget.
<?php
$form = new form("jquery_0");
$form->setAttributes(array(
"width" => 400
));
if(!empty($_GET["errormsg_0"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_0"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_0");
$form->addDate("Date:", "MyDate");
$form->addDate("Date w/Default Value:", "MyDatePrefilled", date("F j, Y", strtotime("+1 week")));
$form->addDate("Date w/Modified Hint:", "MyDateHint", "", array("hint" => "Click here to schedule your appointment date."));
$form->addDate("Date w/Modified Date Format:", "MyDateDateFormat", "", array("jqueryOptions" => array("dateFormat" => "mm/dd/yy")));
$form->addDate("Date w/Multiple Months and Range Limit:", "MyDateMultipleMonthsRangeLimit", "", array("jqueryOptions" => array("numberOfMonths" => 3, "minDate" => "-30", "maxDate" => "+30")));
$form->addDate("Date w/Modified Year Range:", "MyDateYearRange", "", array("jqueryOptions" => array("yearRange" => date("Y") - 100 . ":" . date("Y"))));
$form->addButton();
$form->render();
?>
jQuery Date Range Picker Plugin - The daterange element utilizes the Date Range Picker jQuery plugin developed by Filament Group, Inc. Below, you'll find several ways you can use the addDateRange function in your forms. See http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/ for more information on this jQuery plugin.
<?php
$form = new form("jquery_1");
$form->setAttributes(array(
"width" => 400
));
if(!empty($_GET["errormsg_1"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_1"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_1");
$form->addDateRange("Date Range:", "MyDateRange");
$form->addDateRange("Date Range w/Default Value:", "MyDateRangePrefilled", date("F j, Y") . " - " . date("F j, Y", strtotime("+1 week")));
$form->addDateRange("Date Range w/Modified Hint:", "MyDateRangeHint", "", array("hint" => "Click here to select your report's date range."));
$form->addDateRange("Date Range w/Modified Date Format:", "MyDateRangeDateFormat", "", array("jqueryOptions" => array("dateFormat" => "mm/dd/yy")));
$form->addDateRange("Date Range w/Minimum and Maximum Dates:", "MyDateRangeMinMaxDates", "", array("jqueryOptions" => array("minDate" => "-30", "maxDate" => "+30")));
$form->addButton();
$form->render();
?>
jQueryUI Slider Widget - The slider element utilizes jQueryUI's slider widget. Below, you'll find several ways you can use the addSlider function in your forms. See http://jqueryui.com/demos/slider/ for more information on this jQueryUI widget.
<?php
$form = new form("jquery_2");
$form->setAttributes(array(
"width" => 400
));
if(!empty($_GET["errormsg_2"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_2"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_2");
$form->addSlider("Slider:", "MySlider");
$form->addSlider("Slider w/Step Increment:", "MySliderStepIncrement", "", array("jqueryOptions" => array("step" => 5)));
$form->addSlider("Slider w/Suffix:", "MySliderSuffix", "", array("suffix" => "%"));
$form->addSlider("Slider w/Prefix and Custom Min/Max Values:", "MySliderPrefixMinMax", "", array("prefix" => "$", "jqueryOptions" => array("min" => 10, "max" => 90)));
$form->addSlider("Slider w/Range:", "MySliderRange", array(30, 70), array("prefix" => "$"));
$form->addSlider("Slider w/Vertical Orientation:", "MySliderVerticle", "", array("height" => 150, "jqueryOptions" => array("orientation" => "vertical")));
$form->addButton();
$form->render();
?>
jQueryUI Sortable Interaction - The sort and checksort elements utilize jQueryUI's sortable interaction. Below, you'll find several ways you can use the addSort and addChecksort functions in your forms. See http://jqueryui.com/demos/sortable/ for more information on this jQueryUI interaction.
<?php
$form = new form("jquery_3");
$form->setAttributes(array(
"width" => 400
));
if(!empty($_GET["errormsg_3"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_3"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_3");
$form->addSort("Sort:", "MySort", array("Option #1", "Option #2", "Option #3"));
$form->addSort("Sort w/Associative Array of Options:", "MySortAssociative", array("option1" => "Option #1", "option2" => "Option #2", "option3" => "Option #3"));
$form->addCheckSort("Checksort:", "MyChecksort", "", array("Option #1", "Option #2", "Option #3"));
$form->addCheckSort("Checksort w/NoBreak Attribute:", "MyChecksortNoBreak", "", array("Option #1", "Option #2", "Option #3"), array("nobreak" => 1));
$form->addCheckSort("Checksort w/Single Default Value:", "MyChecksortSingleDefault", "Option #3", array("Option #1", "Option #2", "Option #3"));
$form->addCheckSort("Checksort w/Array of Default Values:", "MyChecksortArrayDefault", array("option1", "option2"), array("option1" => "Option #1", "option2" => "Option #2", "option3" => "Option #3"));
$form->addButton();
$form->render();
?>
jQuery Color Picker Plugin - The color element utilizes the Color Picker jQuery plugin. Below, you'll find several ways you can use the addColor function in your forms. See http://eyecon.ro/colorpicker/ for more information on this jQuery plugin.
<?php
$form = new form("jquery_4");
$form->setAttributes(array(
"width" => 400
));
if(!empty($_GET["errormsg_4"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_4"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_4");
$form->addColor("Color:", "MyColor");
$form->addColor("Color w/Custom Hint:", "MyColorHint", "", array("hint" => "Click here to select your paint color."));
$form->addColor("Color w/Default Value:", "MyColorPrefilled", "660099");
$form->addButton();
$form->render();
?>
jQueryUI Button Widget - This project includes support for jQueryUI's button widget. The two forms below demonstrate how to activate jQueryUI buttons - either globally with the "jqueryUIButtons" form attribute or by using the "jqueryUI" element attribute to activate a single button. See http://jqueryui.com/demos/button/ for more information on this jQueryUI widget.
<?php
$form = new form("jquery_5");
$form->setAttributes(array(
"jqueryUIButtons" => 1,
"width" => 400
));
if(!empty($_GET["errormsg_5"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_5"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_5");
$form->addTextbox('Enable all form buttons w/"jqueryUIButtons" form attribute:', "MyTextbox");
$form->addButton("Button #1");
$form->addButton("Button #2");
$form->addButton("Button #3");
$form->render();
?>
<br/><br/>
<?php
$form = new form("jquery_6");
$form->setAttributes(array(
"width" => 400
));
if(!empty($_GET["errormsg_6"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_6"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_6");
$form->addTextbox('Enable single button w/"jqueryUI" element attribute:', "MyTextbox");
$form->addButton("Button #1");
$form->addButton("Button #2", "submit", array("jqueryUI" => 1));
$form->addButton("Button #3");
$form->render();
?>
jQuery Tooltip Plugin - This project utilizes the Poshy Tip jQuery plugin for handling tooltips. To activate a tooltip, simply set the "tooltip" element attribute to a string. Both plain-text and html content are supported. See http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/ for more information on this jQuery plugin.
<?php
$form = new form("jquery_7");
$form->setAttributes(array(
"width" => 400
));
if(!empty($_GET["errormsg_7"]))
$form->errorMsg = filter_var(stripslashes($_GET["errormsg_7"]), FILTER_SANITIZE_SPECIAL_CHARS);
$form->addHidden("cmd", "submit_7");
$form->addTextbox("Tooltip:", "MyTextbox", "", array("tooltip" => "This is a text-only tooltip."));
$form->addTextbox("Tooltip w/Rich Text:", "MyTextboxRichText", "", array("tooltip" => '<div class="tooltipTitle">This is my rich-text tooltip.</div><div class="tooltipBody">The "tooltip" element attribute can accept either text or html.</div>'));
$form->addTextbox("Tooltip w/Image:", "MyTextboxImage", "", array("tooltip" => '<img src="http://www.imavex.com/php-form-builder-class/screenshots/1.png" style="background: #fff; padding: 10px; border: 1px solid #ccc;"/>'));
$form->addButton();
$form->render();
?>