3

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?

2

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.

| improve this answer | |
  • That's disappointing. Can this be a feature request please. This is for form validation as well. Using composer and setting a radio group to required puts the required class on the <ul>, which seems wrong. While I was waiting for a response I've written a JS solution, not exactly progressive enhancement for something that should be standard mark-up. – Elliot Lewis Oct 15 '13 at 21:12
  • I noted this internally, but I recommend also submitting this as a Feature Request under the specific add-on category on support.solspace.com/support/discussions. It'll also give other users the option to vote up the feature request, and help us prioritize features to add in upcoming versions of this add-on. support.solspace.com/support/discussions – Solspace Oct 16 '13 at 18:00
  • OK, thanks. Feature request submitted through your support site. – Elliot Lewis Oct 17 '13 at 18:59
0

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;
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.