onChange event for input is not firing if the value is changing

Ask the community
,
1

I have an email subscription form. All I want to do is to add the email at the end of the link the signup button redirects to (after saving the subscribers). I added this on the onChange handler, but it is not firing when user types in in the box. It only fires after clicking the signup button once, which means for the signup button to work, it needs to be clicked again.

How do I get the onChange button to actually fire when needed? The onkeypress handler works fine and is triggered when using the exact same way as the onChange handler.
I would appreciate some help as I’ve already wasted hours on this and it’s such a small, small task!!

2

You should post your code.
But I’d guess that in your case the problem is that user is still focus on the userInput while clicking the submit, and therefore once the user clicks the button it hasn’t been changed yet.
One way to handle it, is to add a 10ms timeout before you save the data.
(Another way, is to add another checkbox “I confirm”. Once the “I confirm” is checked, enable the submit button)

3

Hi Laura,

I’m nut sure I understand your issue, if you add an onChange() event handler to a user input element the function will be triggered after you click outside the element.

Best,
Sapir

4

Yes, that is the issue. I would have thought the OnChnage would be triggered with the value change.
How would the timeout work in this case?
I attached the code, but literally I even only want this to be triggered:


export function input1_change(event) {
	console.log(event.target.value);
}
5

@laura59248 post your $(“#submitButton”).onClick() code, and I’ll show you how to add the timeout.

6

@jonatandor35 I did not add code to the button for onClick - I want it to do what it usually does, then redirect to the link that I set it to in the inputChange. ( or this is what I would like to do).

I was trying to not have to handle the submit of the form with saving the dataset myself to the subscribers list, and redirect the user when this would already automatically happen from wix.
Something like this:

 export function input1_change(event) {
       $("#submitButton").link = urlToRedirect + event.target.value;
	console.log(event.target.value);
}
7

@laura59248 are you using Wix Forms to submit?

8

If not, then you don’t need any time out, just something like:

import wixLocation from 'wix-location';//at the top of the page code
//code
$w("#dataset1").onAfterSave( () => {
  wixLocation.to(urlToRedirect + $w("#input1").value);
} );
9

@jonatandor35 I am using forms, does that mean I can’t use the solution above? Looks pretty clean!

10

@laura59248 I don’t know. the Forms App is quite limited, and not all the forms are the same, and I can’t give you code that will work on all of them for sure.

11

@jonatandor35 Thank you either way, I will try out the solution and see if it works!

12

@laura59248 if you don’t save it to the dataset, you won’t be able to use .onAfterSave().
But you can, for example, redirect to the other page onViewportEnter() of success notification.