ChurchInsight  is now  
Hubb.church
 
 
 
 

Support for Hubb users

How can we help you today?

Support > Articles > Article Forms: Adding Selection Fields (dropdown lists) to a Form

Adding selection fields (dropdown lists) to a form

You can use a drop down list to allow someone submitting a form to choose from a number of given options. If you are wanting more than one option then this will become a multiselect list.

If you are wanting users to just tick one or more options then you can use Tick Boxes, and if you are wanting an either/or scenario where you want the user to only select one option, and the alternative is deselected, use Radio Buttons.

Adding a dropdown list selection field

single-dropdown

If, as an example, you are wanting people to be able to indicate which evening they would prefer for a midweek meeting, you can use a dropdown list selection field giving the options. A dropdown list allows one option to be selected.
The code would look like this in the source of the article: Best day for you to join us: <select name="HomegroupDay"><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option></select>
 

Adding a multi-list selection field

Multi-select-options

If you are wanting the end user to be able to specify more than one preference they you can allow more than one option to be selected, by holding down the control/command key. In this case code would look like this in the source of the article:
Best days for you to join us: <select multiple="true" name="HomegroupDays"><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option></select>

In all cases make sure there is something in the NAME field otherwise the form will not generate a column for these details in the web office. For selection fields you will also need to have a VALUE set for each option to make sure this information is saved in the column for this field.

You have a couple of options with dropdowns:

1) Simply have choices 'Monday', 'Tuesday', Wednesday', etc. In the options you can say which is the default selected value. You assume that the user is either happy with the default or will change it if not.

2) If you want to be sure they have really answered the question (and not just ignored it, leaving the default selected) then you could have a blank first option and add use the solution below to make a selection mandatory. The javascript prevents the form being submitted if they haven't explicitly chosen an option. The solution below depends on the "Value" field being blank, but you can put what you like in the "Text" field e.g. "Please select an option..." or just leave it blank.
 

Making a dropdown list mandatory

If you want to make it mandatory to select an option from the dropdown list then the submit button needs to be replaced with the following:

<input class="sitebutton" onclick="return CheckAndSubmit(this);" style="width:90px;" type="button" value="Send" />

Note in the button code  the standard "doFormSubmission(this);" is replaced with "return CheckAndSubmit(this);" – which calls a custom function that is included below.

Then, for the above example, add the following in the source code of the article:


<script type="text/javascript">
  function CheckAndSubmit(btn) {
    if ($('select[name="
YOUR_DROPDOWN_NAME"]').val()) {
        doFormSubmission(btn);
      }
      else {
        alert('You must select one of the options');
        return false;
      }
  }
 </script>


This ensures that something must be selected before the form can be submitted.  Change "YOUR_DROPDOWN_NAME" to be the name of your selection field.

NB. If your alert text has single quotes or apostrophes in you need to do what is called escaping by adding a backslash before each quote. For example:  alert('Let\'s go');  or alert('Please press the \'Submit\' button');
 

Most importantly, test every form as soon as you publish it and check the results in the web office. If the 'name' is missed from any field then the results will not be saved and you will lose the information people are submitting. When testing forms with multiple options, choose all the options, this will set the order the columns are generated in the web office. If you are wanting an option to be mandatory please test that you can't submit the form until this is filled in.