PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Radio buttons separated by text

  1. I am trying to rebuild this "complex" form. The main page has a list of 13 radio buttons grouped by type. Is there a way I can reproduce this? (The first page only allows you to select 1 option out of the 13.

    http://promariner.com/online_reg.php

    Thanks,
    Spencer

    Posted 10 years ago on Friday May 31, 2013 | Permalink
  2. Sure, you can do this with a little jQuery customization. Each radio button is in it's own list item with a specific class. By targeting that class and using jQuery's "insertBefore" goodness, you can insert a new list item/node into the list and add a "sub label" if you will to break up the list into more manageable sections.

    test screenshot: http://i.imgur.com/5E8Yk3x.jpg

    I basically recreated the list from the reference site on a test form, then used a HTML field at the end of the form to add my script and CSS. (that's a nifty trick too if you haven't used it before) Of course, this script is specific to my form (ID's and classes) but you can take it and modify it to use for your form. Just update the classes and IDs appropriately.

    <script>
    jQuery("<li><h4 class='sublabel'>Battery Chargers</h4></li>").insertBefore(".gchoice_2_0");
    jQuery("<li><h4 class='sublabel'>Battery Isolators</h4></li>").insertBefore(".gchoice_2_2");
    jQuery("<li><h4 class='sublabel'>Inverters</h4></li>").insertBefore(".gchoice_2_4");
    jQuery("<li><h4 class='sublabel'>Isolation Protection</h4></li>").insertBefore(".gchoice_2_9");
    jQuery("<li><h4 class='sublabel'>Optics</h4></li>").insertBefore(".gchoice_2_11");
    jQuery("<li><h4 class='sublabel'>Marine Accessories</h4></li>").insertBefore(".gchoice_2_12");
    </script>
    
    <style type="text/css">
    h4.sublabel {color: #790000; border-bottom: 1px solid #ccc; width: 100%; padding-bottom:6px;}
    li#field_20_2 {margin-top: 24px;}
    </style>

    and to make it easier to see what I'm talking about, I exported the sample form and put it here for you to download, import and tinker with if you would like.

    https://www.box.com/shared/static/wd3c0c9s40heterm7yu8.xml

    Hope that helps out. Best of luck with it.

    Posted 10 years ago on Saturday June 1, 2013 | Permalink