Hi!
So I’m trying to create a really simple form for an event registration - but I’m having a coding issue. there are three different types of ‘plus one’ options I want to implement via radio buttons, which I have, then the following input text box asks for the names of potential others who would come with the person filling out the form. It goes something like:
◯ Just me coming
◯ I’m bringing a plus one not named on my invitation
◯ I’m registering for other people named on my invitation
(input box) [ Name(s) of additional attendees]
Naturally, I want the input box to be disabled if the first radio button is selected, but enabled and required if any of the other two radio buttons are selected.
My current code is this, but it doesn’t seem to work at all - the input box stays enabled no matter what I do - and if I go to its settings and don’t enable it by default, it stays disabled no matter what I do!
FYI #input6 is the form field callsign of the input box, and #radioGroup1 is that of the radio buttons. Any help would be appreciated! Thank you!
Hi, the code below works for me, checking the selected index might be better than comparing the actual value, hope this helps.
$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(“#input6”).hide();
$w(“#input6”).disable();
});
export function radioGroup1_change(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(“#text7”).text="selected index is "+selectedIndex;
//if 3rd option selected if (selectedIndex==2) {
// debug message
$w(“#text7”).text=“into if loop of 3rd option selected”;
$w("#input6").show();
$w("#input6").enable();
} **else** {
//debug message
$w("#text7").text="into else of if loop of 1st/2nd option selected";
//either hide and disable or just one of them
$w("#input6").hide();
$w("#input6").disable();
}
Thanks for sharing this…it JUST what I need. But I can’t seen to get it to work on my site
I have modified the code so it should show four fields instead of just one field when a specific option is chosen. 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.
My code looks like this:
$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”;
//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();
}
}
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 You or someone else please help my solve the problem - thanks in advance…
