I have a database that sends user input to another Wix page. I want certain textboxes to be displayed or hidden on the page the users are sent to, and they should be shown or hidden based on what the user input is. I have preset text boxes on the page that change their text when data is sent from the collection to page.
export function text53_onChange() {
let text = $w("#text53").text;
if( text !== "Denver (DEN)") {
$w("#text104").show();
}
else if( text === "Denver (DEN)") {
$w("#text104").hide();
}
}
However, it doesn’t seem to be working.
I was hoping there was some universal code that would show and hide textboxes based on what was sent to the page.
Here is the link to my site if you need a visual: https://kalyankaramsetty.wixsite.com/coloradanexplorer
Thanks
Are you sure that you are using a text element here as you can not use onChange with it.
Do you mean a user input for which you can use onChange on it?
The text changes because the data collection is connected to the text box. The user input is sent to the data collection and the data collection sends the data to the text box and modifies the text. The user is sent directly to the page thats modified with their input. I have a text box on that page that I want shown or hidden based on what the user in out is. So, for example, if the user selects Denver (DEN) and clicks submit, Denver (DEN) will appear in text53. I want an if and else if statement to show and hide a text box based on what text appears in text53.
I hope that makes sense.
Thanks
You can not use onChange on a text element
If you do it with a user input instead, then as you are adding the value through the use of code, the user input will not register the change and the user needs to click on the page outside of the user input for it to work.
Code used.
$w.onReady(function () {
});
export function input53_change(event) {
if ($w('#input53').value === "Denver (DEN)") {
$w("#text104").show();
} else {
$w("#text104").hide();
}
}
https://www.wix.com/corvid/reference/$w.TextInput.html#value
Changing a text input’s value in code does not trigger an onChange event.
Ok thank you so much.
I will try it out!
Would this work if the dropdown and the text box are on different pages
Is there any way I could set it up so that if the text in textbox53 is (…), show or hide “this”, or do I have to use the input, because when I tried it the text box stayed hidden.
If the user is being moved onto a new page after they have made their selection from a choice, then you can just do it in the pages onReady function.
However, you can not do this with the text box or a user input as you are only adding the text onto the text box or the value into the user input and the page won’t register that if you try to do something with it.
It would only do something on the new page if you used an onChange function on the user input and clicked off of the user input anywhere on the page, then the needed code would run.
The same with using the onClick function with a button for example, the user would see the text in the text box or the value in the user input and would have to manually click on a button to get something else to happen after it.
For this to work, you would be best using a radio button group or a dropdown and save the users choice using Wix Storage before moving the user onto a new page.
On this new page you could then simply get the value from memory and apply it to the radio button group or the dropdown and have something happen depending on that choice.
Just remember to make the user inputs of the radio button group and the dropdown set as Disabled (on the second page) so that they can’t be changed.
You will have to change the design to match your design for when they are actually working as with the disabled option they will be greyed out.
Code used is here.
First Page.
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady(function () {
});
export function button1_click(event) {
session.setItem("choice", $w("#radioGroup1").value);
session.setItem("choice1", $w("#dropdown1").value);
wixLocation.to("/blank-3");
}
Second Page.
import {session} from 'wix-storage';
$w.onReady( () => {
let value = session.getItem("choice");
let value1 = session.getItem("choice1");
$w("#radioGroup4").value = value
$w("#dropdown4").value = value1
if ($w("#radioGroup4").value === "Denver (DEN)") {
$w("#text1").show();
} else {
$w("#text1").hide();
}
if ($w("#dropdown4").value === "Denver (DEN)") {
$w("#text2").show();
} else {
$w("#text2").hide();
}
});
You can write after the onReady this instead as it does the same thing, it just condenses those four lines and saves two lines.
$w.onReady( () => {
$w("#radioGroup4").value = session.getItem("choice");
$w("#dropdown4").value = session.getItem("choice1");
If it just these few items that you are doing then using the above shorter method is easier and quicker for you to use.
However, if you have a lot of code and a lot more happening on your page, then you might find it easier to have the lets at the top of your page with the actual elements getting the values later on in your code as like the first option.
I added a dropdown to the page the user is sent to and I changed the code according to my values. I was a little confused with what dropdown 4 was, so I added a dropdown on the page the user is sent to. However, the box still won’t disappear. I know something is happening because I have the text hidden on load and when I’m sent to the page I can see the text.
The way I’m sending some of my values to that page is with the help of this video: https://www.youtube.com/watch?v=FVARVy3YS74
Homepage Code:
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady(function () {
});
export function button97_click(event) {
session.setItem("choice1", $w("#dropdown1").value);
wixLocation.to("/blank-3");
}
Second Page Code:
import {session} from 'wix-storage';
$w.onReady( () => {
let value1 = session.getItem("choice1");
$w("#dropdown4").value = value1
if ($w("#dropdown4").value === "Denver (DEN)") {
$w("#text141").hide();
} else {
$w("#text141").show();
}
});
I tried something else in which I link the drop-down on the second page to my database. If I send the value to a dropdown on the second page by connecting it to the database, how can I tell the Text box what to do based on the value in the dropbox?
Do I get rid the current text box that has data being sent to it and replace it with a drop down that receive the value?
I also tried this:
I added a dropdown on the second page and sent the value from the collection to the drop down by connecting them.
Then I used this code:
export function dropdown4_onViewportEnter() {
let value = $w("#dropdown4").value;
if( value === "Denver (DEN)") {
$w("#text141").hide();
}
else if( value !== "Denver (DEN)") {
$w("#text141").show();
}
}
But it still didn’t work. Is there something wrong with the code?
First page
First Page.
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady(function () {
});
export function button1_click(event) {
session.setItem("choice", $w("#radioGroup1").value);
session.setItem("choice1", $w("#dropdown1").value);
wixLocation.to("/blank-3");
}
The user can choose whatever option they want in the radio button group and the dropdown list, then they simply click on the button and the values are saved into session storage and the code moves the user onto the next page with the location to function.
Simple radio button group and dropdown with what ever labels you give it, just make sure that the values, which are what are saved in your dataset and used in the code are what you want them to be.
https://support.wix.com/en/article/setting-labels-and-values-for-radio-buttons-and-dropdown-lists
You can see about this too in the Wix API Reference for radio button group and dropdown here.
Second Page.
Second Page.
import {session} from 'wix-storage';
$w.onReady( () => {
let value = session.getItem("choice");
let value1 = session.getItem("choice1");
$w("#radioGroup4").value = value
$w("#dropdown4").value = value1
if ($w("#radioGroup4").value === "Denver (DEN)") {
$w("#text1").show();
} else {
$w("#text1").hide();
}
if ($w("#dropdown4").value === "Denver (DEN)") {
$w("#text2").show();
} else {
$w("#text2").hide();
}
});
Or change it to the condensed lines here.
$w.onReady( () => {
$w("#radioGroup4").value = session.getItem("choice");
$w("#dropdown4").value = session.getItem("choice1");
-
Radio button group is #radioGroup4
-
Dropdown is #dropdown4
-
Radio Group Show text box is #text1 and set to be hidden on load
-
Dropdown Show text box is #text2 and set to be hidden on load
Simple radio button group and dropdown which matches the same elements from the previous page, you can simply copy and paste the other page ones.
When the page loads the radio button group and the dropdown elements are automatically set with the value got from the session storage command.
Then the radio group shown text box and the dropdown show text box are either shown or kept hidden depending on what the value in the elements are.
If the user had chosen Denver (DEN) on both radio button group and dropdown, then the appropriate text boxes would be shown on the next page.
If the user chose another option other than the stated value in the code used, then the text boxes would both remain hidden to the user.
The radio button group and the dropdown are not linked together in anyway, so the user is free to chose Denver (DEN) for one and Denver in the other one and the appropriate text box would either show or be kept hidden.
On the second page it is best to make the user input elements as Disabled so that the user can’t change anything in them, although you would have to change the disabled design to match your enabled design settings that you have on your own site, otherwise they will be greyed out only.
If you want to keep these user inputs hidden you can and the code will still work exactly the same way. The only difference being is that the user elements won;t be shown on the second page and the user will either just see the text box if chose the right value, or an empty page if the wrong value is chosen and the text box stays hidden.
You can do what you have done with the onViewportEnter, so that the dropdown has the value automatically preset and the text box appears or not.
However, depending on where this is on the page and how it looks on the page etc, etc, you might still be better with at least having the dropdown or the radio button group set in the pages onReady function.
Then you can look at doing the onViewpoortEnter function with the values in the user inputs.
So two options…
As it is with your existing code albeit changed to suit the page.
First option.
import {session} from 'wix-storage';
$w.onReady( () => {
});
export function dropdown4_onViewportEnter() {
let value = session.getItem("choice");
$w("#dropdown4").value = value
if ($w("#dropdown4").value === "Denver (DEN)") {
$w("#text141").hide();
} else {
$w("#text141").show();
}
}
First option shortened as before.
import {session} from 'wix-storage';
$w.onReady( () => {
});
export function dropdown4_onViewportEnter() {
$w("#dropdown4").value = session.getItem("choice");
if ($w("#dropdown4").value === "Denver (DEN)") {
$w("#text141").hide();
} else {
$w("#text141").show();
}
}
Second option with the user input element being set when the page loads and the text box only being shown or hidden when the user views it.
Second option
import {session} from 'wix-storage';
$w.onReady( () => {
let value = session.getItem("choice");
$w("#dropdown4").value = value
});
export function dropdown4_onViewportEnter() {
if ($w("#dropdown4").value === "Denver (DEN)") {
$w("#text141").hide();
} else {
$w("#text141").show();
}
}
Second option shortened as before.
import {session} from 'wix-storage';
$w.onReady( () => {
$w("#dropdown4").value = session.getItem("choice");
});
export function dropdown4_onViewportEnter() {
if ($w("#dropdown4").value === "Denver (DEN)") {
$w("#text141").hide();
} else {
$w("#text141").show();
}
}
The way that you are trying to do it originally is a much quicker and easier option to use and you can see an example of it here, with this example hiding the videoplayer element if there is no video to be played.
https://support.wix.com/en/article/corvid-tutorial-hiding-a-video-player-when-there-is-no-video-to-play
$w.onReady(() => {
$w("#myDataset").onReady(() => {
// Gets the current item properties and stores them in a variable called item
const item = $w("#myDataset").getCurrentItem();
// Checks if the current item has a value in the "video" field
if (!item.video) {
// Collapses the video player if there is no value for "video"
$w("#videoPlayer").collapse();
}
});
});
You can look at using this type of method instead as like in the example here.
if (!item.video) {
