Radio Buttons field second click behavior

Hello @muzicutza81,

This behavior of radio button was included recently by the multiple requests of the users. If you don’t want this behavior:

– Insert a “HTML Content” field in the form and enter as its content the following piece of code:

<script>
fbuilderjQuery(document).on('click', '[type="radio"]', function () {
	if(!fbuilderjQuery(this).data('previous-status'))
	{
		fbuilderjQuery(this).prop('checked', true);
		fbuilderjQuery(this).data('previous-status', true);
		fbuilderjQuery(this).change();
	}	
});
</script>

and that’s all.
Best regards.

I tried this but while I can see that clicking on a radio button selects it based on the fields that I have showing depending on which radio button is clicked, the radio buttons themselves never show as selected when using this code. I still want the radio buttons to show as selected when they are selected.

It appears that it executes the click event on the radio button element twice.

Hello @muzicutza81,

I’ve published just now an update of the plugin that fixes an issue with the dependencies in the radio buttons.

Please, install the latest update and let me know if it solves the issue.

Best regards.

Hi @codepeople,

I installed the latest update on our testing website however the radio button field does not work at all now with the code provided. Before the update and using the code provided, it appeared that it was selecting a radio button (based on the other fields I have showing when certain radio buttons are selected) although the radio button itself did not show selected. Now, with the code provided, if I click on any of the radio buttons nothing happens (none of my other fields dependent on the radio button field are showing). I had to remove the code for the time being.

Hello @muzicutza81,

I’ve visited your website and it is not using the latest version of the plugin. Could you create a ticket in my private website to check the form in detail, please?

https://cff.dwbooster.com/contact-us

Best regards.

As a precaution, we only update our testing website (not accessible to anyone else except internally) and only if there are no issues we update our production website. I’ve made an exception in this case and just went ahead and updated our production website (probably after you checked it). Right after the update to 1.0.214 we got a notification about 1.0.215 being released so I will give that a try on the testing website first and will get back here to let you know if that made a difference. If not, I will go ahead and create a ticket on your private website. Thanks!

Hello @muzicutza81,

If you prefer, I can check your testing website.

Best regards.

I updated both testing and production websites to the 1.0.215 version. Cloned our production calculator, added the code provided, and posted it on a new page here: https://www.mea.coop/member-services/estimate-calculator-test/.

I wish I could have you test on the testing website but it is not accessible externally.

Please let me know if you would rather I contact you via your private website regarding this.

Thanks much for all you do!

On an unrelated note, does css placed in the stylepublic.css get overwritten with updates? My changes in the past few days got lost with today’s updates.

Hello @muzicutza81,

WordPress always replaces the code of plugins and themes when they are updated, for this reason I always recommend to redefine the styles through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png), or you can create a child theme, and include the new styles definitions into the CSS file of the child theme (https://codex.www.ads-software.com/Child_Themes)

Concerning to the code I sent you in a previous entry to avoid the users can untick the ticked radio buttons, I’ve found the error, please, replace the previous code with the new one, inluded below:

<script>
fbuilderjQuery(document).on('click', '[type="radio"]', function () {
	var me = fbuilderjQuery(this);
	setTimeout(
		function(){
			if (!me.data('previous-status')) {
				me.prop('checked', true);
				me.data('previous-status', true);
				me.change();
			}
		},
		20
	);
});
</script>

Best regards.

Hi @codepeople,

Thanks! I’ll move the css code to the “Customize Form Design” attribute in the “Form Settings” tab.

The new code for the radio buttons works great!!!!

You’re awesome! Thank you so much!