cforms II User Forum

Registration is currently disabled.
Guest

FAQs

Login form protected by Login LockDown.


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 Related Topics
Tutorial: Select Box selection shows hidden fields
August 23, 2010
6:56 pm
Julian
Guest

Hi there,

 

I see alot of threads here asking how to have a form that once you select something from a select box other hidden fields appear.

Now I had the same problem as a client requested this.

In this example he wanted a dropdown box "accommodation" and when you selected for example "hotel" then some radio buttons would appear with something like "5 star hotel" and "4 star hotel"… I guess you get the picture.

 

This is a simple jQuery solution but no one ever showed how to do it with cforms, so here we go:

(1) Download jquery (http://jquery.com/) and upload it to your ftp and remember that location. Also create a file called "jquery.toggleOptionalFields.js" and upload it to the same location.

(2) In your header.php of the theme somewhere between the <head> tags insert:

<script src="/path/to/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="/path/to/jquery.toggleOptionalFields.js" type="text/javascript"></script>

Of course edit the paths and filenames above but I hope you get the picture.

(3) In your cforms admin panel edit the form and give unique IDs (called "optional value"). For example my select box has "f3_way_travel_airplane" and "f3_way_travel_railway" and so on.

(4) Now browse to the page on your wordpress site where you are using the wanted cforms form. Have a look at the source code.

(5) Look for the <select> tag that in my example has the "hotel" entry in there and copy its ID. In my example it was "cf4_field_5".

(6) Now look for the item that you want to appear once you have selected "hotel". You also need the label to disappear. In my case those IDs were "li-4-6" and "li-4-6items".

(7) OK now let's set up that code that belongs in jquery.toggleOptionalFields.js:

$(document).ready(function() {

// several viewmaps as hide all wouldn't work without this

  // Preferred way to travel: link select entry to radio box

  $.viewMapcf4_field_2 = {

    '0' : $([]),

    'f3_way_travel_airplane' : $('#li-4-3, #li-4-3items'),

    'f3_way_travel_railway' : $('#li-4-4, #li-4-4items')

  };

  // Accomodation: link select entry to radio box

  $.viewMapcf4_field_5 = {

    '0' : $([]),

    'f3_accomodation_hotel' : $('#li-4-6, #li-4-6items'),

    'f3_accomodation_house' : $('#li-4-7, #li-4-7items')

  };

// hide everything on pageload

$.each($.viewMapcf4_field_2, function() { this.hide(); });

$.each($.viewMapcf4_field_5, function() { this.hide(); });

// ok now a function for every fieldset

  $('#cf4_field_2').change(function() {

    // hide all

    $.each($.viewMapcf4_field_2, function() { this.hide(); });

    // show current

    $.viewMapcf4_field_2[$(this).val()].show();

  });

  $('#cf4_field_5').change(function() {

    // hide all

    $.each($.viewMapcf4_field_5, function() { this.hide(); });

    // show current

    $.viewMapcf4_field_5[$(this).val()].show();

  });

});

 

This code is pretty self explanatory I hope.

Basically what you do is generate a viewMap where you link an entry in your select box to a whole set of radio buttons and its label.

Then you hide everything.

And then you have a function where you show just the one thing that you want to show.

 

This code is rather big as I wanted to show you that you have to do this for every fieldset.

 

I hope this helps some people out there.

August 24, 2010
6:34 pm
Paul
Amsterdam, NL
Moderator
Forum Posts: 421
Member Since:
February 10, 2009
Offline

Thanks for the contribution!

 

Paul.

* Paul Silter
October 5, 2010
8:41 am
mrtr33
Guest

Thanks for posting this, it's exactly the concept I'm going for.

 

I am using checkboxes, however, and if the checkbox is checked, the a single line textbox should appear.  I have been playing around with it, and while my textboxes aren't showing up on page load, they aren't appearing once checked, either:

form code:
<li id="li--2" class=""><label for="cf_field_2" class="cf-before"><span>Asparagus</span></label><input type="checkbox" name="cf_field_2" id="cf_field_2" class="cf-box-b"/></li>
<li id="li--3" class=""><label for="cf_field_3"><span>Description</span></label><input type="text" name="cf_field_3" id="cf_field_3" class="single" value=""/></li>

<li id="li--4" class=""><label for="cf_field_4" class="cf-before"><span>Broccoli</span></label><input type="checkbox" name="cf_field_4" id="cf_field_4" class="cf-box-b"/></li>
<li id="li--5" class=""><label for="cf_field_5"><span>Description</span></label><input type="text" name="cf_field_5" id="cf_field_5" class="single" value=""/></li>

jquery:
$(document).ready(function() {
    // Bind Asparagus and subsequent Description together
    $.viewMapcf_field_2 = {
        '0': $([]),
        'cf_field_2': $('#cf_field_3')
    };

    // Bind Broccoli and subsequent Description together
    $.viewMapcf_field_4 = {
        '0': $([]),
        'cf_field_4': $('#cf_field_5')
    };

    // hide everything on pageload
    $.each($.viewMapcf_field_2, function() { this.hide(); });
    $.each($.viewMapcf_field_4, function() { this.hide(); });

    // ok now a function for every fieldset
    $('#cf_field_2').change(function() {
        // hide all
        $.each($.viewMapcf_field_2, function() { this.hide(); });
        // show current
        $.viewMapcf_field_2[$(this).val()].show();
    });
    $('#cf_field_4').change(function() {
        // hide all
        $.each($.viewMapcf_field_4, function() { this.hide(); });
        // show current
        $.viewMapcf_field_4[$(this).val()].show();
    });
});

The obvious first problem is that the labels aren't generating a unique ID – I can't very well include the "" option in the Core Form Admin Options, as all of my secondary text-boxes are labeled "Description". 
Like I said, I'll keep playing around with it – if I find a solution, I'll post back to this thread.
Thanks for reading.

September 11, 2011
9:42 am
Jerry
Guest

This tutorial makes no sence. If have busy with this for two days now and nothing is working.

August 6, 2012
8:24 pm
Carlos
Guest

Doesn't work for me… I'm using radiobuttons and i just need that when "otro" is selected a textbox appears.

Thi is my jquery.toggleOptionalFields.js:

$(document).ready(function() {
  $.viewMapcf_field_2-5 = {
    '0' : $([]),
    'OTRO' : $('#OTRO, #li--3'),
   };
$.each($.viewMapcf_field_2-5, function() { this.hide(); });
  $('#cf_field_2-5').change(function() {
    $.each($.viewMapcf_field_2-5, function() { this.hide(); });
    $.viewMapcf_field_2-5[$(this).val()].show();
  });
});

Is there anything wrong with the code??

(anyway, there should be an "other-textbox" option in cforms… even google has done it ;-) )

Congrats for the plugin!

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
33 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: 3741

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5341

Posts: 18708

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

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

Administrators: Oliver (6400), Nicky (3)