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
