Hide/Show element based on text validation

Ask the community
, , ,
1

Question:
How to hide/show element based on fieldkey (text) validation.

Product:
Wix Editor

What are you trying to achieve:
I have a text field in a collection connected to a dropdown with 3 options, this is on one dynamic page (user input page). I have another dynamic page (profile page) with 3 buttons that correspond to those 3 options. I would like to hide 2 of the 3 buttons based on the dropdown selection being true/matching.

What have you already tried:
my code: Firstly, current code is 3 separate onReady functions, with the code for button 3 being last. I think the code is just running a query on if the fieldkey is empty/full, not checking the text validation itself because the third button always shows.

Database details’
Collection Name “ID” Collection Permissions: Members/Author
Dataset “dynamicDataset”
fieldkey “ctaBannerButtonType”

My code

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        var item = $w("#dynamicDataset").getCurrentItem();
            if (item["ctaBannerButtonType"] === "URL" || item["ctaBannerButtonType"] === true || item)
            $w("#buttonURL").show();
            $w("#buttonMessenger").hide();
            $w("#buttonLINE").hide()
    })

    $w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        var item = $w("#dynamicDataset").getCurrentItem();
            if (item["ctaBannerButtonType"] === "Messenger" || item["ctaBannerButtonType"] === true || item)
            $w("#buttonURL").hide();
            $w("#buttonMessenger").show();
            $w("#buttonLINE").hide()
    })

    $w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        var item = $w("#dynamicDataset").getCurrentItem();
            if (item["ctaBannerButtonType"] === "LINE" || item["ctaBannerButtonType"] === true || item)
            $w("#buttonURL").hide();
            $w("#buttonMessenger").hide();
            $w("#buttonLINE").show()
    })

Any ideas on what’s missing would be much appreciated. Many examples relevant to this check the field using .length or null/true but I don’t know how to modify to query the actual value.

2

Forgot to add, the 3 values in the dropdown are “URL” “Messenger” and “LINE”

4

Hey @Geoff_Helms!

It seems you should be heading in the right direction.

It’s worth noting, that you should only use one $w.onReady on a page.

I’ve tidied up the code for you a bit:

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        let itemObj = $w("#dynamicDataset").getCurrentItem();
        if (itemObj.ctaBannerButtonType === "URL") {
            $w("#buttonURL").show();
            $w("#buttonMessenger").hide();
            $w("#buttonLINE").hide()
        } else if (itemObj.ctaBannerButtonType === "Messenger") {
            $w("#buttonURL").hide();
            $w("#buttonMessenger").show();
            $w("#buttonLINE").hide()
        } else if (itemObj.ctaBannerButtonType === "LINE") {
            $w("#buttonURL").hide();
            $w("#buttonMessenger").hide();
            $w("#buttonLINE").show()
        } else {
            //Do something else
        }
    })
})

Here’s what the code is doing:
When the page is ready, and the Dataset is ready, create a variable to store the itemObj. The itemObj the item from the database in Object form.

It then checks to see it the .ctaBannerButtonType field in the database has a value of URL. If it does, it shows the URL button, but hides the other.

If the value is not URL it then runs the next if. This time it checks to see if the value is Messenger. If it is, it shows the Messenger button and hides the others.

If the value is not Messenger it runs the last if following the rules above.

Hope that helps :slight_smile:

1 Like
5

Hi @noahlovell thanks for the help, works perfectly!