How to have custom html input with Radio Buttons and/or Combobox buttons

[fliptoback]

Hi, I would like to have an input selection such that I can select say option 1, 2 and 3, but allow a custom input via say option 4. i.e. if I select the radio button for option 4, it then make visible the custom input dialog box.

I have the following code - but it is not working as what I intended - but I do not know how else to make this work. Any thoughts please?

'<p>Select: 
'<input name="target2" type="radio" id="opt1" value="1"/>
'<label for="opt1">Option 1</label>
'<input name="target2" type="radio" id="opt2" value="2"/>
'<label for="opt2">Option 2</label>
'<input name="target2" type="radio" id="opt3" value="3"/>
'<label for="opt3">Option 3</label>
'<input name="target2" type="radio" id="opt4" value="4"/>
'<label for="opt3">custom</label>
'...
'<p id="target2" style="display:none;">Value -'OptionClass = ? {1}'</p>

#if OptionClass ≡ 1
Selection = 10
#else if OptionClass ≡ 2
Selection = 20
#else if OptionClass ≡ 3
Selection = 30
#else
'Custom'Selection = ? {40}
#end if

[strsthapa]

You need to go to compile to input form (F4 shortcut key or click it from top mid-on left of play button)

[fliptoback]

You need to go to compile to input form (F4 shortcut key or click it from top mid-on left of play button)

Thanks. But pressing F4 gives me this (pls see screenshot).

Essentially what i would like is this. The user can click option 1, 2 and 3 radio buttons and the text field for custom input is hidden - and will only be made visible when i click option 4.

[strsthapa]

There might be other ways too, this one works with combn of output visibility controls

'<p>Select: 
'<input name="target2" type="radio" id="opt1" value="1"/>
'<label for="opt1">Option 1</label>
'<input name="target2" type="radio" id="opt2" value="2"/>
'<label for="opt2">Option 2</label>
'<input name="target2" type="radio" id="opt3" value="3"/>
'<label for="opt3">Option 3</label>
'<input name="target2" type="radio" id="opt4" value="4"/>
'<label for="opt4">custom</label>
'<p id="target2" style="display:none;">Value -'OptionClass = ? {4}'</p>
'
#post
#if OptionClass ≡ 1
Selection = 10
#else if OptionClass ≡ 2
Selection = 20
#else if OptionClass ≡ 3
Selection = 30
#else if OptionClass ≡ 4
#show
#input
'Custom'Selection = ? {40}
#post
Selection
#end if

[fliptoback]

There might be other ways too, this one works with combn of output visibility controls

'<p>Select: 
'<input name="target2" type="radio" id="opt1" value="1"/>
'<label for="opt1">Option 1</label>
'<input name="target2" type="radio" id="opt2" value="2"/>
'<label for="opt2">Option 2</label>
'<input name="target2" type="radio" id="opt3" value="3"/>
'<label for="opt3">Option 3</label>
'<input name="target2" type="radio" id="opt4" value="4"/>
'<label for="opt4">custom</label>
'<p id="target2" style="display:none;">Value -'OptionClass = ? {4}'</p>
'
#post
#if OptionClass ≡ 1
Selection = 10
#else if OptionClass ≡ 2
Selection = 20
#else if OptionClass ≡ 3
Selection = 30
#else if OptionClass ≡ 4
#show
#input
'Custom'Selection = ? {40}
#post
Selection
#end if

Thanks strsthapa! I managed to get the same behavior following your revised code.