Marketingpage OnChange event lookup Marketingform

(0) Share

Report

Posted on by Stevie_nld

Hi all,

I'm trying to create a script for the scenario in which when a lookup field on a marketingform (hosted on D365 MPage) is set an OnChange kind of script should trigger with a validation.
After trying myself I keep getting stuck on the fact that the script won't trigger on a select (however it will upon manual input).

As I am pretty new to the coding side can anybody give me some direction?

const Course = document.getElementById('79f74c1e-1c0f-ed11-82e4-000d3a2dc796');
Course.addEventListener('oninput', (event) => {});

oninput = (event) => {

if (event.target.value.includes ('XYZ')) {
//enable checkbox
document.getElementById('705944c9-f8c7-ec11-a7b5-000d3a233ba7').disabled = false;
}
else {
//disable checkbox
document.getElementById('705944c9-f8c7-ec11-a7b5-000d3a233ba7').disabled = true;
}
};
});
</script>

I have the same question (0)

All responses (4)

Answers (1)

Community Member on at

Like (0)

Report
Copy link

Link copied!

Hi Stevie_nld,

'oninput' event occurs when an element gets user input. Please try to change your event to 'onchange' to have a try.

It should trigger after you change the lookup value.

Was this reply helpful? Yes No
Stevie_nld 34 on at

Like (0)

Report
Copy link

Link copied!

Hi Steve Zhao,

Thanks for your reply!

When using the OnChange, it does not seem to register all changes to the field.

When I select a value, the script is not triggered (tested by adding an alert).

Only after I add a <space> or whatever in the field after selecting it will trigger.

Any idea how to fix this?

Kinds Regards,

Stevie

Was this reply helpful? Yes No
Stevie_nld 34 on at

Like (0)

Report
Copy link

Link copied!

I found a working solution....not sure if it's a nice one but hey....

I used blur and not change, and that did the trick.

So

Course.addEventListener('blur', (event) => {});

Was this reply helpful? Yes No
Verified answer

Community Member on at

Like (0)

Report
Copy link

Link copied!

Hi Stevie_nld,

Sorry for late replying. I tested this on my side. The onchange event would not be triggered too. The reason for this is that when you select another option in the Lookup dropdown list, the input's value would not be changed, it changes the 'data-value' property of the input:

So you would monitor the change of this property, here is my test code, you could have a try:

<script>

MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function (event) {

const Course = document.getElementById('58654b56-e216-ed11-b83e-000d3a5bc6b1');

console.log(Course);

var observer = new MutationObserver(function(mutations) {

console.log('data-value changed');

//your code

});

observer.observe(Course, {

attributes: true,

attributeFilter: ['data-value'] });

});

</script>

Result:

BTW, 'blur' can be a workaround. However, it's not perfect. Because it would be trigger when you select the same value twice.

Was this reply helpful? Yes No