I need help, again, with the radio buttons, again…
This time I wanted to try making some radio buttons get disabled when you select an certain option. For example: when I select the color Red, the shape Circle won’t be available (grayed out). Or you can take the color Blue, but not the shape Triangle.
Also I want some options to be checked by default, like in the example. But when these options are checked, the total price wont be shown until you select something else. So the javascript needs to load the total of the selected item before a radio button has been pressed. Can’t get my head around this code.
Is it also possible to make a question mark appear next to the grayed out option so people can hover over and see a message why this is grayed out? For example: Sold Out or Not Available.
Sorry for the long question but I’m really excited to get this working right.
On Nov 13, 2015, at 5:47 AM, Frans Boumans email@hidden wrote:
Hi there,
I need help, again, with the radio buttons, again…
This time I wanted to try making some radio buttons get disabled when you select an certain option. For example: when I select the color Red, the shape Circle won’t be available (grayed out). Or you can take the color Blue, but not the shape Triangle.
This is easy to do, but it comes down to how you want to store these “rules” in your system. Prototype has a method called disable() that will disable the input it is called on, and another called enable() that undoes this.
Also I want some options to be checked by default, like in the example.
That is just a matter of setting them to be checked in Freeway. It’s in the Inspector, on the Output tab.
But when these options are checked, the total price wont be shown until you select something else. So the javascript needs to load the total of the selected item before a radio button has been pressed. Can’t get my head around this code.
You need to look back to the other thread where we were discussing radio buttons. I added a postscript near the end of the thread, where I pointed out a one-line way to synchronize state at page load.
Is it also possible to make a question mark appear next to the grayed out option so people can hover over and see a message why this is grayed out? For example: Sold Out or Not Available.
This is possible using CSS to make an element appear after only the disabled inputs. I think the simplest thing would be to add the (?) button as a graphic with a Title attribute (to give you the tooltip) and then use CSS to hide it if the preceding input was enabled:
/* first hide all such tooltips */
input[type="radio"] + img { display: none; }
/* then show them if the radio button is disabled */
input[type="radio"]:disabled + img { display: inline; }
That CSS requires that the radio button appear directly before the image, so if you have a label between them (in source order) then you’ll need to change the instances of + to ~ in the above. The + “combinator” means the second element appears directly after the first one in the output HTML. The ~ combinator means that the two elements are siblings: so it works regardless of intervening elements, as long as the two elements referenced share the same direct parent.
Walter
Sorry for the long question but I’m really excited to get this working right.
So, where and how do I apply this disable and enable code if I want to disable a certain radio button if an other radio button is selected?
I looked into the other thread and the code, but I’m not sure what the part is that synchronize the state at page load.
The CSS (?) button, I build a button, where do I put the CSS? Do I make a style out of it or do I need to put it in the extend option? Also what do I put in the Tag or Name?
Would be awesome if you could give me a Freeway example file so I can see where you’re putting the code, this way I can figure it out myself, hopefully.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
On Nov 13, 2015, at 8:16 AM, Frans Boumans email@hidden wrote:
Hi Walter,
Thanks again for the quick response!
So, where and how do I apply this disable and enable code if I want to disable a certain radio button if an other radio button is selected?
That depends on how you want to structure the rules. Can you explain what the interactions are?
I looked into the other thread and the code, but I’m not sure what the part is that synchronize the state at page load.
I was thinking of a different thread, I think. I updated the Gist with a second file (it appears first below) with the major changes starting at line 35:
Because the inner function is pulled out and given a variable reference (set_values) you can call it over and over without having to duplicate that code. Read the comments, it explains what I did.
The CSS (?) button, I build a button, where do I put the CSS? Do I make a style out of it or do I need to put it in the extend option? Also what do I put in the Tag or Name?
In the Freeway document I sent earlier, draw a graphic box on the page somewhere the size that you want the (?) to be, and style it to look the way you want it to. You can change the shape to an oval to make it a circle, fill it with color (and don’t forget to add a same-color border to it so it doesn’t end up with ragged edges). Type a question mark in it, and use centering and shift to move it to the center. When you have everything looking the way you want it to, click elsewhere on the page, and then click once on the graphic you just made (the corner handles should show) and cut to the clipboard.
Now double-click into the text box that has the radio button and the label following it, and move the cursor to the right of the label. Paste. Use the arrow keys to move the cursor after the next label, and paste again. Repeat until all of the labels have the image following them.
In the Styles palette, create a new style. In the Tag field, enter this: input[type="radio"] ~ img (if you are reading this in Mail, don’t add the back-tick quotes, I have added them here to make this look correct on the Web site, where they will not actually appear). Now tab into the Name field, delete whatever is there, and then tab back out – this ensures that Freeway doesn’t sneak the name back in. Finally, click on the Extended button, click New, and in the name field enter display, and in the value field, enter none. Save the style
Next, add another style. In the Tag field, enter this: input[type="radio"]:disabled ~ img, and repeat the dance with the Name field. In the Extended interface, add name: display and value: inline.
Now you have the styles in place. When you get back to me about the rules that govern the interlock between the two radio groups, I can show you how to integrate that with the rest of the script. Right now, with the CSS that you have created above, all of the (?) images should be hidden when you look in a browser. If they aren’t, then Freeway has done something helpful like output the two styles in the wrong order. You can force the order by adding leading spaces to the value in the Tag field to change the sort order (because it’s sorted alphabetically). The first style has to appear before the second one.
Walter
Would be awesome if you could give me a Freeway example file so I can see where you’re putting the code, this way I can figure it out myself, hopefully.
Thanks for the help Walter, I’ve updates my sample and edited the code and the question mark graphics, it all works perfect.
Now for the next part:
as I said before, I want to make some options go gray. In this example, lets disable the square option if you got the red option selected and disable the circle option if the blue option is selected. Also needs to work the other way around, so if I select the circle first, the blue option should be disabled and so on.
Also is it possible that if you select the square option first and red is still active by default, it will gray out, but can it also be unchecked?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
So something like this, maybe (and don’t forget to un-check the radio buttons you have set to be checked on page load):
// add this at the top of the script
var opposites = $H({red: 'square', blue: 'circle'});
// before the line that begins with 'var color_samples...', add this
var interlock = function(){
$$('input[type="radio"]:disabled').invoke('enable');
opposites.each(function(pair){
if($$('input[value="' + pair.key + '"]:checked').length > 0){
$$('input[value="' + pair.value + '"]').each(function(elm){
elm.checked = false;
elm.disable();
});
}
if($$('input[value="' + pair.value + '"]:checked').length > 0){
$$('input[value="' + pair.key + '"]').each(function(elm){
elm.checked = false;
elm.disable();
});
}
});
};
interlock();
document.on('click', 'input[type="radio"]', interlock);
This is not tested, but it ought to work. What it does is establish some pairs of fields that are mutually exclusive, then loop through your form looking for one side or the other to be set. If it is, the opposite is disabled and un-checked (so that if you had a legal combination picked initially, and then changed one side to make the other choice illegal, you don’t end up with a form that contains a chosen, but disabled – so it can’t be un-checked – option).
If you wanted to pre-select a pair of options, as you had in your example, then you would take care not to choose an illegal pair. The second to the last line above means that the interlock function is fired when the page loads, and the last line sets a listener on the click event to fire it again each time a radio button is clicked on the page.
Walter
On Nov 16, 2015, at 4:45 AM, Frans Boumans email@hidden wrote:
Hi there,
Sorry for the long wait!
Thanks for the help Walter, I’ve updates my sample and edited the code and the question mark graphics, it all works perfect.
Now for the next part:
as I said before, I want to make some options go gray. In this example, lets disable the square option if you got the red option selected and disable the circle option if the blue option is selected. Also needs to work the other way around, so if I select the circle first, the blue option should be disabled and so on.
Also is it possible that if you select the square option first and red is still active by default, it will gray out, but can it also be unchecked?
