• 1

Read this first!

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 have an active subscription and wish to receive 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.

Thank you!

TOPIC: Show/Hide Text Box based on List Selection

Show/Hide Text Box based on List Selection 15 years 5 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.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5563

Can anyone help, I'm trying to finish these forms asap.:(
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5570

  • octavian
  • octavian's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 783
  • Thank you received: 110
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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 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.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5573

  • octavian
  • octavian's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 783
  • Thank you received: 110
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 \"field\" show up when the \"Other\" option is clicked. However, we currently don't have the field named \"field\". So just create a textbox, name it \"field\", 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 \"Other\" 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
The administrator has disabled public write access.
The following user(s) said Thank You: donmarvin

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5577

Strafe,

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

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!
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5578

  • octavian
  • octavian's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 783
  • Thank you received: 110
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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5579

Any additional attributes required?
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5580

  • octavian
  • octavian's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 783
  • Thank you received: 110
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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5581

thx for your help Strafe.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5585

works great! One last thing....how do I hide the field caption (text to left of field)?
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 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=\"if (this.value == 'Other') document.getElementById('field','field2').style.display = ''; else
document.getElementById('field','field2').style.display = 'none';\"
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5648

  • masgian
  • masgian's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 12
What if we need it hidden as initial state?
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 5 months ago #5651

  • octavian
  • octavian's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 783
  • Thank you received: 110
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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5775

My text field label is still showing on the hidden field, how do I hide the textbox and label?
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5777

Strafe any idea about the field caption...it's the last thing I need to address and the form is working.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5782

Bump....anyone?
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5788

  • arma
  • arma's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 16
Can't you just remove canption in fields configuration ?
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5792

It needs to appear when the textbox appears....I need them both to appear and hide at the same time.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5793

  • arma
  • arma's Avatar
  • 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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5794

I'm new with javascript, can you provide any sample code to help me? thx.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5797

  • arma
  • arma's Avatar
  • 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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 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{}
}
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5802

  • arma
  • arma's Avatar
  • 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 \"YourResetButtonId\" and \"YourElementId\" 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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 months ago #5823

I have RSForm Pro...not sure where this code should be entered.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 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-> list2 and so on..

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

Thanks in advance
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 15 years 4 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.
The administrator has disabled public write access.

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

  • Nuta
  • Nuta's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 5
When I use this code the form couldn't submitted. Is the same page onclick \"submit\". When I remove hidden fields everything ok! Are any ideas?
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 14 years 9 months ago #8012

I was looking for this.
thank you so much !
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 14 years 1 week ago #10288

  • komita
  • komita's Avatar
  • OFFLINE
  • Senior Boarder
  • Posts: 40
  • Thank you received: 1
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.
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 13 years 5 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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 13 years 1 month ago #13026

  • darshanm
  • darshanm's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
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: 13 years 1 month ago by darshanm. Reason: solved
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 12 years 11 months ago #13537

  • djsteven
  • djsteven's Avatar
  • 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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 12 years 11 months 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
The administrator has disabled public write access.

Re:Show/Hide Text Box based on List Selection 12 years 6 months 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=\"display: none;\" attribute on my text field. Am I missing something obvious here?
The administrator has disabled public write access.
  • 1

Read this first!

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 have an active subscription and wish to receive 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.

Thank you!