Session storage issue

Ask the community
,
1

I’m trying to get the session storage to work with radio buttons in this scenario:

I have one radio button contain only one checkbox option. I named this element #input1

On the same page I have another radio button contain only one checkbox option. I named this element #input2

I connected both these elements to the same field in the database, which means checking one of the buttons, unchecks the other, which is what I want.

My problem is that session storage doesn’t seem to work with the current code I have:

import { session } from 'wix-storage';

$w.onReady(function () {
$w('#input1').value = session.getItem("city");
$w('#input2').value = session.getItem("citytwo");
});

export function input1_change(event) {
 let city = $w('#input1').value
    session.setItem("city", city);
}
export function input2_change(event) {
 let citytwo = $w('#input2').value
    session.setItem("citytwo", citytwo);
}

Thanks

2

“I have one radio button contain only one checkbox option.” Are you using a Radio Button group or a checkbox? It’s not clear to me.

Note that session storage saves strings . If the value of your radio/checkbox is a number, or true/false, then it won’t work. You will need to convert the value to a field.

3

I’m using radioGroups.
The value of my radiobuttons are text, and are connected to text fields in the database.

The session storage works in scenarios where radioButtonGroup contains more options, but since I only have one option in each Radiogroup, the session storage doesnt work…

4

First of all, since you only have one option, a Checkbox is probably your best bet.

If you really, absolutely, positively must have a Radio button, then… What is the value that’s being returned? You can use a console.log(city) to see the value.

5

Thanks Yisrael,

In the console log it shows the name of the city chosen. (JAPAN, SINGAPORE)
I should probably have used checkboxes like you said. Although I tried that now, but I get the same issue as with the radio buttons.

The reason why I chose to only have one option in each group, was because I wanted to have an individual on change event for each option. As I’m new to coding, I couldn’t figure out how to set that up.

So I made more groups with only one option, and made them all point to the same databasefield, so that only one answer would be submitted (selecting one button unchecks the other).

But this is where the session storage problem begins, as soon as those buttons are connected to the same field in the database.

Thank you for your patience…

6

I gotta admit, I’m a bit confused. I think that I need to see up close what’s going on. Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

7

Editor URL:
https://editor.wix.com/html/editor/web/renderer/edit/424eeba6-0a2a-4ee6-9c15-721a723b72cd?metaSiteId=97080d7b-87f2-4f4b-9f1c-06a672ccd305&editorSessionId=a1a7cf1d-b355-4d81-8ed6-d848514a86e9&referralInfo=dashboard

8

@mari I see that city saves the correct value, and citytwo saves the correct value. Maybe you are just trying to use the session values incorrectly.

9

@yisrael-wix Thanks for having a look. I want it to remember the users choice when you click next page, and return. Isn’t that what session storages is for? Now if you choose JAPAN go to next page, and then back, SINGAPORE is checked…

10

@mari First of all, just use city , you don’t need (or want) citytwo . That is, for both buttons, save like this:
session.setItem(“city”, city);

Then, in the onReady(), use an if statement to check which city you have, and set the radio buttons accordingly.

11

@yisrael-wix Thanks for the tip. Could you please show me how to do it?

I can’t get it to work, this is what I have now:

import { session } from 'wix-storage';

$w.onReady(function () {

if ($w('#input1').value.checked) {
        $w('#input1').value = session.getItem("city");
    } else
        $w('#input2').value = session.getItem("city");

});

export function input1_change(event) {
 let city = $w('#input1').value
    session.setItem("city", city);
}

export function input2_change(event) {
 let city = $w('#input2').value
    session.setItem("city", city);
}


EDITOR URL:
https://editor.wix.com/html/editor/web/renderer/edit/424eeba6-0a2a-4ee6-9c15-721a723b72cd?metaSiteId=97080d7b-87f2-4f4b-9f1c-06a672ccd305&editorSessionId=4a87646d-3831-4053-bd3f-ee6477992017&referralInfo=dashboard
12

@yisrael-wix Hey. sorry for keep whining about this, but I’m really eager to figure this out. You’ve been tremendously helpful already, could you please show me how to get that if statement correct?

It’s getting the correct value, but visually it keeps checking “SINGAPORE”.

Thanks again