[cosyxu]

Hi Amo,

I was wondering is it possible to change the radio button values dynamically?

I know that we can use js to change the dropdown like this:

Code: Select all

var iField = $("[id='form[A1_I]']"); 
iField.prop("length", 0);       
iField.empty().append('<option value="">Please select...</option>');
iField.append(new Option( "Yes", "Yes" )); 
iField.append(new Option( "No", "No" ));  
iField.append(new Option( "NA", "Not Sure" ));  

Is it possible to change the radio button values as well?

Thanks in advance,
Yuan

[aura9k1]

I am also interested in a solution to this problem, and would also like to know if it is possible to programmatically remove an element from the Radio Group? TIA!

[amosbatto]

The list of fixed options, which were set in the options property of the radio button, are stored at:
getFieldById("radio-id").model.attributes.localOptions

.localOptions is an array of objects which contain "value" and "label" properties:
[ { value: "value1", label: "label1" }, { value: "value2", label: "label2" }, ...]

After you change the the .localOptions, you can display the changed list of options in the radio button with this code:

Code: Select all

getFieldById("radio-id").model.mergeRemoteOptions([])

This will regenerate the list of options, but the empty array means that any options which were added by an SQL query will be deleted. If you also need those, then you can add them this way:

Code: Select all

queryOptions = getFieldById("radio-id").model.attributes.remoteOptions
getFieldById("radio-id").model.mergeRemoteOptions( queryOptions  )

If you want to add an option, you can do it this way:

Code: Select all

getFieldById("radio-id").model.attributes.remoteOptions.push( {value: "value1", label: "label1"} );
queryOptions = getFieldById("radio-id").model.attributes.remoteOptions
getFieldById("radio-id").model.mergeRemoteOptions( queryOptions )

[cosyxu]

The list of fixed options, which were set in the options property of the radio button, are stored at:
getFieldById("radio-id").model.attributes.localOptions

.localOptions is an array of objects which contain "value" and "label" properties:
[ { value: "value1", label: "label1" }, { value: "value2", label: "label2" }, ...]

After you change the the .localOptions, you can display the changed list of options in the radio button with this code:

Code: Select all

getFieldById("radio-id").model.mergeRemoteOptions([])

This will regenerate the list of options, but the empty array means that any options which were added by an SQL query will be deleted. If you also need those, then you can add them this way:

Code: Select all

queryOptions = getFieldById("radio-id").model.attributes.remoteOptions
getFieldById("radio-id").model.mergeRemoteOptions( queryOptions  )

If you want to add an option, you can do it this way:

Code: Select all

getFieldById("radio-id").model.attributes.remoteOptions.push( {value: "value1", label: "label1"} );
queryOptions = getFieldById("radio-id").model.attributes.remoteOptions
getFieldById("radio-id").model.mergeRemoteOptions( queryOptions )

Hi Amo,

Thanks for the solution.

Now I can add more options to my radio button by using the following code:

Code: Select all

getFieldById("radioVar001").model.mergeRemoteOptions(
	[	
		{
		    "value": "CA",
		    "label": "Canada"
		},
		{
		    "value": "US",
		    "label": "United States"
		}
	]
  );

But how can I delete the previous options?

Thanks,
Yuan

[amosbatto]

If you know the order of the options in the radio button, you can use Array.splice() to remove it. For example, you can delete the third option in the list like this:

Code: Select all

getFieldById("radio-id").model.attributes.localOptions.splice(2, 1);
getFieldById("radio-id").model.mergeRemoteOptions([]);

Note that arrays start counting from 0, so 2 is the third option in the array.

If you don't know the order of the options, then you will have to search through the array for the option and then call .splice(). For example, the following code deletes an option whose value is "US":

Code: Select all

var opts = getFieldById("radio-id").model.attributes.localOptions;
for (var i = 0; i < opts.length; i++) {
   if (opts[i].value == "US") {
       getFieldById("radio-id").model.attributes.localOptions.splice(i, 1);
   }
}
getFieldById("radio-id").model.mergeRemoteOptions([]);

[cosyxu]

If you know the order of the options in the radio button, you can use Array.splice() to remove it. For example, you can delete the third option in the list like this:

Code: Select all

getFieldById("radio-id").model.attributes.localOptions.splice(2, 1);
getFieldById("radio-id").model.mergeRemoteOptions([]);

Note that arrays start counting from 0, so 2 is the third option in the array.

If you don't know the order of the options, then you will have to search through the array for the option and then call .splice(). For example, the following code deletes an option whose value is "US":

Code: Select all

var opts = getFieldById("radio-id").model.attributes.localOptions;
for (var i = 0; i < opts.length; i++) {
   if (opts[i].value == "US") {
       getFieldById("radio-id").model.attributes.localOptions.splice(i, 1);
   }
}
getFieldById("radio-id").model.mergeRemoteOptions([]);

Hi Amo,

Thanks for the solution. It works.

Yuan

[amosbatto]

I wrote up documentation, to better explain this:
https://sourceforge.net/p/pmcommunity/c ... tionsList/

[cosyxu]

I wrote up documentation, to better explain this:
https://sourceforge.net/p/pmcommunity/c ... tionsList/

Thanks for the document.