Showing input fields based on previous input

leonmissoul · July 18, 2020, 10:47am

Hello

I have an input field with two Tags input fields. I want the visitor to select a tag for his country. The next tag input has to show The cities based on the country selected in the previous input. I think i can use .hide and .show for this in an if statement. But how do i do this exactly?

Thanks in advance

Léon Missoul

CODE-NINJA · July 18, 2020, 6:08pm

Hello Leon,

you have to show some more details of your project to get faster and better help.

Where is your CODE?
Do you have any pics of your project?
Some more input please.
What are you trying to do ?

Your description of your issue is not complete on my opinion.

How to work with “Selection-Tags” you can see here…
https://www.wix.com/corvid/reference/$w.SelectionTags.html

leonmissoul · July 20, 2020, 3:39pm

Thanks for your answer!
But I managed to get it to work. Thanks.

leonmissoul · July 23, 2020, 10:21am

Hi, I thought i got it, but it’s more complex than i thought.

This is what i want exactly:

I have a page where the repeater is filtered based on tags selections. The first tags selection field says the country. EG ‘Belgium’. When 'Belgium is selected, i want the second tags selection to pop up with the cities in belgium. And when EG ‘The Netherlands’ is selected I want another tags selection to pop up with the cities in the netherlands. But the cities selection tags shouldn’t show when no country is selected in the first tags selection.
```
       2. The second thing I want is the same, but instead of using The tags  
            selections, I want to show elements based on database content. EG: If  
            boolean is true, Show text element. 
```

Can you help me with this?

Thanks in advance!

Kind regards
Léon Missoul

CODE-NINJA · July 23, 2020, 10:39am

Do you already have some CODE?

Anyway, here you have the first part, how i would start to solve it.
It is an example for another POST, but very, similar to yours…

https://russian-dima.wixsite.com/meinewebsite/filter-my-phones

import wixData from 'wix-data';

export function STAG1_change(event) {
 let selectedTags = $w("#STAG1").value;
    console.log(selectedTags)
 let filter = wixData.filter();
 if (selectedTags) {
        filter = filter.hasSome("tags", selectedTags);
        console.log(selectedTags.length)
    }
    $w('#dataset1').setFilter(filter);
}

function find_bestPrice (VALUE) {
 if (VALUE === "Best Price"){console.log("Best-Price Search-Process activated !")}

 if (VALUE === "Newest Model"){console.log("Newest-Model Search-Process activated !")}
}

export function dropdown1_change(event) {find_bestPrice($w('#dropdown1').value)}

Here is the other post …

You have to expand/complete the CODE. (perhaps i also will do it on my example)

You could set the filter as a global variable for all functions, so you would be able to fill the fillter from every of your functions and on the last action-click you set the filter to filter the database with all selected and chosen filter-options to start filtering.

To look inside your current filled filter, you can just do something simple like a console.log…

console.log(filter)

…to see what is already inside the filter.

also take a look at this example here, which shows you how to set filter on dropdowns…

https://russian-dima.wixsite.com/meinewebsite/blank-3

Perhaps you can work with the other guye from similar-post, to find together a solution for you both.

leonmissoul · July 23, 2020, 12:22pm

Yes, I tried the following:

 $w.onReady(function () {
 if ($w("#selectionTags1").value === "belgie") {

        $w("#selectionTags2").show;
        $w("#selectionTags3").hide;

 
    } else if ($w("#selectionTags1").value === "nederland") {

        $w("#selectionTags2").hide;
        $w("#selectionTags3").show;
 
    } else {

        $w("#selectionTags2").hide;
        $w("#selectionTags3").hide;
 
    }

});

leonmissoul · July 23, 2020, 12:57pm

The post from the other guy is not exactly what i want. I knwo how to filter the repeater. I just want to know how i can make items visible or hide them based on the input. Like explained in my other reply.

CODE-NINJA · July 23, 2020, 1:39pm

Ok, if you would carefully look at my example and would using the CONSOLE, to see the results while process is running, you would recognice, that the RESULTS /Values are -----> ARRAYs[ ].

So you can not use your code.

For example you have a SELECTION-TAG with 5-Tags.
When you select the FIRST-TAG and shows the result in console, you will get for example…

This is an ARRAY with 1-inserted value.

This CODE here shows you all selected TAGS which are inputed into ARRAY and also the lenght of the ARRAY.

export function STAG1_change(event) {
 let selectedTags = $w("#STAG1").value
    console.log(selectedTags)
    console.log(selectedTags.length)
 }

When you select a second TAG, a second value goes into the ARRAY…

Now you have 2, values in your Array, because you have selected 2-TAGS in your Seletion-Tag!

So if our selection-Tag consists of in total 5-Tags, so the max lenght of our ARRAY can just be 5.

You have to change your code in some kind of this structure…

If my chosen VALUE (“belgie”) is in the ARRAY, then do something …
And because you can have in this case also 5-items, so you musst do a loop trough the ARRAY, and ask all 5 TAGS if they are in the ARRAY.

If —> YES —> THEN do something…
else ----> do something else…

In this way…


$w.onReady(function () {
 let selectedTags = $w("#STAG1").value

 for (var i = 0; i < $w("#selectionTags1").value.length; i++) {

 if (selectedTags[i] === "belgie")       {$w("#selectionTags2").show, $w("#selectionTags3").hide;}
 if (selectedTags[i] === "nederland")    {$w("#selectionTags2").hide, $w("#selectionTags3").show;}
 else                                    {$w("#selectionTags2").hide, $w("#selectionTags3").hide;}
    }

})

leonmissoul · July 23, 2020, 4:09pm

Thanks! exactly what i needed. What do you mean by #stag1 in your code?
Thanks for the help! really appreciate it!

CODE-NINJA · July 23, 2020, 5:19pm

STAG = SelectionTag, sorry i think that i mixed with my own CODE

STAG1 = selectionTags1

Additional…


$w.onReady(function () {
       $w('#selectionTags1').onClick(()=>{ //or on CHANGE ????

       // your CODE
       // your CODE
       // your CODE
       
       })
})

And don’t forget to like it, if you liked it

leonmissoul · July 24, 2020, 12:18pm

I liked I put the code together, but it doesn’t seem to work:

$w.onReady(function () {
       $w('#selectionTags1').onClick(()=>{
 
 let selectedTags = $w("#selectionTags1").value

 for (var i = 0; i < $w("#selectionTags1").value.length; i++) {

 if (selectedTags[i] === "belgie")       {$w("#selectionTags2").show, $w("#selectionTags3").hide;}
 if (selectedTags[i] === "nederland")    {$w("#selectionTags2").hide, $w("#selectionTags3").show;}
 else                                    {$w("#selectionTags2").hide, $w("#selectionTags3").hide;}
    }
 
       })
})

Any idea why?

CODE-NINJA · July 24, 2020, 1:40pm

Hello again,

this is what you need…

import wixData from 'wix-data';

$w.onReady(function () {
 
    $w('#selectionTags1').onChange(()=>{
 let selectedTags = $w("#selectionTags1").value
        hide_all_Stags()
        console.log(selectedTags)
        console.log(selectedTags.length)
 
 for (var i = 0; i < selectedTags.length; i++) {
            console.log(i)
 if (selectedTags[i] === "Sony")         {$w("#selectionTags2").show(), console.log("Sony found in the Array")}
 if (selectedTags[i] === "Samsung")      {$w("#selectionTags3").show(), console.log("Samsung found in the Array")}
 if (selectedTags[i] === "LG")           {$w("#selectionTags4").show(), console.log("LG found in the Array")}
            console.log(selectedTags[i])
 //.......
 //.......
 //.......
 //.......
 //.......
 //.......
        }
    })
})


function hide_all_Stags (parameter) {
    console.log("All tagmenus hided")
    {$w("#selectionTags2").hide;}
    {$w("#selectionTags3").hide;}
    {$w("#selectionTags4").hide;}
}

You will find the example here…

https://russian-dima.wixsite.com/meinewebsite/test-1

Vinicius_Giebeluka · January 22, 2024, 10:31am

Thank you so much!!!

CODE-NINJA · January 22, 2024, 11:23am

No problem, but seems to be already an old post

Topic		Replies	Views
Please help! How do I condition selection tag filtering to take dropdown filtering into account? Ask the community code , question	0	194	September 22, 2020
use Selection tags with "or" condition Ask the community code , question	14	422	October 26, 2020
Filter Gallery Based on Tags Ask the community code , question	5	2129	December 22, 2021
Selection Tags to Filter Repeater Using Velo Ask the community code , question	15	663	August 12, 2021
Display Tags based on Previous Selected Tags from a Data Collection. Ask the community code , question	4	368	December 18, 2021

Showing input fields based on previous input

Related topics