OnChange() event problem

Hello Guys,
Any idea how to fix this?

The OnChange() event of Input fields won’t fire when the content is updated programately.

If you do this from a function: $w(“#InputField”).value = “New Value”; the Input field gets the value, but its OnChange() event doesn’t fire at all. The only way the OnChange() event is triggered is when you insert the value from the keyboard.

Any help will be appreciated,
Thank you.

1 Like

Hey Luigino,

I will make a rash assumption and assume that the OnChange() event of Input fields not firing when the content is updated programmatically is not a bug. At this point I won’t call it a feature - it might be a design decision and therefore the desired behavior.

In any case, you want a solution. I suggest the following:

// the onChange event that isn’t getting triggered 
export function input1_change(event) {
	//Add your code for this event here:
	console.log("-> input1 change");
	console.log("input1 value: " + $w("#input1").value);
}

// a button onClick() routine that programmatically changes
// the input field
export function button1_click(event) {
	//Add your code for this event here:
	$w("#input1").value = “have a beer“;
	input1_change();
}

OK, so I know that’s sort of cheating, but at least this will get you going until it’s clear what the reasoning is behind this behavior. I hope this helps.

See you around the forum,

Yisrael

Hi Yisrael,
That is definitely cheating :wink:

In any programing language I have coded with (and I guess you too), the OnChange() events are triggered whenever a “change” takes place in the linked object (regardless the source of it). A change is a change, so I will call it a Bug. If this is a design decision, I would love to hear the reasons why they did it.

Anyhow,
Thanks for replying to my post and for the workaround.

I will report this in the BUG section to find out if this is actually intentional.
Have a good one,
-Luigi

Hi Luigino, for what it’s worth I agree with you that it’s a bug. I just discovered this myself and it appears to be a limitation of Wix Code for the moment.

As Yisrael assumed, it was in fact a design decision way back when; however, when I checked with the relevant people, they agreed to revisit the decision. So hopefully we’ll have a solution in the future. Thanks!

any news about this? still not working in May.

What I do is use the onKeypress() event handler, like this:

export function input1_keyPress(event, $w1) {
    setTimeout(() => {
        let val = event.target.value;
        if(val.length === 0)
            return;
        // do your good stuff here
    }, 10);
}

The timeout is needed for the input value to be changed by the new keypress.

Thank you for your reply, but this needs a user to klick at the input field and than to press a button in order to start the function. Really needed solution would be to implement OnInput command as it triggers the event when the value is changed event automatically without any other interaction from user. Perfect for hide and show based on value in the input field connected to database.
Do you know any news if there is such functionality like OnInput in wix code?
Thank you.

Hi Martin et al, this was a design decision and in fact Yisrael’s original solution is considered the “supported” way to handle this. However, I agree that this is worth revisiting. I will check on this with our product manager and re-post an update here. Thanks for the reminder!

Hi again, this matter was discussed again today and it sounds like we will have a solution soon! I can’t say exactly what or when but we should be posting an update about this to the Product Updates https://www.wix.com/code/home/forum/product-updates section when we’re ready. Thanks for your patience.

Thanks sounds great! :slight_smile: also very appreciated that you taking customers opinion into consideration.

I think the simple answer to this is to create an onChange handler function that uses the event target determine the id of the input Element being changed. Then create a setter function for the value assignment that calls it in addition to the onChange event handler.

Something like this:

$w(’#elementName’).OnChange(elementChanged);

function elementChanged(event) {
if (event && event.target && event.target.id) {
let changedElement = $w(‘#’+event.target.id);
// process changedElement…
}
}

// Element selector is of the form $w(" #InputField ")
function setInputElement(elementSelector, value) {
if (elementSelector && value) {
elementSelector.value = value;
let dummyEvent = {
‘target’:elementSelector
};
elementChanged(dummyEvent);
}
}

So the elementChanged function is called by onChange or the setter function setInputElement with similar ‘event’ arguments sufficient to get the desired result.

You can of course simplify the code by removing conditionals if you are sure that bad parameters won’t be passed :wink:

Has this been fixed? I can’t find anything on the updates site. I’m having the same problem as the original author, so I tried Yisrael’s code, shown here:

export function input3_change(event) {
console.log(“-> input3 change”);
console.log(“input3 value: “+ $w(”#input3”).value);
}

export function cmdUpdate_click(event) {
//Add your code for this event here:
$w(“#input3”).value = $w(“#input2”).value + “, " + $w(”#input1").value;
input3_change();
}

The only difference is I replaced “have a beer” with a string cat of two other input boxes. The text displays correctly in input3, but it won’t write input3 to my collection because it doesn’t register the OnChange() event. So I’m stuck between a bug and a hard place, with no working alternative. Suggestions?

Hey @dskinner1964 , Your problem lies in the “only difference is…”. Since you are using input fields, you need a slight delay to wait till they both are updated. You need something like this:

export function input3_change(event) {
   console.log("-> input3 change");
   console.log("input3 value: "+ $w("#input3").value);
}

export function cmdUpdate_click(event) {
   setTimeout(() => {
      $w("#input3").value = $w("#input2").value + ", " + $w("#input1").value; 
      input3_change();
   }, 10);
}

@yisrael-wix - could this work within a Pagination change event?

Hi Charles, the code examples above that Yisrael provided should work for any components that have an onChange() event.

By the way, I am no longer seeing the delay that Yisrael referred to back in January. Try it without the set timeout() first to see if it will work.

Hi all, I noticed that I never definitively responded regarding the product definition, where changing a value via code does not trigger an onChange event. Two different product managers have indicated that their preference is to leave it as-is for the foreseeable future. So continue to use the code example that Yisrael provided above. Thanks.