disabling icon button?

Ask the community
, ,
1

I have an icon button that i want to disabled until the user fills the input field, i have searched the forum and tried many things but nothing work.

so basically i only want to enable the button after the user input , i have tried writing this function on my code editor but it didnt work, this is my code so far:


$w.onReady(function () {
 

});
//export function disableBtn (event, $w){
//   $w('#girlBtn').disable();
//}
export function girlBtn_click(event) {  
    $w('#box1').hide(); $w('#box1').collapse();
     $w('#box2').show(); $w('#box2').expand();
}

export function nameInput_keyPress(event) {
    checkNames();
}
function checkNames (){
 if($w('#nameInput').value === "" ){
        $w('#girlBtn').disable();
    } else {
        $w('#girlBtn').enable();

    }

}

and this is my website, please don’t mind the design , i am still working on that :confused:

1920×1080 215 KB

on the website i used container box to hide elements, when the user clicks on the icon button “which is the girl and the boy img” another box shows depending on their choices.

and the reason of why i have used the icon image was because i want the button to be an image,

so far of what i have read is that i need to disable the button by default , but i can’t seem to figure how,

i need to figure out how to do it? your help is appreciated .

2

this is another function i have tried , it didn’t work out either


function checkNames (){
 if($w('#nameInput').value.length > 1 ){
        $w('#girlBtn').enable();
    } else {
        $w('#girlBtn').disable();

    }

}
3

ok nmw i have figured it out:


$w.onReady(function () {
  $w('#girlBtn').disable()

});

i just needed to write that on onReady fuction.,