Auto Action to disable HTML form options

galanopd
OFFLINE
Posts: 375
Thanks: 49
Karma: 8

2 years 11 months ago - 2 years 11 months ago #328063 by galanopd

Auto Action to disable HTML form options was created by galanopd

I have a radio with three options (3 radios).
I have a custom HTML form.
I use JQuery in Auto Action (using onBeforeDisplayUsersList and onBeforeUserProfileDisplay) to get the value (user selected) of the radio and disable some select options of the form in the custom HTML.
Although it works fine in jsfiddle , I can't make it work in CB.

Last edit: 2 years 11 months ago by galanopd.

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48671
Thanks: 8312
Karma: 1446

2 years 11 months ago #328075 by krileon

Replied by krileon on topic Auto Action to disable HTML form options

Code:

$(function (emailuseroptions) {

The surrounding initialize isn't needed. That's a jQuery ready statement, which is already handled by CBs jQuery API. So you only need to supply the inner jQuery for CB. That should then work.

Additional suggestion is to add some extra CSS so those disabled options aren't actually visible to the user which causes a UX problem.

Code:

#em option:disabled {
  display: none;
}

Next get rid of the optgroups as they won't be needed anymore since they'll only see what they can use based off radio selection. I'd probably go with the following though based off your jsFiddle.

HTML

Code:

<div class="form-check form-check-inline selectEmailOptionsType">
	<input class="form-check-input selectEmailOptionsTypeInput" type="radio" name="emailoptions_type" id="emailoptions_type_[user_id]_days" value="days">
	<label class="form-check-label" for="emailoptions_type_[user_id]_days">Days</label>
	<input class="form-check-input selectEmailOptionsTypeInput" type="radio" name="emailoptions_type" id="emailoptions_type_[user_id]_hours" value="hours">
	<label class="form-check-label" for="emailoptions_type_[user_id]_hours">Hours</label>
	<input class="form-check-input selectEmailOptionsTypeInput" type="radio" name="emailoptions_type" id="emailoptions_type_[user_id]_none" value="" checked>
	<label class="form-check-label" for="emailoptions_type_[user_id]_none">None</label>
</div>
<div class="selectEmailOptions">
	<select name="emailoptions" class="form-control selectEmailOptionsSelect">
		<option value="" selected="selected">- Please Select -</option>
		<option value="10d" class="selectEmailOptionDays">10 Days</option>
		<option value="6d" class="selectEmailOptionDays">6 Days</option>
		<option value="3d" class="selectEmailOptionDays">3 Days</option>
		<option value="24h" class="selectEmailOptionHours">24 Hours</option>
		<option value="12h" class="selectEmailOptionHours">12 Hours</option>
		<option value="6h" class="selectEmailOptionHours">6 Hours</option>
		<option value="2h" class="selectEmailOptionHours">2 Hours</option>
	</select>
</div>

jQuery

Code:

$( '.selectEmailOptionsTypeInput' ).on( 'change', function() {
	const select = $( this ).closest( '.selectEmailOptionsType' ).siblings( '.selectEmailOptions' );
	
	if ( $( this ).val() === 'days' ) {
		select.removeClass( 'hidden' );
		select.find( 'option.selectEmailOptionDays' ).removeClass( 'hidden' ).prop( 'disabled', false );
		select.find( 'option.selectEmailOptionHours' ).addClass( 'hidden' ).prop( 'disabled', true );
	} else if ( $( this ).val() === 'hours' ) {
		select.removeClass( 'hidden' );
		select.find( 'option.selectEmailOptionHours' ).removeClass( 'hidden' ).prop( 'disabled', false );
		select.find( 'option.selectEmailOptionDays' ).addClass( 'hidden' ).prop( 'disabled', true );
	} else if ( $( this ).val() === '' ) {
		select.addClass( 'hidden' );
	}
}).trigger( 'change' );

Have to be careful with ids on elements rendered in a userlist row. They need to be unique as it's not valid to reuse an id. The above HTML makes them unique by attaching the users user id to them so the radio labels have valid labels. No CSS is necessary here as it uses classes already included by CBs Bootstrap. Below is a jsFiddle with this usage.

jsfiddle.net/wm926jgd/

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

galanopd
OFFLINE
Posts: 375
Thanks: 49
Karma: 8

2 years 11 months ago - 2 years 11 months ago #328097 by galanopd

Replied by galanopd on topic Auto Action to disable HTML form options

The way you propose in jsfiddle is of course way better than mine, thanks.
Still facing 2 issues though

1. The radio when the user edits profile and saves it, doesn't keep the value user selected. I tried taking out completely the checked="checked" but it didn't work.
2. Although the checked="checked" is set for option value="" which means that class .hidden would make the element disappear in the userlist, it doesn't. Actually nothing happens. It is like the JQuery doesn't trigger any event at all and there are no errors in the console. Maybe another setting in AutoAction?

Last edit: 2 years 11 months ago by galanopd.

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48671
Thanks: 8312
Karma: 1446

2 years 11 months ago #328101 by krileon

Replied by krileon on topic Auto Action to disable HTML form options

1. The radio when the user edits profile and saves it, doesn't keep the value user selected. I tried taking out completely the checked="checked" but it didn't work.

It's not an actual field so it has no storage. You'll need to create an actual radio field in CB > Field Management if you need storage.

2. Although the checked="checked" is set for option value="" which means that class .hidden would make the element disappear in the userlist, it doesn't. Actually nothing happens. It is like the JQuery doesn't trigger any event at all and there are no errors in the console. Maybe another setting in AutoAction?

Did you output it with Mode set to jQuery or Mode set to JavaScript? It should be set to jQuery. Aside from that you'll need to figure that out yourself as I've already provided the working example. Could be as simple as a copy paste error or if you made changes to the HTML structure and didn't adjust the jQuery.

Please Log in or Create an account to join the conversation.

galanopd
OFFLINE
Posts: 375
Thanks: 49
Karma: 8

2 years 11 months ago - 2 years 11 months ago #328115 by galanopd

Replied by galanopd on topic Auto Action to disable HTML form options

Did you output it with Mode set to jQuery or Mode set to JavaScript? It should be set to jQuery.

I had set it to JQuery.

Aside from that you'll need to figure that out yourself as I've already provided the working example. Could be as simple as a copy paste error or if you made changes to the HTML structure and didn't adjust the jQuery.

That's correct, since there is a working example...I will investigate further, I suppose I do something wrong.

It's not an actual field so it has no storage. You'll need to create an actual radio field in CB > Field Management if you need storage.

Yes, you are right but I have created a Radio field and tried to change its value in profile edit. After saving it with the new value, the new value disappears. And this doesn't happen with other radio fields like "Enable Profile Wall", "Auto Publish", "Notify me" etc. So I suppose it must be a setting or something? Also I can't find anywhere to set the default value except from "Default Reistration Value" but I suppose this is only for the registation. So what if I need to set a default value to the the radio input options for profile edit?

Edit1: This Field default value partially answers my question and so I made the field "required" but the value user sets to the radio when in user profile edit, is not saved even so.

Last edit: 2 years 11 months ago by galanopd.

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48671
Thanks: 8312
Karma: 1446

2 years 11 months ago #328124 by krileon

Replied by krileon on topic Auto Action to disable HTML form options

Yes, you are right but I have created a Radio field and tried to change its value in profile edit. After saving it with the new value, the new value disappears. And this doesn't happen with other radio fields like "Enable Profile Wall", "Auto Publish", "Notify me" etc. So I suppose it must be a setting or something? Also I can't find anywhere to set the default value except from "Default Reistration Value" but I suppose this is only for the registation. So what if I need a default value for profile edit?

The HTML I provided isn't meant to save. You said this was a selector for on the userlist. It doesn't handle saving or displaying of saved selections at all. What you're trying to do seams entirely too confusing and I'm a developer. I can't imagine a regular user understanding all of this. What exactly is this supposed to be doing and why does it need to render in a userlist? Are you trying to create a workaround for CB Conditional not allowing the conditioning of select options?

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon