Skip to main content

Notifications

Customer experience | Sales, Customer Insights,...
Suggested answer

D365 Marketing Landing Page Form - Conditionally Setting a Field as Business Required

(0) ShareShare
ReportReport
Posted on by 230

My form has both option sets as well as two options, I will try to explain the functionality below with different cases and screenshots.

Case 1:

Why are you contacting us is a Two Option field (boolean) and the default value is the first value "I have a ".

So, when

Why are you contacting us = "I have a ", I would want the box colored in Red (Ownership Type and Locations of Interest) both Options sets to be hidden

The box in green color are the fields that are optional and appear visible on the form by default and they need to be like that.

pastedimage1595820283664v1.png

Case 2:

When the two option why are you contacting us = "I want to (second value) then I would want the box colored in Red (Ownership Type and Locations of Interest) both Options sets to be Visible and Mandatory (Red *)

pastedimage1595820684391v2.png

and in Case 2, if Locations of Interest is selected as Option 1 then I would want the fields in the blue box to be set as mandatory (Red *)

all fields in the blue box except country are single line of text and country is a lookup field.

pastedimage1595821123430v4.png

and in Case 2, if Locations of Interest is selected as either Option 2 or Option 3 then I would want the fields in the blue box to be hidden and it should not be mandatory fields

The above show/hide, set mandatory/optional should work dynamically whenever the user changes the value from the externally hosted landing page and not just once during form load.

Thanks,

Shyam

  • cloflyMao Profile Picture
    cloflyMao 25,202 on at
    RE: D365 Marketing Landing Page Form - Conditionally Setting a Field as Business Required

    Hi Shyam,

    Here is simple text field HTML:

    *

    Here is lookup field HTML:

    *

    We can find lookup field has an extra parent node.  <span title="">

    Thus an extra parentNode property is required to get its outer container and hide the lookup field.

    Regards,

    Clofly

  • dxshyam Profile Picture
    dxshyam 230 on at
    RE: D365 Marketing Landing Page Form - Conditionally Setting a Field as Business Required

    Hi Clofly,

    Thanks for sharing such a detailed response with the code, we will try this out and revert(We are having a code freeze for today and tomorrow)

    Also, you have mentioned "It seems that node structure of Lookup field is different compared with other fields, so the code for lookup field is bit different".

    I am sorry for not clarifying this earlier, there are two lookup fields used in this form (both country fields are lookup fields), would this change the code syntax wherever country was referenced?

            var country = document.getElementById("a4d6aabe-99d0-ea11-a813-000d3aa08b45");
    ---
                    country.parentNode.parentNode.style.display = 'block'; 
    ---
                    country.setAttribute("required", "");
                    country.setAttribute("aria-required", "true");
                    country.parentNode.parentNode.insertBefore(asterisk.cloneNode(true), country.parentNode);
                    country.parentNode.parentNode.childNodes[1].classList.add("custom-required");
    ---
                    country.parentNode.parentNode.style.display = 'none'; 
    ---
                    country.value = "";
    ---
                    country.removeAttribute("required");
                    country.removeAttribute("aria-required");
    

    Regards,

    Shyam

  • Suggested answer
    cloflyMao Profile Picture
    cloflyMao 25,202 on at
    RE: D365 Marketing Landing Page Form - Conditionally Setting a Field as Business Required

    Hi Shyam,

    I just found that all input fields have static id value, thus we could get them by getElementById function.

    It seems that node structure of Lookup field is different compared with other fields, so the code for lookup field is bit different.

        MsCrmMkt.MsCrmFormLoader.on('afterFormRender', function (event) {
    
            var whyareyou = document.getElementById('bb52c314-98d0-ea11-a813-000d3aa08b45');
            var selectedOption = whyareyou.options[whyareyou.selectedIndex].text;
    
            var ownershipType = document.getElementById('51a9e025-98d0-ea11-a813-000d3aa08b45');
            var locationofInterest = document.getElementById('b3544e31-98d0-ea11-a813-000d3aa08b45');
    
            var stree1 = document.getElementById("209d70b3-98d0-ea11-a813-000d3aa08b45");
            var stree2 = document.getElementById("b24275c3-98d0-ea11-a813-000d3aa08b45");
            var city = document.getElementById("fc0308ab-609e-45c8-9f5e-9eca3511dc39");
            var stateProvince = document.getElementById("0ea56bdf-98d0-ea11-a813-000d3aa08b45");
            var country = document.getElementById("a4d6aabe-99d0-ea11-a813-000d3aa08b45");
            var zipCode = document.getElementById("eae4766c-f91a-4648-afb1-259b97e89cab");
    
            var asterisk = document.createElement('span');
            asterisk.innerText = "*";
            asterisk.classList.add("lp-required");
            asterisk.style.color = 'rgb(255, 0, 0)';
    
            if (selectedOption === 'I have a') {
                ownershipType.parentNode.style.display = 'none';
                locationofInterest.parentNode.style.display = 'none';
            }
    
            whyareyou.onchange = function () {
                if (whyareyou.options[whyareyou.selectedIndex].text === 'I want to') {
    
                    ownershipType.parentNode.style.display = 'block';
                    locationofInterest.parentNode.style.display = 'block';
    
                    ownershipType.setAttribute("required", "");
                    ownershipType.setAttribute("aria-required", "true");
                    ownershipType.parentNode.insertBefore(asterisk, ownershipType);
                    locationofInterest.setAttribute("required", "");
                    locationofInterest.setAttribute("aria-required", "true");
                    locationofInterest.parentNode.insertBefore(asterisk.cloneNode(true), locationofInterest);
                    
                } 
                else if (whyareyou.options[whyareyou.selectedIndex].text === 'I have a') {
    
                    ownershipType.parentNode.style.display = 'none';
                    locationofInterest.parentNode.style.display = 'none';
    
                    ownershipType.removeAttribute("required");
                    ownershipType.removeAttribute("aria-required");
                    locationofInterest.removeAttribute("required");
                    locationofInterest.removeAttribute("aria-required");
    
                    ownershipType.previousSibling.remove();
                    locationofInterest.previousSibling.remove();
    
                }
            }
    
            locationofInterest.onchange = function () {
                if (locationofInterest.options[locationofInterest.selectedIndex].text === 'Option 1') {
                    stree1.parentNode.style.display = 'block'; 
                    stree2.parentNode.style.display = 'block'; 
                    city.parentNode.style.display = 'block'; 
                    stateProvince.parentNode.style.display = 'block'; 
                    country.parentNode.parentNode.style.display = 'block'; 
                    zipCode.parentNode.style.display = 'block';
    
                    stree1.setAttribute("required", "");
                    stree1.setAttribute("aria-required", "true");
                    stree1.parentNode.insertBefore(asterisk.cloneNode(true), stree1);
                    stree1.previousSibling.classList.add("custom-required");
    
                    stree2.setAttribute("required", "");
                    stree2.setAttribute("aria-required", "true");
                    stree2.parentNode.insertBefore(asterisk.cloneNode(true), stree2);
                    stree2.previousSibling.classList.add("custom-required");
                    
                    city.setAttribute("required", "");
                    city.setAttribute("aria-required", "true");
                    city.parentNode.insertBefore(asterisk.cloneNode(true), city);
                    city.previousSibling.classList.add("custom-required");
    
                    stateProvince.setAttribute("required", "");
                    stateProvince.setAttribute("aria-required", "true");
                    stateProvince.parentNode.insertBefore(asterisk.cloneNode(true), stateProvince);
                    stateProvince.previousSibling.classList.add("custom-required");
    
                    country.setAttribute("required", "");
                    country.setAttribute("aria-required", "true");
                    country.parentNode.parentNode.insertBefore(asterisk.cloneNode(true), country.parentNode);
                    country.parentNode.parentNode.childNodes[1].classList.add("custom-required");
    
                    zipCode.setAttribute("required", "");
                    zipCode.setAttribute("aria-required", "true");
                    zipCode.parentNode.insertBefore(asterisk.cloneNode(true), zipCode);
                    zipCode.previousSibling.classList.add("custom-required");
                    
                } 
                else if (locationofInterest.options[locationofInterest.selectedIndex].text === 'Option 2' || locationofInterest.options[locationofInterest.selectedIndex].text === 'Option 3') {
                    stree1.parentNode.style.display = 'none'; 
                    stree2.parentNode.style.display = 'none'; 
                    city.parentNode.style.display = 'none'; 
                    stateProvince.parentNode.style.display = 'none'; 
                    country.parentNode.parentNode.style.display = 'none'; 
                    zipCode.parentNode.style.display = 'none';
    
                    stree1.value = "";
                    stree2.value = "";
                    city.value = "";
                    stateProvince.value = "";
                    country.value = "";
                    zipCode.value = "";
    
                    stree1.removeAttribute("required");
                    stree1.removeAttribute("aria-required");
                    stree2.removeAttribute("required");
                    stree2.removeAttribute("aria-required");
                    city.removeAttribute("required");
                    city.removeAttribute("aria-required");
                    stateProvince.removeAttribute("required");
                    stateProvince.removeAttribute("aria-required");
                    country.removeAttribute("required");
                    country.removeAttribute("aria-required");
                    zipCode.removeAttribute("required");
                    zipCode.removeAttribute("aria-required");
    
                    document.querySelectorAll('.custom-required').forEach(function (a) {
                        a.remove();
                    })
    
                }
            }
    
        })

    Please replace id value of mine with yours, you can find them with inspector.

    810704.JPG

    In addition, I didn't find how to handle such case from your description:

    when "I have a" is selected, whether to hide stree1/street2/city/state/country/zipcode. 

    You could check whether following cases work in your environment:

    -> By default, "I have a" have been selected, ownership type and location of interest are hidden. 

    -> Toggle "Why are you contacting us?" field, check whether ownership type field and location of interest field display and hide normally.

    -> Option 1 is selected, whether other 6 fields hide.

    -> Option 2 or option 3 is selected, whether other 6 fields display 

    If you encounter any error, please open console to check and share a screenshot of error in console.

    Regards,

    Clofly

  • dxshyam Profile Picture
    dxshyam 230 on at
    RE: D365 Marketing Landing Page Form - Conditionally Setting a Field as Business Required

    Hi Clofly,

    Sure, I will wait for your demo.

    Thanks,

    Shyam

  • cloflyMao Profile Picture
    cloflyMao 25,202 on at
    RE: D365 Marketing Landing Page Form - Conditionally Setting a Field as Business Required

    Hi Shyam,

    I have split your reply to a new thread.

    Please wait for a while, I am going to share a demo.

    Regards,

    Clofly

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…

Vahid Ghafarpour – Community Spotlight

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

Congratulations to the January Top 10 leaders!

Check out the January community rock stars...

Leaderboard

#1
André Arnaud de Calavon Profile Picture

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

#2
Martin Dráb Profile Picture

Martin Dráb 230,853 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans