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

"Show If" region based on dropdown selection

Thread began 8/21/2014 9:41 am by Jason | Last modified 8/27/2014 11:17 am by Jason | 835 views | 14 replies |

Jason

"Show If" region based on dropdown selection

Hey Jason, new day new challenge for you buddy.

I'm trying to use a "Show If" region to hide or display a list based on a selection in another list on the same page.

If the option "Weekly" which has a value of "weeks" is selected in the Repeats column, then the Repeat On list would display, but if any other option is selected it would be hidden.

You can view it live by going to the same url as yesterday and inserting a shift (same as yesterday), but checking the Recurring checkbox.

Attached Files
kids_insert_shift_recurring.php
Sign in to reply to this post

Jason ByrnesWebAssist

you cant do that using the show if behaivor, you need to hand code a javascript function to trigger on the onchange event of the list:
set the display for the recuring select list to none and add an id:

<select name="RecurOn" id="RecurOn" multiple style="display:none">



add the on change to the frequency list:

<select name="Frequency" onchange="toggleRecurOn(this.options[this.selectedIndex].value);">




and add the funcitn to the head:

<script type="text/javascript">
function toggleRecurOn(selection) {
var recurOnList = document.getElementById("RecurOn");
if(selection == "weeks") {
recurOnList.style.display = "block";
} else {
recurOnList.style.display = "none";
}
}
</script>




NOTE: this page has duplicate insert behaviors, you do not need the one that is in the body.

Sign in to reply to this post

Jason

I think

add the on change to the [/highlight]frequency list:[/highlight]

<select name="Frequency" onchange="toggleRecurOn(this.options[this.selectedIndex].value);">



was supposed to be

add the on change to the [/highlight]RecurType list:[/highlight]

<select name="RecurType" onchange="toggleRecurOn(this.options[this.selectedIndex].value);">



Right?

I tried it both ways, but neither worked.

Note: The second insert behavior is my next thread question. lol I removed it for now though.

Attached Files
kids_insert_shift_recurring.php
Sign in to reply to this post

Jason ByrnesWebAssist

I may have gooten it backwards, but whichever one should be initialy hidden needs to have the ID set, and the display:notn option, the one that should trigger the other toogle gets the onchange event,

in the onchange function, edit this line:
var recurOnList = document.getElementById("RecurOn");

to the id of the list should toggle.

Sign in to reply to this post

Jason

Still not working. Just to be sure I'm understanding you correctly, I'm going to take your code and replace all the list names with either List1 and List2 (The list that would show or hide based on List1 selection).


<select name="List2" id="List2" multiple style="display:none">




add the on change to the List1 list:

<select name="List1" onchange="toggleList2(this.options[this.selectedIndex].value);">





and add the funcitn to the head:
<

script type="text/javascript">
function toggleList2(selection) {
var List2List = document.getElementById("List2");
if(selection == "weeks") {
List2List.style.display = "block";
} else {
List2List.style.display = "none";
}
}
</script>



Does this look right?

Sign in to reply to this post

Jason ByrnesWebAssist

it looks correct, but i don't see that code in the page on your live server.

upload it to the server so I can troubleshoot.

Sign in to reply to this post

Jason

Sorry had to grab some food real quick. It's uploaded now.

Sign in to reply to this post

Jason ByrnesWebAssist

viewing source of the page on line, it still has the old element names and the old script?

Sign in to reply to this post

Jason

Sorry for the confusion, I didn't change the names in the actually page. I just wanted to verify I was inserting the correct name in the correct place.

List1 = RecurType
List2 = RecurOn

Sign in to reply to this post

Jason ByrnesWebAssist

It's working for me, and I Have even tried in windows IE 11 and Firer fox this time. It toggles an empty list, but it toggles.

try clearing your cache.

Sign in to reply to this post
loading

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...