Forums

Textbox Appear on drop down selection.

BFriend 06 Jun, 2014
Is there a way that I can have a certain text box appear based on a selection in a radio list (dropdown is fine too)? Basically, this is what I am doing:
First question is: Do you have a valid US Passport
if Yes:
2 Textboxes appear:
1: Passport Number
2. Passport Expiration Date (Date Picker)
If No:
1 Textbox appears (with a date picker)
1. Application Date

Can this be done? And if so, how? I am having a difficult time understanding the difference between this and a regular form as far as the coding. When I would do a regular HTML form, I could do it with JS, but it was a table row was hidden or visible. I am very new to CF, so I am trying to implement everything I can do in HTML/JS very quickly. If this CANNOT be done, is there another alternative (i.e. based on the selection I go to another form upon submit). I would much rather have to radio button display the textboxes. Thanks in advance.
GreyHead 06 Jun, 2014
Answer
1 Likes
Hi BFriend,

You can do this with JavaScript. I'd use Containers to 'wrap' the two alternatives then hide/show the whole container depending on the radio button selection.

For good housekeeping I disable and clear any hidden inputs - the disabling blocks any validation.

Bob
BFriend 13 Jun, 2014
I can't get it to work, at all! The sad truth is, the closest I was able to do was get it to partly work through CSS. There is nowhere I can add an "onclick" or "onchange" event for the radio button. Is there something I am missing?
GreyHead 14 Jun, 2014
HI BFriend,

The neatest way to do it in CFv4 is with the MooTools addEvent() method. For example:
window.addEvent('domready', function() {
  $('element_id').addEvent('click', function() {
    // some code here
  });
});
You'll find many examples in the forum and FAQs

Bob
BFriend 18 Jun, 2014
https://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2645-how-can-i-showhide-a-textarea-when-a-checkbox-is-clicked.html

I found this on the FAQs, what do I need to do to change it for radio buttons?
I am sorry this has to be dumbed down, I have never used MooTools and it is hard for me to get used to breaking the codes apart. I am used to the old school way of type, save, and test. Thanks for your advice!
GreyHead 20 Jun, 2014
Hi BFriend,

I think that you'd need to use the onChange event for the Passport radio buttons then check what the value of the selected button is and show/hide the other elements as needed.

Bob
This topic is locked and no more replies can be posted.