Adding "change" event listener to Lookup field

(0) Share

Report

Posted on by la_belle

I need to use a lookup field in a Marketing form and use it as condition for visibility and required status for other fields. I've tried adding event listener /change/ and also /input/, but none of this works. This is a copy of my code:

Please help.

I have the same question (0)

All responses (2)

Answers (0)

la_belle on at

Like (0)

Report
Adding "change" event listener to Lookup field

Hi Rudy,

Thank you for responding to my question. I have tried your method but it's still not working. Let me add some more details:

Using the "change" event listener for the lookup field, if you remove the " conditional if" part, it does not even generate the console log.

If I just grab the "conditional if" part, the system is able to read the lookup value and run the conditional statements once just after the form is loaded.

The two points above are just to highlight that the issue is with the "change" event listener which for some reasons does not recognize the lookup field. Note that I had tried this before using just a simple text field and an option field, both were working correctly with my original code above.

We are going to host the form in an external website (not Power Portal), from what I read from different resources, it seems that my option is limited to the native JS, please correct me if I'm wrong.

See my code below.

Thanks once again,

Liz

Was this reply helpful? Yes No
RudyZhang Microsoft Employee on at

Like (0)

Report
Adding "change" event listener to Lookup field

Hi，

Your request to use the look up field to control other fields display/required in the Marketing Form is supported.

In fact, after the Marketing Form is published, it will be embedded in the web page in the form of a div. During the process of editing the Marketing Form, the operation in the Designer tab is the same as the corresponding code you enter in the HTML tab, as shown in the following figure.

Therefore, our team has made the following changes to your code.
document.getElementById("LookupField").addEventListener("change", function(){ var lookupValue = document.getElementById("LookupField").value; if (lookupValue === "") { // Show and make Field1 and Field2 required. document.getElementById("Field1").style.display = "block"; document.getElementById("Field1").required = true; document.getElementById("Field2").style.display = "block"; document.getElementById("Field2").required = true; } else { // Hide and make Field1 and Field2 optional. document.getElementById("Field1").style.display = "none"; document.getElementById("Field1").required = false; document.getElementById("Field2").style.display = "none"; document.getElementById("Field2").required = false; } });

Note that the "LookupField", "Field1" and "Field2" in this code and on the form are for testing purposes only. Please adjust the field IDs and conditions according to the specific requirements of the form.

I hope my answer is helpful to you! If you have any other questions, please feel free to contact me.

Best Regards,
Rudy Zhang

Was this reply helpful? Yes No

Community site session details

Adding "change" event listener to Lookup field

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Abhilash Warrier – Community Spotlight

Congratulations to the September Top 10 Community Leaders!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

Featured topics

Product updates

Community site session details

Adding "change" event listener to Lookup field

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Abhilash Warrier – Community Spotlight

Congratulations to the September Top 10 Community Leaders!

Subscribe to this forum!

Select categories

Leaderboard > Customer experience | Sales, Customer Insights, CRM

Featured topics

Product updates