cforms II User Forum » delicious:days

Add Reply

Add Topic

Topic RSS

Show/Hide Field Based on Option Value in Select Box (So Close!)

Show/Hide Field Based on Dropdown Selection

November 21, 2012
9:04 pm

Browndog

Guest

Quote

First off, awesome plugin! I know a lot of users have asked about conditional fields, and I think I've gotten pretty close to making this work via CSS/Javascript.

I am trying to use javascript to show/hide the field Return Time on this page based on the Type of Trip selectbox:

One Way: Return Time should be hidden
Round Trip: Return Time should be shown

Here's what I've done, based on Oliver's recommendations in this forum post.

cforms main config page: turned on 'Use custom input field NAMES & ID's'
cforms main config page: added a [id:TripType] to the selectbox label, e.g.: Type of Trip[id:TripType]
cforms styling page: activated both 'List element IDs & Label IDs'
found element I want to show/hide (#li–8)
copied rt_javascript.js into my WP theme folder
added link to it from within my WP header.php file. Put the reference right before thetag, in order to keep from a conflict with JQuery.

Here is the javascript code I'm using (rt_javascript.js):

$("#TripType").change(function() {
  $("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();

I have the code working perfectly here: http://jsfiddle.net/MS4Ck/

Unfortunately, it's not working on the live page: karmajets.com/quote (hyperlink above)

Does anyone have any ideas? I've tried to debugging via my browser's console and also Firebug, and I'm not seeing any errors. I know the javascript is being called because I tried throwing an alert into the javascript file, and it did come up. I am not very code-savvy; I've done all of this just based on trial/error and reading lots of forum posts and stackoverflow recommendations.

If you guys can help me get this working, I think it would be a really good foundation for other people that want to have conditional fields based on selectboxes/dropdowns. Thank you so much!

November 21, 2012
9:26 pm

Browndog

Guest

Quote

Figured this out! The function had to wrapped in a docReady function:

$(document).ready(function() {
    $("#TripType").change(function() {
        $("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
    }).change();
});

However, I'm still stumped because I actually need to show/hide both li–8 and li–7. Any ideas how to add li–7 to the code?

Add Reply

Add Topic