Solspace FreeForm Pro radio group default value

Question

We're using Pro so the client can use the GUI to easily create forms.

I've got a custom composer template to output these forms.

With radio groups I need the first radio to be pre-selected (who wouldn't want that?!), ie checked="checked". In fact it doesn't have to be the first radio button, any will do, this will simplify client-side validation.

In the Docs: http://www.solspace.com/docs/freeform/form/#freeform_field_field_name outlines default_value="VALUE", this is available to pre-select a default value.

But there's no further explanation in 'Default Fieldtypes'.

In my composer template I have this:

{freeform:field:{composer:field_name} default_value="Yes"}

When 'Yes' is available as a value for a radio button it does pre-select it. But I don't know what the values will be as the client will build the forms.

I need this (pseudo code):

{freeform:field:{composer:field_name} default_value="{composer:field_name[0]:data:value}"}

Anyone done this? Help from Solspace?

Answer 1

There are situations where it could be preferable to not have any radio buttons selected in advance, but this is for another conversation ;)

Unfortunately, it isn't possible to dynamically put a radio/checkbox group/select value as checked in the Composer Template at this time. What would be needed is a tag pair for these fields in the Composer Template, such as eg. {freeform:field:{composer:field_name}}{/freeform:field:{composer:field_name}}. That way you could set the first loop as "checked". Unfortunately this feature is not available at the moment.

One workaround would be to use javascript/jQuery to select your first item in the radio group. For example something like this:

$("input:radio[name=field_name]:first").attr('checked', true);

Another workaround is to use a form field that is guaranteed to always have a value selected by default/on first load: the select field.

Answer 2

Solspace's JS solution could be more complete. As the headline feature of FreeForm Pro is Composer for CP users to create forms without coding the above code can only be written if you know what a CP member will name the radio groups, which of course you won't.

Here's my complete JQuery JS code to pre-select the first radio button in a radio group of unknown name.

// find all input type radio, find group names, check if none selected, if not select first radio.
var radio_array = Array();
$('input[type="radio"]').each(function(){
    radio_array.push($(this).attr('name'));
});
radio_array = sort_unique(radio_array);
var length = radio_array.length;
for (var i = 0; i < length; i++) {
    if( $('input[name="'+radio_array[i]+'"]:checked').length == 0 ) $('input[name="'+radio_array[i]+'"]:eq(0)').attr('checked', 'checked');
}

// http://stackoverflow.com/questions/4833651/javascript-array-sort-and-unique
function sort_unique(arr) {
    arr = arr.sort(function (a, b) { return a*1 - b*1; });
    var ret = [arr[0]];
    for (var i = 1; i < arr.length; i++) { // start loop at 1 as element 0 can never be a duplicate
        if (arr[i-1] !== arr[i]) {
            ret.push(arr[i]);
        }
    }
    return ret;
}