Unfortunately, the username and password you have entered do not match!
Not a member? Register | Lost your password?
Forgot your username? | Login with order number
Close Panel

Registration

Unfortunately, this username is already taken!

Unfortunately, this e-mail address is already used!

Please retype the verification code.

All fields are required

Close Panel

Show/Hide Text Box based on List Selection

Welcome, Guest
Username Password: Remember me
Forgot your password? Forgot your username? Create an account
RSJoomla! Forum
Joomla! Components
RSForm!

Show/Hide Text Box based on List Selection
(1 viewing) (1) Guest
Reply Topic
New Topic
  • Page:
  • 1

TOPIC: Show/Hide Text Box based on List Selection

Show/Hide Text Box based on List Selection 3 years, 6 months ago #5560

I have read the knowledge base on how to show/hide a form field based on a radiobox selection but I'm having problems creating the same effect from a dropdown list selection. I'm not a strong Javascript coder so the more detail I can get the better. I have a list with 5 options. The last option is \"Other\", if selected I'd like a text field to appear so the user can enter additional details. I need to know what the script should be in the form layout page as well as the additional attributes in the element window.

Thanks.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5563

Can anyone help, I'm trying to finish these forms asap.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5570

Hello,

If you setup a dropdown with an item in the items list named exactly \"Other\", on the additional attributes insert this code:
 
onclick=\"if (this.value == 'Other') document.getElementById('field').style.display = ''; else document.getElementById('field').style.display = 'none';\"
 


Remember to replace \"field\" with the name of the field you want to hide, and use this additional attribute so the field won't show up when the form displays:
style=\"display: none;\"
<br><br>Post edited by: strafe, at: 2008/11/14 20:24
Please note: my help is not official customer support. To receive your support, submit a ticket by clicking here
Regards,
RSJoomla! Development Team
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5571

Strafe, thanks for the reply.

Not quite sure I understand...I need to create a hidden radio box to achieve what I need? My thinking was selecting an item from the dropdown list and based on my selection have the text field appear below the dropdown for additional details.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5573

Let me explain.
You have your dropdown with several options (items). Let's say these are the items:
 
High school graduate
College graduate
Other
 

This dropdown has the following additional attribute:
 
onclick=\&quot;if (this.value == 'Other') document.getElementById('field').style.display = ''; else document.getElementById('field').style.display = 'none';\&quot;
 


What I've done is I made a form field called \&quot;field\&quot; show up when the \&quot;Other\&quot; option is clicked. However, we currently don't have the field named \&quot;field\&quot;. So just create a textbox, name it \&quot;field\&quot;, and put the following additional attribute:
 style=\&quot;display: none;\&quot;

This will initially hide the textbox, so the user won't see it unless he clicks on the \&quot;Other\&quot; option.

Hope this works for you !<br><br>Post edited by: strafe, at: 2008/11/14 20:24
Please note: my help is not official customer support. To receive your support, submit a ticket by clicking here
Regards,
RSJoomla! Development Team
Reply Quote
The following user(s) said Thank You: Donna

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5577

Strafe,

Sorry about the confusion, I don't think I was clear. I have a dropdown list\&quot;

option1
option 2
option 3
option 4 (this is my other option)

If I pick option 4 from the list I need the text field to appear. Thanks for your patience, I'm pulling my hair out here!
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5578

Sorry, I've mistaken - but if you want to use a dropdown, the solution stays the same.
Please note: my help is not official customer support. To receive your support, submit a ticket by clicking here
Regards,
RSJoomla! Development Team
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5579

Any additional attributes required?
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5580

Do exactly what I've described in my post. Read it step by step, but instead of a radiogroup use a dropdown. I'll edit my post so it says dropdown.
Please note: my help is not official customer support. To receive your support, submit a ticket by clicking here
Regards,
RSJoomla! Development Team
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5581

thx for your help Strafe.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5585

works great! One last thing....how do I hide the field caption (text to left of field)?
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5610

this is a great feature.

quick question, How can I hide two textfields, instead of just one?

I've tried the following but i doesn't work:

onclick=\&quot;if (this.value == 'Other') document.getElementById('field','field2').style.display = ''; else
document.getElementById('field','field2').style.display = 'none';\&quot;
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5648

What if we need it hidden as initial state?
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 6 months ago #5651

Hello,

Read the whole topic; I've explained that you need to use the
style=\&quot;display: none\&quot;

additional attribute on the field you need to hide.

Regarding hiding 2 or more fields:
The getElementById function expects only one parameter, that's why it doesn't work.
Go to the Form Layout tab, disable the autogenerate form layout feature and paste this code at the bottom:
 
&lt;script type=\&quot;text/javascript\&quot;&gt;
function hide_all(what)
{
 if (what.value == 'Other')
 {
 document.getElementById('field1').style.display = 'none';
 document.getElementById('field2').style.display = 'none';
 }
 else
 {
 document.getElementById('field1').style.display = '';
 document.getElementById('field2').style.display = '';
 }
}
&lt;/script&gt;
 


Now, edit the dropdown and use this additional attribute:
onchange=\&quot;hide_all(this);\&quot;


You can use as many fields as you want.
Please note: my help is not official customer support. To receive your support, submit a ticket by clicking here
Regards,
RSJoomla! Development Team
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5775

My text field label is still showing on the hidden field, how do I hide the textbox and label?
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5777

Strafe any idea about the field caption...it's the last thing I need to address and the form is working.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5782

Bump....anyone?
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5788

  • Andrew
  • OFFLINE
  • Fresh Boarder
  • Posts: 16
Can't you just remove canption in fields configuration ?
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5792

It needs to appear when the textbox appears....I need them both to appear and hide at the same time.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5793

  • Andrew
  • OFFLINE
  • Fresh Boarder
  • Posts: 16
Well then you can use javascript above to do it but you could do it not to field itself but give your div or td wich ever you use a id and hide whole div/td
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5794

I'm new with javascript, can you provide any sample code to help me? thx.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5796

OK...I figured it our....now I need to be able to reset the form and have the fields hide when the reset button is clicked...any ideas
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5797

  • Andrew
  • OFFLINE
  • Fresh Boarder
  • Posts: 16
Well you can do it by adding almost same javascript to reset buttons id.

1) add this inside your existing javascript code in Form style:
function goreset() {
	 if (document.getElementById('YourResetButtonId')) {
	 document.getElementById('YourElementId').style.display = 'none';
 }else{}
}


2)Then just add this to yours reset buttons Aditional attributes:
onclick=\&quot;goreset();\&quot;

Note: YourElementId is the same that you used in previous javascript(the one you want to hide).
Im not too familar with javascript but that should do it.<br><br>Post edited by: arma, at: 2008/11/28 18:22
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5799

where is the form style? Not sure where to paste this code.

function goreset() {
if (document.getElementById('YourResetButtonId')) {
document.getElementById('YourElementId').style.display = 'none';
}else{}
}
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5802

  • Andrew
  • OFFLINE
  • Fresh Boarder
  • Posts: 16
Where did you put that previous javascript code ? That one to hide fields.
And witch version of rsForm you got again ?

If you got RSForm then :

1)login to you backend
2)goto components RSform!
3)take forms manager
4)pick a form you are interested in
5)and to the left of that form configuration you should see tabs like - Form Edit | Form Style | Thank You | Emails | Scripts
6)pick Form Style tab and enter code there. Don't forget to change \&quot;YourResetButtonId\&quot; and \&quot;YourElementId\&quot; to yours.

If you have no Form Style tab let me know you can always use javascript file include in you template.<br><br>Post edited by: arma, at: 2008/11/29 13:27
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5823

I have RSForm Pro...not sure where this code should be entered.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5874

thanks a lot for the great example... i got this working but i need the following setup... i have listA with values A,B,C then i have 3 other lists (list1,list2,list3) which i need to stay hidden. when a user clicks on item A i need list1 to appear... B-&gt; list2 and so on..

by follwoing this guide i can only get it to work for the first list only...

Thanks in advance
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 5 months ago #5955

I was wondering about applying this method to multiple file uploads. I have seen several posts requesting the ability to do multiple select in the file upload window. Perhaps another option would be to do what gmail does. When you select a file for upload, a second upload field appears; then a third...

Would it be possible to do something like this in the RSFormPro?

Could Strafe or someone else suggest the code for such a set up.
Reply Quote

Re:Show/Hide Text Box based on List Selection 3 years, 4 months ago #6106

  • Anna
  • OFFLINE
  • Fresh Boarder
  • Posts: 5
When I use this code the form couldn't submitted. Is the same page onclick \&quot;submit\&quot;. When I remove hidden fields everything ok! Are any ideas?
Reply Quote

Re:Show/Hide Text Box based on List Selection 2 years, 10 months ago #8012

I was looking for this.
thank you so much !
Reply Quote

Re:Show/Hide Text Box based on List Selection 2 years, 1 month ago #10288

I still can't get the hiding of the description to work. I have a conditional field within another conditional field (I click one radio button it hides two fields-works great including hiding the description; but on a second field that's visible with the other radio selection, I click "other" and it hides the field but not the description). It all works fine except the caption doesn't get hidden with the fields.

<li id="hide">
<div class="formCaption">{frequencycontinuing:caption}</div>
<div class="formBody">{frequencycontinuing:body}<span class="formClr">{frequencycontinuing:validation}</span></div>
<div class="formBody">{frequencyother:body}<span class="formClr">{frequencyother:validation}</span></div>
<div class="formDescription">{frequencyother:description}</div>
</li>

Thanks for additional help.
Reply Quote

Re:Show/Hide Text Box based on List Selection 1 year, 7 months ago #11731

the code is messed up. I need to do the same. please send me the code u use, can u do that?

Thomas
Reply Quote

Re:Show/Hide Text Box based on List Selection 1 year, 2 months ago #13026

Sorry admin....i fixed it now.....you can delete this post....thanks

Hi,

I have implemented this into RsForm (not the pro version). It works fine in FF but it doesn't work in Chrome, IE and Safari.

The code is as below:

for country select list:
 
<select name="form[country][]" onchange="if (this.value == 'Australia') document.getElementById('state').style.display = ''; else document.getElementById('state').style.display = 'none';" id="country" >
 


and I have got a select list with id="state"

Can anyone please help me to fix this to work in all browsers

Thanks,
Darshan
Last Edit: 1 year, 2 months ago by darshanpm. Reason: solved
Reply Quote

Re:Show/Hide Text Box based on List Selection 1 year ago #13537

  • Steven
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
adamevans,

This is the code

onclick="
if (this.value == 'option 4') document.getElementById('helement').style.display = ''; else document.getElementById('helement').style.display = 'none';";
 
In the Form Layout code is this
 
<tr id="helement">
		<td>{Name:caption}</td>
		<td>{Name:body}<div class="formClr"></div>{Name:validation}</td>
		<td>{Name:description}</td>
	</tr>

Note: All this code is without the symbol \

I think this can help

Regards from Costa Rica
Reply Quote

Re:Show/Hide Text Box based on List Selection 1 year ago #13626

Hey all!
I cant get this to work.
I tried the exact solution in the first post but only succeded in hiding a field.

It seem to me as this post is missing the code to put in Scripts tab for the form
Reply Quote

Re:Show/Hide Text Box based on List Selection 7 months, 1 week ago #15137

Ok, I've got things set up exactly, but the text field shows immediately when the form is loaded. I only want it to show if "Other" is chosen from the background. I've got the style=\&quot;display: none;\&quot; attribute on my text field. Am I missing something obvious here?
Reply Quote

Re:Show/Hide Text Box based on List Selection 5 hours, 1 minute ago #0

Hello,
This is an automatically generated message.
We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you wish to receive our support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here: http://www.rsjoomla.com/support-policy.html.

Thank You!
PLEASE NOTE: This topic is NOT locked and you can add replies to it. Other users are free to reply as well. This message has been generated by a bot and has no effect on the topic whatsoever.
Reply Quote
Reply Topic
New Topic
  • Page:
  • 1
RSJoomla! Forum
Joomla! Components
RSForm!
Moderators: Alex, Alexandru Plapana, Octavian Cinciu, Wilco Alsemgeest
Powered by Kunena
Time to create page: 3.21 seconds
Feedback