Radio buttons value to show and hide an element (SOLVED)

[mattias]

Hi Wix Coders!

I’m new at coding, but have some basic knowledge, but can’t figure out how to code this so it works… In the Java script code area i don’t know how to get the single radio buttons Id so i can hide and show an element, when the single radio button is seclected.

I want it to show a print button when a radio button is selected, and expand an columnstrip… and change the button and columnstrip if another radio button is selected… Does it make sence?

I try to show in the video what i want it to do… Please help

Wix code - how do i use radio buttons to show and hide an item

[mikhail-spirin-wix]

Hi!
THe most simplest way, that comes to my mind - to have 3 strips and collapse/expand them, if different radio button is chosen

Look at this:

https://mikhails8.wixsite.com/mysite-333

[mikhail-spirin-wix]

This is the code for it:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady(function () {
	//TODO: write your page related code here...

});

export function button1_click(event) {
	console.log($w("#RadioGroup1").value);
	if ($w("#RadioGroup1").value == "Radio button1") {
		$w("#columnStrip2").collapse();
		$w("#columnStrip3").collapse();
		
		$w("#columnStrip1").expand();
	} 
	
	if ($w("#RadioGroup1").value == "Radio button2") {
		$w("#columnStrip1").collapse();
		$w("#columnStrip3").collapse();
		
		$w("#columnStrip2").expand();
	} 
	
	if ($w("#RadioGroup1").value == "Radio button3") {
		$w("#columnStrip1").collapse();
		$w("#columnStrip2").collapse();
		
		$w("#columnStrip3").expand();
	} 
}

Read about collapse expand here:

Velo Tutorial: Adding Custom Interactivity with Events | Help Center | Wix.com

ColumnStrip - Velo API Reference - Wix.com

[mattias]

Thanks Mikhail, exactly what i was looking for! Now that i see the code it’s obvious, and i have only used all week to treing figure it out

[mikhail-spirin-wix]

It’s fine, you just need to get used to this)

[mattias]

Excatly, it starts to make sence to me… so its a start

Changed the event from onClick to onChange
When it was on click i needed to dubble click to make et expand the column strip… Don’t know why, but when i used on Change it works perfectly.

[john-kisor]

SO I am trying to do something similar with checkbox’s. I want one thing to happen when the checkbox is selected and it to revert back when deselected.

[mattias]

Hi John,

I think the best way to do this is to click on the checkbox, then choose “onChange”

Now in the code section it should show something like this:

 export function checkbox1_change(event, $w) {

}

Now you need to make an if or else and do something that look like this:

	if ($w("#checkbox1").checked)
	$w("#box2").show();
	
	else
	$w("#box2").hide();

So the finished would look like this

export function checkbox1_change(event, $w) {

if ($w("#checkbox1").checked)
	$w("#box2").show();
	
	else
	$w("#box2").hide();

}

[martin-ost]

Hi I am trying to do similar thing with checkbox on my site:
https://mnestepny.wixsite.com/donate/account/new-page

My checkbox4 (Set Amount) should show #box5 when checked onChange. But it is not>

export function checkbox4_change(event, $w) {

if ($w(“#checkbox4”).checked)
$w(“#box5”).show();

else 
$w("#box5").hide(); 

}

I have no Idea why is it because of rest of my code?
Please help.

[mattias]

Hi Martin,
You need this in the code { } but i’m not sure if that’s why it wont work… But otherwise the code looks fine

{ } this should be implanted after (checkbox4).checked)

Try i out, and let me know if it works

so something like this:

export function checkbox4_change(event, $w) {
if ($w("#checkbox4").checked){
	$w("#box5").show();
	}
	else
	$w("#box5").hide();
}

[weddings]

I feel like I am missing something… Is the example in this link

https://mikhails8.wixsite.com/mysite-333

supposed to show collapsed/expanded column strips? I am not seeing how this is supposed to work, nor can I get the code to work on my own site.

[greferemily]

Hi there,

I’m trying to implement this code on to my site to do something similar, but I’m not having much luck. Essentially, I’d like to have a quiz that reveals a “correct” sticker when the customer has selected the right answer and an “Incorrect” sticker when they select another one. I thought this would be using the same logic as the code above, but it won’t reveal the image for some reason. Could anyone help?

$w.onReady( function () {
//TODO: write your page related code here…

});

export function button16_change(event,$w) {
console.log($w(“#radioGroup4”).value);
if ($w(“#radioGroup4”).value===“Radio Button1”) {
$w(“#group4”).collapse();

    $w("#group3").expand(); 
} 

if ($w(“#radioGroup4”).value===“Radio Button2”) {
$w(“#group3”).collapse();

    $w("#group4").expand(); 
} 

if ($w(“#radioGroup4”).value===“Radio Button3”) {
$w(“#group3”).collapse();

    $w("#group4").expand(); 
} 

}

[al-learning]

Hi mattias,
I like to create radio buttons like the one you shown in the attached screen dumps where there’s an image attached/associated with each radio buttons, and each of the options quite evenly stretched apart from each other. Can you please advise how did you achieve that? Or any suggestions/hints also appreciated.

[mari]

Hi Mattias, thanks for the explanation.

I’m trying to make a Yes or No option on my page using radiobuttons. If the user checks the yes-button, I want “box2” to show. I tried using the code your wrote above, and changed (“#checkbox1”) with “yes” as this is the labelname of the button, but that didnt work. It says “yes” not a valid selector. How do I give each button a unique name to write in the code, as these two buttons are one element?

Thanks in advance!

Marte

[Guy_Rolls]

I know this thread is very old, but as a Wix newbie, I didn’t want to start a new thread when this is very close to what I want to achieve. Note: I am using Wix Editor, not Studio.

I have created a sports club site which has a Contact form, which works fine except I want 2 different recipients for Membership vs General enquiries. I can’t see an easy way of splitting out “Email Notifications”, so think an alternative is to have 2 identical-looking Contact forms, with different settings.

My idea to achieve this is a radio button group with values of Membership and General, which drives the collapse or expand of 2 strips - one strip having the Membership Contact form, the other the General form.

mikhail-spirin-wix’s solution near the top of the thread looks almost perfect.
I changed it to the code below, but I do not really know where to put it.
I created a js package (public, under my username) but can’t see how to link it to the page.
I tried putting the code into masterPage.js but when I Run, it does nothing.
BTW, I do see this message if I hover over the word EXPORT, but I don’t know what to do about it:
Modifiers cannot appear here.
Parsing error: ‘import’ and ‘export’ may only appear at the top level
$w.onReady(function () {

I feel as though I am quite close but…
I did say I was a newbie, and clearly not a developer, so please be gentle
“#RadioGroup1”, “Membership”, “General”, “#columnStrip4” and “#columnStrip5” all correctly reflect the values I am using in the Editor UI.

});

export function button1_click(event) {
console.log($w(“#RadioGroup1”).value);
if ($w(“#RadioGroup1”).value == “Membership”) {
$w(“#columnStrip5”).collapse();

	$w("#columnStrip4").expand();
} 

if ($w("#RadioGroup1").value == "General") {
	$w("#columnStrip4").collapse();
	
	$w("#columnStrip5").expand();
} 

}

});