Get current value of AjaxSelectFieldWidget

Plone Support Customizing Plone
1

I am using Plone 6 with ClassicUI.

I have a custom add form where I want to get the current value of an AjaxSelectFieldWidget. How do I get the current values of the field using Javascript/ JQuery?

Also, how do I reset the field so that the current values are removed. I have tried using:

$(".select2-search-choice").remove();

The current values are removed from the form. However, after saving the form, the previously selected values are saved.

Thanks in advance.

2

Hi,

just tested this quickly on classic.demo.plone.org with "tags" field in the browser console like this:

const tags_select = document.querySelector("[name='form.widgets.IDublinCore.subjects']");
// get current value
let current_value = tags_select.value;
// set new value:
tags_select.value = "one;two;three";
// re-initalize instantinated select2 pattern
tags_select["pattern-select2"].init();

NOTE: due to the fact, that the currently used select2 version (<4) cannot handle <select multiple> tags, the select2 pattern transforms this field to an <input type="text" /> with ";" separated values.

NOTE2: every patternslib pattern (which is the base for mockup patterns) saves the instantinated pattern code to the DOM with ["pattern-<name>"] or if you use jQuery then $(node).data("pattern-<name>")

3

Thank you for your answer. I was able to write working code this morning. I used the following snippet:

	// reset and hide other fields
	filtered_fields.forEach(function(field) {
	    var field_id = "#formfield-form-widgets-" + field;
	    var field_name = "form.widgets." + field;
	    // if product field
	    if (product_fields.includes(item_category)) {
	        $(field_id + " .select2-search-choice").remove();
		$('[name="' + field_name + '"]').val('');
		$(field_id).hide();
            } else {
		$('[name="' + field_name +'"]').val('');
		$(field_id).hide();
            }

Good tip on using init() to reset the field.