How can I show a textbox depending on current value?

As you can see at this screenshot I have added a visible text for Men with age and country. Below are hidden text boxes for Women, also with age and country. The reason to why I have separate text boxes is because the difference in lenght between “Man” and “Women” creates an ugly blank space for men between Man and Age when the Man and Woman values share the same text box. Because of this I logically want the boxes for men show for men and the boxes for women show for women. Man is default and therefore not hidden from the start.

I have tried a whole day to find a way to make the Woman textboxes show depending on the current value so please help me with a working code.

Ps! I read that it isn´t possible in Wix to move elements with code, else that would have been a more simple and better solution.

Ps! I read that it isn´t possible in Wix to move elements with code, else that would have been a more simple and better solution

Yes it is possible, you can move elements on screen → using Wix-Animation

I know that there are animation effects but my main question is how I can show or move a textbox depending on the current value? In this case if it´s a man or woman. Can you please give me a code for that?

There are different ways of how to do that.

  1. Do you use a DATASET ?
  2. If so, is your DATASET connected programmaticaly or through wix-properties panel ?
  3. Or do you wanna go the way complete without a usage of a DATASET (most flexible way) ?

I always prefer to go the most flexible way, without any boundaries.
Almost every 3.rd of my post explains how to work with Wix-Data-Api.

You are aware about wix-data-api?
You know where to find it ?

Take a look here…
https://www.wix.com/velo/reference/wix-data
STANDARD code-block using wix-data-api to get items from DATABASE…

import wixData from 'wix-data';

// ...

wixData.query("myCollection")
  .find()
  .then((results) => {
    if(results.items.length > 0) {
      console.log(results.items[0]); //see item below
    } else {
      // handle case where no matching items found
    }
  })
  .catch((err) => {
    console.log(err);
  });

Lets expand it a little bit …here you will find some examples…

Also read this one… i think there was an explanation in detail how to work with wix-data-api using query…

Or do you either prefer the DATASET-solution?

Or you even have a DYNAMIC-DATASET ???
Read this post…

You will find there a very simple example.

If still something unclear, post your questions here.

Thank you very much Ninja! When I try with a dataset and the kind of code that you show here my problem is that the values “Man” and “Woman” are connected to the same field in the collection. With this it doesn´t matter what I set as show or hide because one of the text rows (se the screenshot) always become wrong. Either it becomes an ugly space between Man and Age or Age over the end of Woman. I hope you understand me?

My desire is this:

“The Blondine 35 - United States” is hidden or collapsed as default and lay directly behind “Chaplin 32 - United States” which is shown or expanded as default. Both text rows are placed at the exactly same spot.

When it´s a woman, “Chaplin 32 - United States” becomes hidden or collapsed and shows or expand “The Blondine 35 - United States”.

When it´s a man, “Chaplin 32 - United States” stays as shown or expanded and “The Blondine 35 - United States” stays as hidden or collapsed.

I will read and try your examples but if nothing works you now have a clear picture of the result I´m struggling for.

“The Blondine 35 - United States” is hidden or collapsed as default and lay directly behind “Chaplin 32 - United States” which is shown or expanded as default. Both text rows are placed at the exactly same spot.

My question is, why you need → 2 ← text-fields at exact the same spot ?
What for?
Why not using just one textfield and just change the value of the text ?

Seems like your setup is not the best one, if you have to do such tricky things.
Try to go another way, where you don’t have to use doubled elemets for one and the same functionality.

The first what comes into my mind when i see your problem, would be → MULTISTATE-BOX.

But i can not the the exact setup of your project, so it is a bit difficult to give you a clear answer.

I want to show a result value in two different fields with just one dropdown input depending on the value a registering person choose but have still not succeded with this. Partly because I don´t know where to write that code. If its a man the value Man shall be displayed in the “Man” field. If its a woman the value Woman shall be displayed in the “Woman” field.

Here you see my main code for registering and that works but where can I place the “if query” I need to get the extra two fields I´m talking about?

import { currentMember, authentication } from ‘wix-members’;
import wixLocation from ‘wix-location’;
import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;

$w.onReady(function () {})

function valuesValid() {
return $w(‘#email’).valid &&
$w(‘#password’).valid &&
$w(‘#forename’).valid &&
$w(‘#age’).valid &&
$w(‘#gender’).valid &&
$w(‘#orientation’).valid &&
$w(‘#country’).valid &&
$w(‘#language’).valid &&
$w(‘#nickname’).valid &&
$w(‘#state’).valid;
}

function register() {

if (valuesValid()) { 
    let email = $w('#email').value 
    let password = $w('#password').value 
    authentication.register(email, password) 
        .then((user) => { 
            const toInsert = { 
                "_id": user.member._id, 
                "_owner": user.member._id, 
                "loginEmail": email, 
                "password": password, 
                "firstName": $w('#forename').value, 
                "nickname": $w('#nickname').value, 
                "age": $w('#age').value, 
                "gender": $w('#gender').value, 
         "Man": $w('#gender').value, 
         "Woman": $w('#gender').value, 
                "sexualOrientation": $w('#orientation').value, 
                "country": $w('#country').value, 
                "state": $w('#state').value, 
                "language": $w('#language').value, 
            }; 
            // add the item to the collection 
            wixData.insert("Members", toInsert) 
                .then((item) => { 
                    if (wixUsers.currentUser.loggedIn) { 
                        wixLocation.to(`/members/account/${item._id}`); 
                    } else { 
                        let email = $w('#email').value; 
                        let password = $w('#password').value; 
                        wixUsers.login(email, password).then(() => { 
                            wixLocation.to(`/members/account/${item._id}`); 
                        }).catch((err) => { 
                            console.error(err); 
                            $w('#errorMessage').text = "Couldn't log you in: " + err 
                            errorMessage() 
                        }) 
                        console.log("User is logged in"); 
                    } 
                }) 
                .catch((err) => { 
                    console.error(err); 
                    $w('#errorMessage').text = "Somehing isn't right on your end: " + err 
                    errorMessage() 
                }); 
        }) 
} else { 
    $w('#errorMessage').text = "Somehing isn't right on your end: There's an Invalid or Missing Property" 
    errorMessage() 
} 

}

function errorMessage() {
$w(‘#errorMessage’).show()
$w(‘#errorMessage’).expand()
$w(‘#regButton’).enable()
$w(‘#regButton’).label = ‘Register’
setTimeout(() => {
$w(‘#errorMessage’).hide(‘fade’)
}, 10000)
setTimeout(() => {
//$w(‘#errorMessage’).collapse() ← Collapse if you want
}, 10500)
}

export function regButton_click(event) {
register()
}

The best solution would be if “Age” (32) would move a bit to the left when it´s a man because then it wouldn´t be an ugly space between Man and 32. Both you and Isryel earlier wrote on another page that it isn´t possible to move elements in that way (with code). Wix Animation is not the solution I need because I don´t want anything to move in front of the readers eyes. My only desire is to get rid of the ugly gap between Man and Age. I hope that you perfectly understand me now? :grin:

Your prozess step by step…

  1. When page is ready yoo start the validation-check.
$w.onReady(()=>{....});
  1. You have a REGISTRATION-BUTTON on your page (regButton).
    When clicked → The registration-prozess starts…
$w.onReady(()=>{
    $w('#regButton').onClick(()=>{
       register(); // <-- REGISTRATION-START onClick!
    });
});

  1. Function register() starts…
function register() {
    if (valuesValid()) {
        let email = $w('#email').value
        let password = $w('#password').value
        authentication.register(email, password)
            .then((user) => {
                const toInsert = {
                    "_id": user.member._id,
                    "_owner": user.member._id,
                    "loginEmail": email,
                    "password": password,
                    "firstName": $w('#forename').value,
                    "nickname": $w('#nickname').value,
                    "age": $w('#age').value,
                    "gender": $w('#gender').value,
	         "Man": $w('#gender').value,
	         "Woman": $w('#gender').value,
                    "sexualOrientation": $w('#orientation').value,
                    "country": $w('#country').value,
                    "state": $w('#state').value,
                    "language": $w('#language').value,
                };
                // add the item to the collection
                wixData.insert("Members", toInsert)
                    .then((item) => {
                        if (wixUsers.currentUser.loggedIn) {
                            wixLocation.to(`/members/account/${item._id}`);
                        } else {
                            let email = $w('#email').value;
                            let password = $w('#password').value;
                            wixUsers.login(email, password).then(() => {
                                wixLocation.to(`/members/account/${item._id}`);
                            }).catch((err) => {
                                console.error(err);
                                $w('#errorMessage').text = "Couldn't log you in: " + err
                                errorMessage()
                            })
                            console.log("User is logged in");
                        }
                    })
                    .catch((err) => {
                        console.error(err);
                        $w('#errorMessage').text = "Somehing isn't right on your end: " + err
                        errorMessage()
                    });
            })
    } else {
        $w('#errorMessage').text = "Somehing isn't right on your end: There's an Invalid or Missing Property"
        errorMessage()
    }
}
  1. First running the VALIDATION-CHECK…
function valuesValid() {
    return $w('#email').valid &&
        $w('#password').valid &&
        $w('#forename').valid &&
        $w('#age').valid &&
        $w('#gender').valid &&
        $w('#orientation').valid &&
        $w('#country').valid &&
        $w('#language').valid &&
        $w('#nickname').valid &&
        $w('#state').valid;
}
  1. If all values are VALID… → start REG-PROCESS…
let email = $w('#email').value
        let password = $w('#password').value
        authentication.register(email, password)
  1. Then do the following… Inserts USER-DATA into “Members”
.then((user) => {
      const toInsert = {
         "_id": user.member._id,
         "_owner": user.member._id,
         "loginEmail": email,
         "password": password,
         "firstName": $w('#forename').value,
         "nickname": $w('#nickname').value,
         "age": $w('#age').value,
         "gender": $w('#gender').value,
	     "Man": $w('#gender').value,
	     "Woman": $w('#gender').value,
         "sexualOrientation":$w('#orientation').value,
          "country": $w('#country').value,
          "state": $w('#state').value,
          "language": $w('#language').value,
       };
                
       wixData.insert("Members", toInsert)
       .then((item) => {
           if (wixUsers.currentUser.loggedIn){
               wixLocation.to(
                  `/members/account/${item._id
               }`);
           } 
           else {
               let email = $w('#email').value;
               let password = $w('#password').value;
               wixUsers.login(email, password)
               .then(() => {
                   wixLocation.to(
                      `/members/account/${item._id}`
                   );
               })
               .catch((err) => {console.error(err);
                $w('#errorMessage').text = "Couldn't log you in: " + err  errorMessage()})
                 console.log("User is logged in");
                        }
                    })
                    .catch((err) => {
                        console.error(err);
                        $w('#errorMessage').text = "Somehing isn't right on your end: " + err
                        errorMessage()
                    });
            })
    } else {
        $w('#errorMessage').text = "Somehing isn't right on your end: There's an Invalid or Missing Property"
        errorMessage()
    }
}

Till here everything seems to make sense and is logical, but where the hell is your REPEATER-CODE ?

Or do you expect, that if you connect your REPEATER trough the properties-panel, and the repeater will automaticaly know what to do with the recieved data? —> Of course not!

This is in most cases the same problems, when someone tries to mix settings inside PROPERTIES-PANEL and CODE.

You will have to DISCONNECT your repeater on your page, which will surely be connected through the property-panel at current moment.

After you have disconnected it from PROPERTY-PANEL, you will have to code your own CUSTOM-FUNCTIONS, telling the repeater what to do with the recieving data.

After your data was inserted into DB, you can query the data out of this DB using Wix-Data-Api

When you have your data-package, which you want to be loaded into your repeater, then you will need another code-part…

$w('#yourRepeaterIDhere).data = "your queried data from DB ("Members")";

$w('#yourRepeaterIDhere).onItemReady($item, itemData, index()=>{
    //...and here you define all the repeater-elements to be shown...
    $item('#textElement').text= itemData.title;
    $item('#imageElement').src= itemData.imageField;
    $item('#another element inside repeater').........
    
    // and also here you can write the IF-ELSE-Statement to differ between WOMEN and MEN.
    
    if(itemData.xxxxxx === "WOMAN"){............}
    else {.............}
})

Something like that :grin:

Thank you very much Ninja! Yes my registration page has no datasets but my video comments page is partly database-connected. Another of Wix experts, Lytude, made that code which is on a level I can´t reach to :wink: However, even if there are no datasets on the registration page the collection (“Members”) and its field values can still be connected with the video comments page, right? In that way your explanation makes me confused.

As a clarification - after registrations there are already registered members in the collection. With that in mind I don´t understand why the registration page also must include database-connections to make it possible to connect the video comments page´s elements to a dataset?

Sometimes you may use some tricks to get your desired solution.

Wix Animation is not the solution I need because I don´t want anything to move in front of the readers eyes

You can first HIDE then move then SHOW. Anybody would see the movement, which would be done within MILLI-SECONDS.
As i already mentioned there are different ways of how to solve it.

Try to be tricky.

Okay but how do I make this happen through the current value because else I guess that the movement will affect both Man and Woman? I only want the textbox for Man slightly moved to the left. So what code for that function?

Already told you to disconnect your dataset inside properties panel.

Here you have a little TEST-ENVIRONMENT, test it on a completely new page.

let memberData =[
    {
        "_id":"11111",
        "nickname": "Alfred",
        "age": "56",
        "gender": "male",
        "Man": "true",
        "Woman": "false",
        "sexualOrientation": "homo-sexual",
        "country": "Africa",
        "state": "Nairobi",
        "language": "French",
    },
    {
        "_id":"22222",
        "nickname": "Leonore",
        "age": "23",
        "gender": "female",
        "man": "false",
        "woman": "true",
        "sexualOrientation": "bi-sexual",
        "country": "Germany",
        "state": "Kassel",
        "language": "German",
    }
];

$w.onReady(()=>{
    $w('#repeater1').data = memberData;    
    $w('#repeater1').onItemReady(($item, itemData, index)=>{console.log(itemData);
        $item('#button1').onClick(()=>{console.log("CLICKED!!!");
            console.log(itemData._id);
            console.log(itemData.age);
            console.log(itemData.gender);
            console.log(itemData.man);
            console.log(itemData.woman);
            console.log(itemData.sexualOrientation);
            console.log(itemData.country);
            console.log(itemData.state);
            console.log(itemData.language);         
        });           
    });
});
            
  1. Create a new blank page.
  2. Add a REPEATER (‘repeater1’).
  3. Add a button into that repeater (‘button1’).
  4. Add the shown code, with predefined REPEATER-DATA.

Publish your page.

Run it and test it!

This is a little DEMO-VERSION of how to work completely without a usage of DATASETS.

Add new members into the DEMO-DATA…

let memberData =[
    {
        "_id":"11111",
        "nickname": "Alfred",
        "age": "56",
        "gender": "male",
        "Man": "true",
        "Woman": "false",
        "sexualOrientation": "homo-sexual",
        "country": "Africa",
        "state": "Nairobi",
        "language": "French",
    },
    {
        "_id":"22222",
        "nickname": "Leonore",
        "age": "23",
        "gender": "female",
        "man": "false",
        "woman": "true",
        "sexualOrientation": "bi-sexual",
        "country": "Germany",
        "state": "Kassel",
        "language": "German",
    },
    {
        "_id":"333",
        "nickname": "Velo-Ninja",
        "age": "???",
        "gender": "male",
        "man": "true",
        "woman": "false",
        "sexualOrientation": "???",
        "country": "WORLD",
        "state": "WORLD",
        "language": "Multilingual",
    }
];

Test it again!

Now back to your question, where to put the IF-ELSE into ???

{console.log("CLICKED!!!");
            console.log(itemData._id);
            console.log(itemData.age);
            console.log(itemData.gender);
            console.log(itemData.man);
            console.log(itemData.woman);
            console.log(itemData.sexualOrientation);
            console.log(itemData.country);
            console.log(itemData.state);
            console.log(itemData.language);   
            
            if(itemData.man === "true") {console.log("Wohooo, i am a real man!);}
            else {console.log("I don't know who i am, maybe a woman?");}      
        });           
    });
});

Now go all the way back, and read all my suggestions one more time.
Put all informations together, and try to generate everything without DATASET and your programing-live will be much easier.

Also take a look into this POST here… could be ver interesting for you…

I followed everything you wrote but got this results. As you can se the “membersData” text is red-marked because it is redecleared later in the code (explanation when I hover over the text):

The code in the end is also red-marked but for an unknown reason (maybe because the membersData text in the beginning is red-marked?):

Here one more time without SYNTAX-ERRORS… (tested and working)…

let memberData =[
    {
        "_id":"11111",
        "nickname": "Alfred",
        "age": "56",
        "gender": "male",
        "man": "true",
        "woman": "false",
        "sexualOrientation": "homo-sexual",
        "country": "Africa",
        "state": "Nairobi",
        "language": "French",
    },
    {
        "_id":"22222",
        "nickname": "Leonore",
        "age": "23",
        "gender": "female",
        "man": "false",
        "woman": "true",
        "sexualOrientation": "bi-sexual",
        "country": "Germany",
        "state": "Kassel",
        "language": "German",
    }
];

$w.onReady(()=>{
    $w('#repeater1').data = memberData;    
    $w('#repeater1').onItemReady(($item, itemData, index)=>{console.log(itemData);
        $item('#button1').onClick(()=>{console.log("CLICKED!!!");
            console.log(itemData._id);
            console.log(itemData.age);
            console.log(itemData.gender);
            console.log(itemData.man);
            console.log(itemData.woman);
            console.log(itemData.sexualOrientation);
            console.log(itemData.country);
            console.log(itemData.state);
            console.log(itemData.language); 

            if(itemData.man === "true") {console.log("Wohooo, i am a real man!)");}
            else {console.log("I don't know who i am, maybe a woman?");}   
        });           
    });
});

Expand the code by your own needs.
Now you can generate IF-ELSE-Statements however and as much as you want.

Replace later the DEMO-DATA, against your OWN DATA FROM DATABASE, using Wix-Data-Api.

Thank you very much Ninja for all your effort in this. I will let you know if I get everything working :slightly_smiling_face:

Shall this not be connected to a collection? I mean, where do this data get after someone has pushed the button? Maybe a stupid question but I am new to this kind of coding. Is “memberData”, “index” or “itemData” the collection? :wink:

Collection = DATABASE

Every DATABASE has an —> ID.

The basic flow to get data from DB…(using Wix-Data-Api)…

  1. do a query on your DATABASE including all your wished parameters.
  2. send the query to a RETURN-FUNCTION, which will return results back.
  3. now you should have your results declared in a variable.
let myData = await getData(db, dbField, value); console.log(myData);

Zapp throug my last 40-posts, you will find enough examples and a very good explanation of how to work with Wix-Data-Api.

Yes I understand that but you didn´t include “Database name” or “collection-name” in your codes so thats why I got confused. Well, I will probably figure it out and I´m thankful for all your answers.

Cheers Kristofer