You’re offline. This is a read only version of the page.
Hi Everyone,
I am trying to hide some fields on a portal form based on an option selected on a multiple choice column.
I'm having trouble getting the selected value of the multiple choice column.
Here's my code:
Share
Report $(document).ready(function () {
var referredBy = $("#new_referredby").change(function () { FieldChanged(); });
});
FieldChanged = function () {
console.log("Hit Change" + referredBy);}
This code works when I have a field that is a text field but doesn't when it's a multi- select.
If anyone has any suggestions on how to get the value of the multiselect please let me know.
Thanks !
@powermareben It is working now as expected. Thank you
@arjunmusuvathy as long as you called the observer passing the element you wanted to observe
i.e.
All responses (
Answers (observer.observe(referedByMultiSelect, ..., it shouldn't be called multiple times. Did you test this by adding a console.log or alert? If you share your code I can troubleshoot further.
@powermareben When I tested this in detail yesterday, I did find that the code is called multiple times even when other fields are changed (not just when multiselectoptionset is changed). Do you why and how do we stop this please?
@arjunmusuvathyThe observer function observes changes for the specified multi-select field, in this case referredByMultiSelect. You asked, "Does the function trigger on each field's onchange?"...it doesn't trigger for each field's onchange; it only triggers for the control you wanted to observe (i.e.,in this case -> var referredByMultiSelect = document.getElementById('new_referredby');).
If you have other multiselect fields, you'll need to add observer functions for each field.
In my case, I have a multistep Power Pages Form, so I added the JS in the Custom JavaScript section located at the bottom of the 'Form Options' tab. If you have a basic form, you would add the JS in the Custom JavaScript section found at the bottom of the 'Additional Settings' tab.
I updated the variable name to 'referedByMultiSelect'. Thank you for pointing that out. I attempted to replace all the variable names to match the ones used in this thread, and it seems I missed one.
@powermareben This is brilliant, it works for me. Many thanks for sorting the complex thing out.
I just was going around blogs to find this in short time. Just a question, I have put this function on load of the page and it does trigger on each field's on change is it? As I had an alert in the 1st line and it was showing up when I checked other fields as well (like say another standard optionset).
Only thing I found in your code that needs editing is this bit
Current line of code:
observer.observe(disclosureMultiSelect, {
Update needed:
observer.observe(referedByMultiSelect, {
Thanks
Arjun
Here is a working code using Mutation observer:
var referedByMultiSelect = document.getElementById('new_referredby');
var observer = new MutationObserver(function(mutations) {
var referredbyarray = $("#new_referredby").val();
var fieldtohide = false;
if (referredbyarray != "") {
var referedByJSON = JSON.parse(referredbyarray);
for (i = 0; i < referedByJSON.length; i++) {
if (referedByJSON[i].Value == "123080002")
fieldtohide = true;
}
}
if (fieldtohide == true) {
$("#id_of_control_to_hide").val("");
$("#id_of_control_to_hide,id_of_control_label_to_hide").hide();
$("#id_of_control_to_hide").closest("td").find("div.control, div.info").hide();
$("#id_of_control_to_hide").closest("tr").toggle(false);
} else {
$("#id_of_control_to_hide,id_of_control_label_to_hide").show();
$("#id_of_control_to_hide").closest("td").find("div.control, div.info").show();
$("#id_of_control_to_hide").closest("tr").toggle(true);
}
});
observer.observe(referedByMultiSelect, {
attributes: true,
attributeFilter: ['value']
});Not sure if there is another way or not, but can be done with Mutation observer
var foo = document.getElementById('fieldname');
var observer = new MutationObserver(function(mutations) {
console.log('changed');
});
observer.observe(foo, {
attributes: true,
attributeFilter: ['value'] });
Hi Daryl_McC, did you have this solution, can you share the solution capturing the on change event of a multiselect field and getting the selected values?
Thank you,
Hi Fubar, your answer is good, however could show how to call the on change event of the multiselect filed first?
The basic on change event function does not work for me, meaning never get called, this is what I have:
There is probably an easier way to to do this e.g. using JQuery's .each()
below I am just showing how to get it into a JavaScript array that you can then loop to get the values.
The selected values are held in JSON in the value attribute of the field input tag
// To get into a JavaScript array
var myTestArray = JSON.parse($("#fieldname").attr("value"));
// If there are currently selected itsms they will be in myTestArray[0].Value, myTestArray[1].Value etc etc
#1
WarrenBelz
146,776
Most Valuable Professional
#2
RandyHayes
76,287
Super User 2024 Season 1
#3
Pstork1
66,093
Most Valuable Professional
