Support for Insight and ChurchInsight users

How can we help you today?

Support > Articles > Article Forms: Adding Radio Buttons to a Form

Adding radio buttons to a form

Radio buttons are normally used for an either/or scenario, so you'd select one and set the others to deselect, unlike tick boxes where you can set them so that multiple options can be selected. If you are wanting to use a list of options where the end user can select more than one items you could use tick boxes.

Radio buttons need to be grouped, so that the 'NAME' field in all buttons is the same and the value will be the different item that people choose, for example, if you were wanting respondents to choose their age group then the source code would look like this:

 <input name="Age" type="radio" value="Under 18" />&nbsp;Under 18<br /> radio-buttons---age
 <input name="Age" type="radio" value="18–65" />&nbsp;18–65<br />
 <input name="Age" type="radio" value="Over 65" />&nbsp;Over 65<br />

This will only allow the end user to select one option, and will automatically deselect the others.

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.
 

Making Radio Buttons Mandatory


If you want to make the radio buttons in your form mandatory, 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 ($('input[name="Age"]:checked').length > 0) {
        doFormSubmission(btn);
      }
      else {
        alert('Please select your age range from the options');
        return false;
      }
  }</script>



A brief explanation:
$('input[name="Age"]:checked') – this gets a list of all the radio button inputs which are named "Age", and which are selected (checked). Change "Age" to be the name of your group of radio buttons.

.length – gets the length of this list. We would expect this length to be 0 if none are selected, and greater than 0 if something has been chosen.