How do I show/hide groups based on a drop down selection?

[cheesegrits]

Ooops! Fixed. Thanks for letting me know.

Glad the SVN fix worked for ya.

-- hugh

 

[Mikmac]

Group hidden again on reload of the form

Hi, This script works nicely for me, however found one little issue.

As a result of selecting one of the items in the drop down menu a group shows in the form. so far all good.
But on submit of the form if there are fields empty that are not allowed to be empty (validated as not empty) then you return to the form. However now the group(s) that initially showed upon the dropdown are hidden again!
The dropdown choice is still the same, but you will have to do make an "onchange" of the dropdown again to get the group showed again. Not userfriendly ofcourse.

Any ideas? For me it is actually only one group that would hide or show. Maybe do this not with an onchange but an onfocus event and then specify which value focussed?

Thanks

ps I will subscribe soon, takes a day or two to get my paypal account ready.

 

[cheesegrits]

The only way I can think of off the top of my head would be to add some form JS, using a 'domready' event. Select $$('.fabrikerror'), and if it is not null, show all the groups.

You could get a little cleverer by getting the parent of the parent of second and subsequent occurences of that class, which would give you the group they are in, and only show those. But that could get a little fiddly.

-- hugh

 

[orthodoxkohen]

Not working

I have a dropdown element with the following
Value - Label
0 - select
1 - Credit Card
2 - Electronic Check

I have 2 groups set to hidden

ID 24 - CC Info
ID 25 - Check Info

I set a javascript to change with the following script:

//get the current value of the product drop down
var v = this.getValue();

// this is our object that maps the product drop down values (1 & 2) to the group html ids
var groups = {
 1:'group24',
 2:'group25'
};

//get the html id of the group to show
var groupToShow = groups[v];

//loop over all the groups we defined in the object 'groups'
for (var i in groups ){
 //if the current group is the one to show - show it
 if(groups[i] == groupToShow){
  $( groups[i] ).show();
 }else{
  //otherwise hide it
  $( groups[i] ).hide();
 }
}

I'm not getting any response on change. Please help. You can see the form here.
http://65.254.66.20/site2/index.php...ekey=&random=0&fabriklayout=default&Itemid=98

Thanks.

 

[cheesegrits]

Actually I can't see it 'cos it needs a login.

Try removing the comment lines (// blah) from the JS, see if that helps.

-- hugh

 

[orthodoxkohen]

Javascript and Comments

I removed the comments and the script is working perfectly.

Thanks

 

[omar]

Multiple Groups & Hiding Showing Issue

Hi Guys,

First of all is it possible to show 2 groups based on a selection? Me tried all kinds of adjustments to the JS { 1:'group6'&'group7', 2:'group5'}/{ 1:'group6'and'group7', 2:'group5'}
but have no clue whatsoever on how to get this working and if it is actually possible, so please let me know.

Now this works fantastic on a testform I have, I have 1 group with the select box, and 2 hiddin groups. Now if I move all 3 groups to another form I already have, it simply doesnt do anything...

Any ideas?

Cheers

 

[tedevang]

I'm having the same issue - I need to show/hide groups of groups and the show only works with one group at a time. Is there an approach to this without having to create multiple forms?

-Ted

 

[cheesegrits]

Hmmm. You'd need to re-write it as an array of arrays, which I'm not entirely sure how to do in JS off the top of my head.

If you want to bump this thread in a few days (or probably next week some time) I can have a go, but right now I'm a little swamped with some bug hunting in 2.0.

-- hugh

 

[tedevang]

I know - some of those are probably my bugs Even though it's posted as a reply to a 1.0 issue, I'm actually working in 2.0 in case that makes a difference.

-Ted

 

[omar]

Okay guys, I have no Idea what I am doing as I have never programmed anything, but I have just been trying to figure this out for the past 12 hours..... finally put a code together with which I can hide/show unlimited amount of groups depending on a selection from a drop down box. I am sure that there must be a far easier way to write this but I will leave it to the experts to ammend it. (this code has been limited to 3 groups, ammend as required)

switch (this.getValue())
{ case '1':
$('group1').show()+$('group2').hide()+$('group3').hide();
break;
case '2':
$('group1').hide()+$('group2').show()+$('group3').show();
break;
case '3':
$('group1').show()+$('group2').show()+$('group3').show();
break;
default:
$('group1').hide()+$('group2').hide()+$('group3').hide();
}

 

[Hulls]

Cant get an error let alone it to work PLEASE HELP !!!!

Using the code supplied in a drop down menu

//get the current value of the product drop down
var v = this.getValue();

// this is our object that maps the product drop down values (1 & 2) to the group html ids
var groups = {
1:'group4',
2:'group5'
};

//get the html id of the group to show
var groupToShow = groups[v];

//loop over all the groups we defined in the object 'groups'
for (var i in groups ){
//if the current group is the one to show - show it
if(groups == groupToShow){
$( groups ).show();
}else{
//otherwise hide it
$( groups ).hide();
}
}


I have tried stripping out the comments but get the same effect I am using the latest version of fabrik and have update to the latest SVM

I use firebug to see whats happing and I cant even see the js execute

I am using a Rockethtme template ( Dimensions )


It hosted locally and it has no connection the outside world so I cant give you a link




Please help


Dave Hulls

 

[cheesegrits]

Without being able to see your site, I really can't help much.

Main thing is make sure the id's and groups match up in the 'groups' array. The id's need to be the 'values' you have set in your dropdown, and the groupX needs to match the HTML ID of the groups on the page (check your page source).

-- hugh

 

[Hulls]

Hide groups from buttons but not drop downs

Hi I have managed to get hiding and unhiding groups working with a button but drop drop down still not working .

Can someone please supply the code and only the code so all I have to do is change the group id sorry for being a pain but it has me stumped .

 

[rob]

you'll have to post a url to the form for us to help you really

Cheers
Rob

 

[cheesegrits]

Are you on a broadband connection? If so, it should be easy enough to configure your router to allow http connections to your local server.

-- hugh

 

[pierke]

Stuck with group hiding/showing

Built the form, loaded the code, nothing happens. I updated the SVN and tried all the different versions of the script in this thread. Would appreciate it if somebody could help me on this matter. Will provide super admin login details and URL if asked.

Pierre

 

[cheesegrits]

PM me, but it'll probably be a couple of days before I can take a look.

-- hugh

 

[rdbean]

Is this still the best way to do this in 2.0?

 

[cheesegrits]

Nope. We now have some built in support for this (although it's not yet perfect). Under the JavaScript settings on each element, you'll find some options for "hide/show" options. So, for instance, you can "hide group X when this dropdown is set to No".

-- hugh