Show/hide fields in Wix Forms with code

Ask the community
, ,
1

I want to show/hide four form fields when a specific option is chosen in an option Group in the start of the form - and I have written this code:

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

//this hides the input box when page is first shown
//either hide and disable or just one of them
$w(“#input9”).hide();
$w(“#input9”).disable();
$w(“#input10”).hide();
$w(“#input10”).disable();
$w(“#input11”).hide();
$w(“#input11”).disable();
$w(“#input12”).hide();
$w(“#input12”).disable();
});
export function radioGroup1_change1(event) {
//Add your code for this event here:
let selectedIndex = $w(“#radioGroup1”).selectedIndex;
// a text for debugging purpose, showing the index number of selected option (started from 0)
$w(“#text13”).text="selected index is "+selectedIndex;
//if 3rd option selected

if (selectedIndex === 2) {
// debug message
$w(“#text13”).text=“into if loop of 3rd option selected”;

$w(“#input9”).show();
$w(“#input9”).enable();
$w(“#input10”).show();
$w(“#input10”).enable();
$w(“#input11”).show();
$w(“#input11”).enable();
$w(“#input12”).show();
$w(“#input12”).enable();
} else {

//debug message
$w(“#text13”).text=“into else of if loop of 1st/2nd option selected”;

//either hide and disable or just one of them
$w(“#input9”).hide();
$w(“#input9”).disable();
$w(“#input10”).hide();
$w(“#input10”).disable();
$w(“#input11”).hide();
$w(“#input11”).disable();
$w(“#input12”).hide();
$w(“#input12”).disable();
}
}

It works fine in the start of the code…the four fields are hidden as they should - BUT when I chose the option that should SHOW the four fields NOTHING happens.

Annother thing: My Code Editor states that I should use three “=” signs in the If sentence “if (selectedIndex === 2)” and not just two as written in your code - but it’s not do any difference if I use two or three equal signs.

Can someone please help me solve the problem - thanks in advance…

You can se my page online at: https://www.umanart.dk/kontakt-bestilling

Best Regards
Ulf, Denmark

2

First off, if you are going to do all this, then you are much better just making up your own user input form yourself in Wix and using the code to make it all happen, as that way you can have complete control over everything that happens and what you do with it.
https://support.wix.com/en/article/creating-a-form-with-user-input-elements

Not saying that Wix Forms app is not to be used, however that is more for people who want it all done for them and not really have to code anything themselves.

Secondly, for using radio button groups in code, then see the Wix API Reference here.
https://www.wix.com/corvid/reference/$w.RadioButtonGroup.html

Have a read of that and redo do your code to suit and if you still have issues, then please come back and post here again.

3

Also, whilst in the API Reference, have a look at show and hide.
https://www.wix.com/corvid/reference/$w.HiddenCollapsedMixin.html

And also expand and collapse too.
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html

Note that there is a difference between the hide function and the collapse function, where hide just hides it on the page and it still takes up space, whereas collapse removes it from the page and it doesn’t take up any space, which is stated in the info as well.

If you want to disable things too, then you need to be using disable as show here.
https://www.wix.com/corvid/reference/$w.DisabledMixin.html

4

Here is a quick sample of something you can do with the radio buttons that I had done previously for others.

https://givemeawhisky.wixsite.com/radiobuttonexample/blank-1

$w.onReady(function () {
});

export function radioGroup1_change(event) {
if ($w('#radioGroup1').value === 'YES') {
$w('#additionalElement').show();
} else {
if ($w('#radioGroup1').value === 'NO') {
$w('#additionalElement').hide();
}
}
}

This one below is through onClick event, however you can easily change it to be onChange event instead.

https://givemeawhisky.wixsite.com/radiobuttonexample

$w.onReady(function () {
});

export function button1_click(event) {
if ($w('#radioGroup1').value === 'London') {
$w('#correctMessage').show();
$w('#wrongMessage').hide();
} else {
if ($w('#radioGroup1').value === 'Paris' || $w('#radioGroup1').value === 'New York') {
$w('#wrongMessage').show();
$w('#correctMessage').hide();
}
}
}

export function button2_click(event) {
if ($w('#radioGroup1').value === 'London') {
$w("#button2").style.backgroundColor = "green";
$w("#button2").style.color = "yellow";
$w('#button2').label = "CORRECT!";
} else {
if ($w('#radioGroup1').value === 'Paris' || $w('#radioGroup1').value === 'New York') {
$w("#button2").style.backgroundColor = "red";
$w("#button2").style.color = "yellow";
$w('#button2').label = "WRONG!";
}
}
}

export function button3_click(event) {
$w('#radioGroup1').value = "";
$w('#radioGroup1').resetValidityIndication();
$w("#button2").style.backgroundColor = "#384AD3";
$w("#button2").style.color = "white";
$w('#correctMessage').hide();
$w('#wrongMessage').hide();
}
5

@givemeawhisky Many many thanks for your outstandig answer and help :slight_smile: - I’m allready a good bit futher, thanks to the refferences you har provided me with :slight_smile:

6

GOS, this was a great help to me too, thanx