Show/hide button based on input

Ask the community
,
1

Dear all,

I’m trying to build a landingpage that shows buttons based on a certain code that users put in a form on the landingspage (see picture attached).
I’m using this code, but it doesn’t work.
Can someone please help?
Thanks!!

$w.onReady(() => {
if ($w(“#input6”) === “Test1”) {
$w(‘#button3’).show();
$w(‘#button4’).hide();
} else if ($w(“#input6”) === “Test2”) {
$w(‘#button4’).show();
$w(‘#button3’).hide();
}
})

1480×548 80.7 KB

2

First off your code is working as soon as the page loads as you have written it into the pages onReady function.

You need to seperate your code and add your onclick event handler for the actual submit button itself.

3

Thanks! I’m pretty new to this - would you be able to show me the code that would be required to do this? Thanks!!!
R.

4

https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events

5

Thanks very much - makes a ton of sense. However, my buttons still don’t appear when I submit the right code. Do you know what else I’m missing? My current code looks like:

export function button6_click(event) {
if ($w(“#input6”) === “Test1”) {
$w(‘#button3’).show();
$w(‘#button4’).hide();
} else if ($w(“#input6”) === “Test2”) {
$w(‘#button4’).show();
$w(‘#button3’).hide();
}
}

6

Would someone be able to help here? This is the last thing we need before we can get our website to go live! :slight_smile: Thanks!!!

7

You need to specify you’re referring to the input’s value rather than the element itself.

It should be $w(" #input6 ").value === “Whatever”.

8

it works!!! Awesome guys - thank you so much!!

9

Tried to achieve the same effect but it is not working. By default, buttons are set to hide. Based on a choice from a dropdown, one button is to show. Any help? The full code below:

$w.onReady(() => {
});
export function dropdown1_click(event) {
if ($w( “#dropdown1” ).value === “Donate a Gift” ) {
$w( “#button8” ).show();
}
else if ($w( “#dropdown1” ).value === “Donate Cash” ) {
$w( “#button13” ).show();

}
}