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.
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 *)
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.
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
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
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
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.
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
Hi Clofly,
Sure, I will wait for your demo.
Thanks,
Shyam
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
André Arnaud de Cal...
291,996
Super User 2025 Season 1
Martin Dráb
230,853
Most Valuable Professional
nmaenpaa
101,156