Onchange () event bugs : how to avoid it ?

Ask the community
,
1

Hello Everyone,
I am a novice in coding and I think have an issue about the “onChange” event.

PROBLEM
My problem is when all inputs and dropdowns are fullfilled and considered as validated through my function ‘formChanged’ the button “VALIDER” = (#button7) remains in disable mode. It doesn’t directly switch in ‘.enable’ mode until having manually changed again one of the fields’values and clicking out from input or dropdown firstly already fullfiled (ref. video).

QUESTIONS
I’ve red many posts where the .onChange function was the problem and then a contourning solution has been given (by @yisrael-wix ) :
Would it be the solution for my case or not ?
If yes, please, could someone help me to adapt this suggested code with my actual one ?
I really don’t know what and how to do, to make my (#button7) works.

Many thanks by advance.
Céline

  1. Code from Yisrael
// the onChange event that isn’t getting triggered 
exportfunctioninput1_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
exportfunctionbutton1_click(event){
//Add your code for this event here:
$w("#input1").value = “have a beer“;input1_change();}
  1. My coding version
import wixWindow from 'wix-window';

//DECLENCHEMENT FENETRE PAIEMENT
export function button7_onClick(event) {
}
$w.onReady(function () {
$w('#input1').onChange(formChanged)
$w('#input2').onChange(formChanged)
$w('#input3').onChange(formChanged)
$w('#input4').onChange(formChanged)
$w('#radioGroup1').onChange(formChanged)
$w('#textBox1').onChange(formChanged)
$w('#dropdown1').onChange(formChanged)
function formChanged() {
    const NameValid = $w("#input1").valid
    const cityValid = $w("#input2").valid
    const EmailValid = $w("#input3").valid
    const PhoneValid = $w("#input4").valid
    const cgvValid = $w("#radioGroup1").valid
    const ZonetextValid = $w("#textBox1").valid
    const OptionSemaine = $w("#dropdown1").valid
    const isFormValid = NameValid && cityValid && EmailValid && PhoneValid && cgvValid  && ZonetextValid && OptionSemaine
    if (isFormValid) {
            $w("#button7").enable();
            $w("#button7").onClick((event) => {
            $w("#box9").show();
        })           
    } 
    else {
        $w("#button7").disable();
    }
}
})

In live Wix mode, I have this issue that I don’t have in View mode where the (#button7) is automatically switched in enable mode and clickable only if all input values is validated by formChange function.

  1. Video of behaviour

  1. Screen shot