2. Writing various AJAX forms in Drupal 7

3. 1. Overview of Form API 2. Ctools 2.1 Ctools features 3. Ajax 3.1 Ajax Forms in Drupal 4. Putting it all together (demo)

4. 1. Overview of Form API - provides a collection of functions to enable the processing and display of HTML forms - these functions are used to achieve consistency in the form processing and presentation

5. 1. Overview of Form API - define : - my_module_example_form() - alter : - my_module_example_form_alter() - validate : - my_module_example_form_validate() - submit : - my_module_example_form_submit()

6. 1. Overview of Form API - basic function is drupal_get_form($form_id) which handles retrieving, processing, and displaying a rendered HTML form for modules automatically - drupal_form_submit($form_id, &$form_state) used to build and submit forms programmatically, without any user input

7. 2. Ctools - a suit of APIs and tools to improve the developer Experience - it includes : - form tools - form wizard - modal dialog - plugins - exportables

8. 2.1 Ctools features - Form tools : - tools to make it easier for forms to deal with Ajax - Form wizard : - an API to make multi-step forms much easier

9. 2.1 Ctools features - Modal dialog : - tools to make it simple to put a form in a popup - Plugins : - tools to make it easy for modules to let other modules implement plugins from.inc files

10. 3. Ajax - stands for Asynchronous JavaScript and XML - group of interrelated web development techniques used on the client side to create asynchronous web applications - result : web applications can send data in background without interfering with the display or behavior of the current page

11. 3.1 Ajax Forms in Drupal - offer dynamic behavior with no page reloads - no Javascript code needs to be written - use the '#ajax' property on a form element to make it Ajax-enabled

12. 3.1 Ajax Forms in Drupal - '#ajax' property has arguments : - 'callback' => function to call - 'wrapper' => element on which to operate - 'method' => what to do with the result - 'effect' => how to do the operation