Modify Radio Button HTML

By: Brian Penner | Asked: 07/19/2022
ForumsCategory: Code HelpModify Radio Button HTML
Brian Penner asked 2 years ago
I'd like to set up a dynamic field that is set as a radio field into columns. Basically each column would be one class with the workshops for that class underneath. The user would only be able to select one of the workshops out of the whole list. Is there some kind of filter I can modify the radio html with? Customize HTML doesn't really give many options for modifying it. 
Brian Penner replied 2 years ago

I guess what I want to do is modify the attributes of div.frm_radio dynamically. https://share.cleanshot.com/BsTPlX

1 Answers
Victor Font answered 2 years ago

Brian, this can be done with CSS grid applied to the radio button's div.frm_opt_container and then adding grid-column: # to each input's parent div. Adding the appropriate CSS has to be build on the fly with JavaScript.

The reason it has to be done this way is because dynamic fields are variable in the number of radio buttons that display based on the data in the underlying lookup table.

Here's a jQuery snippet that applies CSS grid to a dynamic radio button. Change the ids to your radio button ids and add the jQuery to the After Fields area on the form's Customize HTML page.


jQuery(document).ready(function($) {
"use strict";
$('div#frm_field_1142_container > div.frm_opt_container').css('display', 'grid');
var ctr = 1;
$('div[id^="frm_radio_1142-"]').each( function(){
$(this).css( 'grid-column', ctr );
ctr++;
});
});

Attachments
Victor Font replied 2 years ago

I added the snippet to the Formidable Masterminds site. The jQuery is better formed and commented than the example above: https://formidable-masterminds.com/columnize-dynamic-radio-button-fields/

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right