Fieldtype for radio buttons with extra option to provide input from user

Question

I need a Fieldtype that shows radion buttons for a user.

However I want an extra option for the user to provide text to a textfield if one of the options for the radio buttons is "other, ..."

Is this possible or is there a addon that can do this?

Answer 1

Sounds like you are looking for an field type add-on I use all the time called Entry Type. It provides P&T Pill buttons if you have that field type installed or Radio Buttons (I prefer P&T Pill), and hides or shows fields depending on which button is active.

Personally, I don't remember how on earth I got along without Entry Type before. Hope it works for you.

Here's a screenshot of the admin interface so you can get a feel for how it works:

http://devot-ee.com/add-ons/entry-type

Answer 2

I don't know of a fieldtype that would do that natively, but it would be pretty straightforward to do this with two fields and a sprinkling of jQuery for some UI sugar.

Just create a second (text) field to hold your "other" content, then in your template do:

{if radio_field != "other"}
  {radio_field}
{if:else}
  {text_field}
{/if}

To make things a bit friendlier in the CP, you can take advantage of the fact that field instructions can contain HTML, including JavaScript. Basically we'll attach an event handler to the radio button's change event, inspect the current value of the radio button at that point, and toggle the visibility of our text field depending on whether that value is "other" or not. Something like this should do it (not very tested):

<script>
$(function() {
  var radioField = "your_radio_field_id",
      textField = "your_text_field_id",
      textFieldWrapper = "hold_field_" + textField.slice((textField.lastIndexOf("_")+1));

  $(document).on('change', '[name='+radioField+']', function(e){
    var $textFieldWrapper = $('#'+textFieldWrapper);
    if ($(this).val() = "other"){
      $textFieldWrapper.show();
    }
    else {
      $textFieldWrapper.hide();
    }
  });
});
</script>

NB for this to work you'll need to look up your fields' field_id values in the database, as that's what's used in the publish/edit page markup. If this is too fragile for you or you want to do this with a large number of fields then you'd probably need a custom fieldtype.