Skip to content

Instantly share code, notes, and snippets.

@LinzardMac
Created August 29, 2021 19:57
Show Gist options
  • Save LinzardMac/4aca565b35aec5e78109a561f50d4380 to your computer and use it in GitHub Desktop.
Save LinzardMac/4aca565b35aec5e78109a561f50d4380 to your computer and use it in GitHub Desktop.
change the html output of the radio field option text in ninja forms (ugly)
jQuery( document ).ready( function( $ ) {
// Instantiate our custom field's controller, defined above.
new myCustomFieldController();
});
var myCustomFieldController = Marionette.Object.extend( {
initialize: function() {
// Listen for render:view event only for listradio field type
this.listenTo( nfRadio.channel( 'listradio' ), 'render:view', this.renderView );
},
renderView: function( view ) {
// to view your 'key'you can print in console
// console.log(view.model.get( 'key' ) );
// Check if this is the right field. 'field_key' is found in the view.model.get('key') function
if ( 'please_select_date_1630250781552' != view.model.get( 'key' ) ) return false;
// get the list of radio options as a jQuery object
var el = jQuery( view.el ).children()[1];
var label = jQuery(el).find("label");
console.log(label);
var html_0 = jQuery(label[0]),
html_1 = jQuery(label[1]);
// manually change the html output for each radio option and add new HTML to include times
html_0.html('<span class=\"radioSelectDate\">Wednesday, September 15</span><span class=\"radioSelectTime\">5:00PM ET/2:00PM PT');
html_1.html('<span class=\"radioSelectDate\">Friday, October 1</span><span class=\"radioSelectTime\">12:00PM ET/9:00AM PT');
// theres probably an easier way to do this but the documentation is lacking for this controller object
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment