Skip to main content

Notifications

Customer experience | Sales, Customer Insights,...
Unanswered

Adding "change" event listener to Lookup field

(0) ShareShare
ReportReport
Posted on by
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.
  • la_belle Profile Picture
    la_belle on at
    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
  • RudyZhang Profile Picture
    RudyZhang Microsoft Employee on at
    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,979 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 230,848 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans