Is it possible to make a radio button show an image when it is active? So when you click on the radio button, an image will appear and hide when an other radio button is pressed?
Also, can you add some sort of value to a radio button so you can have some sort of total counter on your page. For example: if you’ve pressed 4 radio buttons, all active at the same time, the counter will show the total of what these 4 radio buttons are worth.
Here’s an example of what I’m trying to explain: https://gamepc.nl/game-pc-kopen/game-pc-ultra
It’s from a webshop where you can build your own PC. You can select the hardware and an image will appear and the new price will be calculated.
If someone could explain to me how this is done if this is possible.
Thank you!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Is it possible to make a radio button show an image when it is active?
Yes
can you add some sort of value to a radio button so you can have some sort of total counter on your page. For example: if you’ve pressed 4 radio buttons, all active at the same time, the counter will show the total of what these 4 radio buttons are worth.
This can be done with javascript - however javascript will have to be enabled in your users Browser
Why don’t you put together a simple example page explaining exactly what you want to happen and we can see what we can do for you.
If you are codeaphobic the step away now because you will have to write/add code on your FW pages.
I’ve managed to alter the code to match with my test setup. (www.plug-and-play.nl/test) The total count does work but because I’m using Radio Buttons and they are not the same group, you can select them all. If I make them the same group, so only one at a time can be selected, I can’t get the code to work.
Also, how do I get the total number show a value like 7.55? It only shows the first numbers and not the number after the dot.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Radio buttons are designed to only allow one in a group to be selected. Think of them as a more accessible (readable at a glance) version of a picking list. They only work for groups up to 7 or 8 or so, otherwise a picker is more correct. But they are designed to be mutually exclusive – that’s their role.
If you want a checkbox (multiple chosen options possible) behavior, but you want a different visual representation of the chosen state, you can do that with CSS, but ask yourself if you want to send mixed signals to your users. People know, intuitively, the difference between these two form elements – they have used them their entire computer “life” and have internalized their rules. When you break those rules, do so deliberately and with the knowledge that you are going to confuse a percentage of your users – plan ahead to make it clear what you mean.
Walter
On Oct 24, 2015, at 11:09 AM, DeltaDave email@hidden wrote:
Because you are using Radios you wouldn’t have a Total (hidden) for each Radio. Only 1 Total required.
Also check that you are consistent with naming - dont mix upper/lower case ie ID blue, Name Blue
Dont have time right now to look at a specific Radio example for you but you are on the right track.
So I’ve tried to make it work, but it doesn’t… I made 1 total field (for each option), but it keeps showing 0 after clicking on the radio buttons. Also I tried to add the second options in the code, don’t know if I did it right. I think the group thing messed it up.
Just like Walter said, I want to use the radio buttons because there can only be chosen one at a time, for each option. So in this example: you can choose only 1 color, and in the second option you can choose only 1 shape. I’ve made 1 group out of all the radio buttons for each option, so the color radio buttons is group1 and for the shape radio buttons is group2.
Example can once again be found here: www.plug-and-play.nl/test
freewaytalk mailing list
email@hidden
Update your subscriptions at:
So if I am reading this mockup correctly, it should either say 1 or 2, depending on whether you have selected an option in the shape or color or both. Is that what you’re after? Are you planning to make the values different per color or shape?
Walter
On Oct 25, 2015, at 6:37 AM, Frans Boumans email@hidden wrote:
So I’ve tried to make it work, but it doesn’t… I made 1 total field (for each option), but it keeps showing 0 after clicking on the radio buttons. Also I tried to add the second options in the code, don’t know if I did it right. I think the group thing messed it up.
Just like Walter said, I want to use the radio buttons because there can only be chosen one at a time, for each option. So in this example: you can choose only 1 color, and in the second option you can choose only 1 shape. I’ve made 1 group out of all the radio buttons for each option, so the color radio buttons is group1 and for the shape radio buttons is group2.
Example can once again be found here: www.plug-and-play.nl/test
That’s correct. And I do want to use different values per color or shape.
Example: if I select green and circle I get a total of 10, but if I select red and diamond I get a total of 25. Also, is it possible to use values like 5,5 or 9,75?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I figured that was what you were up to here, so I made a sample that does that. As to the decimal numbers, yes, you can, but JavaScript doesn’t handle decimal math very well, because it treats the numbers as floating point numbers, which have an arbitrary 32-bit precision, and thus you can easily end up with 1.999999 instead of 2. The way around this is to state all of your price calculations in cents, and then use a presenter function to show the total in dollars (or Euros).
Here’s the example:
And here’s the code that I pasted into Protaculous 2, with comments to explain what is going on.
On Oct 25, 2015, at 11:10 AM, Frans Boumans email@hidden wrote:
Hi Walter,
That’s correct. And I do want to use different values per color or shape.
Example: if I select green and circle I get a total of 10, but if I select red and diamond I get a total of 25. Also, is it possible to use values like 5,5 or 9,75?
And if you didn’t want to use javascript to show/hide the colour/shape choices it can be done with just CSS - however it does employ more complex selectors. Such as:
Awesome! Thanks Walter, I will use the example file and customize it for my website! One more thing: you mentioned a presenter function, how does this work? Cause I would love to use decimal numbers, up to two numbers.
David, I would love to use the CSS instead of javascript to show the pictures as shown in your example. Is it possible I can use the freeway file you build and customize it so I can use this?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
var dollar_format = function(price_in_cents){
return (parseInt(price_in_cents, 10) / 100).toPrecision(2);
};
If you add the function above to the Protaculous 2 function body editor, before the rest of the code, you should be able to modify the code I wrote like this:
$('output').setValue(dollar_format(total));
That’s all you will need to do to get the prices (set in cents) to display in dollars in the form field.
Walter
On Oct 26, 2015, at 4:39 AM, Frans Boumans email@hidden wrote:
Awesome! Thanks Walter, I will use the example file and customize it for my website! One more thing: you mentioned a presenter function, how does this work? Cause I would love to use decimal numbers, up to two numbers.
David, I would love to use the CSS instead of javascript to show the pictures as shown in your example. Is it possible I can use the freeway file you build and customize it so I can use this?