ChronoForms Adding an 'other' box to a drop-down - ChronoForms

Home

Adding an 'other' box to a drop-down

Written by Bob Janes

Sunday, 24 October 2010 10:09

Drop-downs are a valuable way of offering a list of choices to your user to select from. And sometimes it just isn't possible to make the list complete, there's always another option that someone will want to add. So we add an "other" option to the drop-down. But that tells us nothing, so we need to add an input to tell us what "other" means here.

This article is from Chapter 7 “Adding features to your form” of The ChronoForms Book and is included here with permission from Packt Publishing.

Getting ready

We'll just add one more element to our basic newsletter form. We haven't used a drop-down before but it is very similar to the check-box element from the previous recipe.

How to do it …

Use the Form Wizard to create a form with two TextBox elements, a DropDown element, and a Button element.

The changes to make in the element are:
- Add "I heard from" in the Label
- Change the Field Name to "hearabout"
- Add some options to the Options box—"Google", "Newspaper", "Friend", and "Other"
Leave the Add Choose Option box checked and leave Choose Option in the Choose Option Text box. Apply the Properties box.
Make any other changes you need to the form elements; then save the form, publish it, and view it in your browser.

Notice that as well as the four options we added the Choose Option entry is at the top of the list. That comes from the checkbox and text field that we left with their default values.

It's important to have a "null" option like this in a drop-down for two reasons. First, so that it is obvious to a user that no choice has been made. Otherwise it's very easy for them to leave the first option showing and this value—Google in this case—will be returned by default. Second, so that we can validate select-one-required if necessary. The "null" option has no value set and so can be detected by validation script.

Now we just need one more text box to collect details if Other is selected.

Open the form in the Wizard Edit; add one more TextBox element after the DropDown element. Give it the Label please add details and the name "other".

Even though we set the name to "other", ChronoForms will have left the input ID attribute as text_4 or something similar. Open the Form in the Form Editor and change the ID to "other" as well. The same is true of the drop-down. The ID there is select_2, change that to hearabout.

Now we need a script snippet to enable and disable the "other" text box if the Other option is selected in the drop-down. Here's the code to put in the Form JavaScript box:
```
window.addEvent('domready', function() {
 $('hearabout').addEvent('change', function() { 
 if ($('hearabout').value == 'Other' ) { 
 $('other').disabled = false; 
 } else { 
 $('other').disabled = true; 
 } 
 });
 $('other').disabled = true; 
});
```
This is very similar to the code in the last recipe except that it's been condensed a little more by merging the function directly into the addEvent().
When you view the form you will see that the text box for please add details is grayed out and blocked until you select Other in the drop-down.

Make sure that you don't make the please add details input required. It's an easy mistake to make but it stops the form working correctly as you have to select Other in the drop-down to be able to submit it.

How it works

Once again, this is a little JavaScript that is checking for changes in one part of the form in order to alter the display of another part of the form.

There's more …

Hiding the whole input

It looks a little untidy to have the disabled box showing on the form when it is not required. Let's change the script a little to hide and unhide the input instead of disabling and enabling it.

To make this work we need a way of recognizing the input together with its label. We could deal with both separately, but let's make our lives simpler. In the Form Editor, open the Form HTML box and look near the end for the other input block:

<div class="form_item">
 <div class="form_element cf_textbox">
 <label class="cf_label" 
 style="width: 150px;">please add details</label>
 <input class="cf_inputbox" maxlength="150" size="30" 
 title="" id="other" name="other" type="text" />
 </div>
 <div class="cfclear">&nbsp;</div>
</div>

That <div class="form_element cf_textbox"> looks like it is just what we need so let's add an ID attribute to make it visible to the JavaScript:

<div class="form_element cf_textbox" id="other_input">

Now we'll modify our script snippet to use this:

window.addEvent('domready', function() {
 $('hearabout').addEvent('change', function() { 
 if ($('hearabout').value == 'Other' ) { 
 $('other_input').setStyle('display', 'block'); 
 } else { 
 $('other_input').setStyle('display', 'none'); 
 } 
 });
 // initialise the display
 if ($('hearabout').value == 'Other' ) { 
 $('other_input').setStyle('display', 'block'); 
 } else { 
 $('other_input').setStyle('display', 'none'); 
 } 
});

Apply or save the form and view it in your browser. Now the input is invisible see the following screenshot labeled 1 until you select Other from the drop-down see the following screenshot labeled 2.

Adding Features to your Joomla! Form using ChronoForms

The disadvantage of this approach is that the form can appear to "jump around" as extra fields appear. You can overcome this with a little thought, for example by leaving an empty space.

Greyhead.net

Getting ready

How to do it …

How it works

There's more …

Hiding the whole input

See also