cforms II User Forum

Registration is currently disabled.
Guest

FAQs

Lost password?
Advanced Search:

— Forum Scope —



— Match —



— Forum Options —




Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

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

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

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?

July 3, 2013
7:12 pm
MisterSadman55
Guest

Browndog,

How were you able to get style="display: none;" to be added to the li elements for #li--7 and #li--8? I've looked through your code on your karmajets.com site, but cannot see where you are setting that. Is it something you have figured out in the cforms administration area?

Thanks.

July 8, 2013
10:37 pm
MisterSadman55
Guest

I figured out the problem. My theme's version of jQuery needed to be updated. I have it working now. Thank you.

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
25 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

tracedef: 43

mores: 21

Gyrus: 20

frozenwaste: 18

asuffredini: 15

photoworks: 14

Member Stats:

Guest Posters: 3712

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5310

Posts: 18671

Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass

Moderators: Paul (421), cnymike (8), sonika (95)

Administrators: Oliver (6400), Nicky (3)