close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

drop down hiding/showing selections

Thread began 12/03/2014 11:10 am by Jamie | Last modified 12/04/2014 12:23 pm by Jason Byrnes | 285 views | 5 replies |

Jamie

drop down hiding/showing selections

Hey Jason

Am trying to modify this to show different elements based on the drop down selection.

My drop down consists of 'Sponsors', 'Premium', 'Exhibitors' and 'Media'

SponsorsName is visible to all three

If you select 'Premium' the SponsorsLink input only (as well as SponsorsName)

If you select 'Sponsor' or 'Media' the SponsorsLink input and SponsorsImage upload should show (as well as SponsorsName)

I have tried playing around with the code that you showed me on this thread - http://www.webassist.com/forums/posts.php?id=35445 - but cant get it to work based on the above criteria.

so far I have

<script  type="text/javascript">
function setTextField() {
var theList = document.getElementById("SponsorsType");
var theText = document.getElementById("SponsorsLink");
var theSelectedValue = theList.options[theList.selectedIndex].value;
if((theSelectedValue == "Sponsor") || (theSelectedValue == "Premium") || (theSelectedValue == "Media")) {
theText.style.display = "block";
} else {
theText.style.display = "none";
}
}
</script>



which shows 2 fields, SponsorsName (by default) for all 4, but only the SponsorsLink for 'Sponsors', 'Premium' - whatever I have tried I cannot get it to work based on if Sponors is selected, then all three elements show.

Also, in the attached _update page, if I navigate to it and the entry is, for example either a premium or sponsor entry, then the hidden fields arent showing by default. You have to toggle them on by using the drop down.

As always, many thanks

Jamie

Sign in to reply to this post

Jason ByrnesWebAssist

first off, change the IDs for the div around the link and image upload, you are using the same ID as the elements themselves. the following code is based on using the IDs "SponsorsLinkDIV" and "ImageUploadDIV"

next, you need to add a variable for the ImageUploadDIV and another if statement to show or hide it based not he select value. I'm not 100% I have your exact requirements right, but this should get you on the right foot:



<script  type="text/javascript">
function setTextField() {
var theList = document.getElementById("SponsorsType");
var theLinkDiv = document.getElementById("SponsorsLinkDIV");
var theUploadDiv = document.getElementById("ImageUploadDIV");
var theSelectedValue = theList.options[theList.selectedIndex].value;
//Show the link?
if((theSelectedValue == "Sponsor") || (theSelectedValue == "Premium") || (theSelectedValue == "Media")) {
theLinkDiv.style.display = "block";
} else {
theLinkDiv.style.display = "none";
}
//Show the upload?
if((theSelectedValue == "Sponsor") || (theSelectedValue == "Media")) {
theUploadDiv.style.display = "block";
} else {
theUploadDiv.style.display = "none";
}
}
</script>
Sign in to reply to this post

Jamie

Thats brilliant, thanks Jason

Not sure why this would be happening, but when you enter the _update page of an existing entry, the correct item is pre-selected in the drop down, but none of the hidden fields are shown until you select a different option in the drop down and then go back to the original item

Thanks

Jamie

Sign in to reply to this post

Jason ByrnesWebAssist

call the setTextField() function just before the closing body tag:

<script type="text/javascript">
setTextField()
</script>

Sign in to reply to this post

Jamie

awesome thanks mate

Jamie

Sign in to reply to this post

Jason ByrnesWebAssist

you're welcome.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...