forms

Rendering the same for twice leads to incorrect submission

If you render the same form (with the same exact form id) on the same page more than once, Drupal will incorrectly submit all matching forms on the page to the first-rendered form. To avoid this, you must create dynamic form ids. This can be achieved by using hook_forms() to map dynamic form ids to the appropriate callbacks.

Here's an example from the usasearch_field module:

Building a Multistep Registration Form in Drupal 7

This article provides a step-by-step tutorial for creating a custom, multistep registration form via the Forms API in Drupal 7. For a Drupal 6 guide, I recommend Multistep registration form in Drupal 6.

Drupal 7's updated Form API makes the process of building multistep forms relatively painless. In combination with the excellent Examples for Developers module, it's really just a matter of copy, paste, and tweak.

We're going to be putting a slightly different spin on the standard approach to creating a multistep form.

Import form values from one form to another via AJAX

Drupal 7's new and improved Form API makes using AJAX a breeze. It enables you to add, replace, or remove form elements via AJAX without ever really having to get your hands dirty.

I recently had the opportunity to give it a whirl. Here's a the deal:
I have content type Resume and Profile2 type Job Seeker Profile. I'd like my users to be able to create up to 5 resumes, and I'd like them to have the option of importing information from their profile into their brand-spanking new resume. So, I'm going to create an 'Import from profile' button that will populate the resume fields with profile field values via AJAX.

Note: It is possible to accomplish something like this by setting default values via a token. However, in this case, I'd like to be able to import things like field collections, addresses, and fields with unlimited cardinality. Here's the code that accomplished it!

Using jQuery to prepopulate inputs with default values, clear defaults onClick / focus

There are many ways to set and clear default form values using jQuery and javascript. Here's my preferred method. It doesn't cause any issues when javascript is disabled, and it allows you to set a different css class for empty vs non-empty inputs.


/* **
/* PREPOPULATE FIELDS
*/

Example implementation of jQuery Validation plugin

The jQuery validation plugin is an excellent tool for validating forms. The online documentation is actually quite extensive, but I found it difficult to locate any example code that really showed a full implementation of the plugin with all of its methods. After a lot of collaborative work, I've written an implementation of this plugin that manages to use most of the of customizable methods. There's a bit of my own jQuery thrown in this, but it should help to provide others with a good working model that can easily be reverse-engineered.