price-picker-with-initial-values.js

// get a reference to the color examples, and hide them all
var color_samples = $$('#color-sample img').invoke('hide');
// get a reference to all of the color radio group elements
var colors = $$('input[name="color"]');
// handler function to show only the selected color swatch
var choose_color = function(){
  // re-hide all of the swatches
  color_samples.invoke('hide');
  // loop through the color buttons
  colors.each(function(elm, idx){
    // turn on the swatch that matches the selected field
    if(elm.checked) color_samples[idx].show();
  });
};
// run the function, in case the form is pre-valued
choose_color();
// listen for clicks on the color buttons, run the function
colors.invoke('observe', 'click', choose_color);

// the same thing, only with the shapes
var shape_samples = $$('#shape-sample img').invoke('hide');
var shapes = $$('input[name="shape"]');
var choose_shape = function(){
  shape_samples.invoke('hide');
  shapes.each(function(elm, idx){
    if(elm.checked) shape_samples[idx].show();
  });
};
choose_shape();
shapes.invoke('observe', 'click', choose_shape);

// the prices are saved in a hash object
var prices = {'square': 20, 'circle': 22, 'triangle': 25, 'red': 11, 'green': 13, 'blue': 14};

// pull out the method that displays the prices so we can call it again
var set_values = function(evt){
  // reset to start at 0
  var total = 0;
  // loop through the colors
  colors.each(function(elm){
    // get the price from the selected color
    if(elm.checked) total += prices[elm.value];
  });
  // same thing with the shapes
  shapes.each(function(elm){
    if(elm.checked) total += prices[elm.value];
  });
  // update the total field
  $('output').setValue(total);
};

// now call it when the page loads, to set the initial state
set_values();

// update the total each time a radio button is clicked
document.on('click', 'input[type="radio"]', set_values);

price-picker.js

// get a reference to the color examples, and hide them all
var color_samples = $$('#color-sample img').invoke('hide');
// get a reference to all of the color radio group elements
var colors = $$('input[name="color"]');
// handler function to show only the selected color swatch
var choose_color = function(){
  // re-hide all of the swatches
  color_samples.invoke('hide');
  // loop through the color buttons
  colors.each(function(elm, idx){
    // turn on the swatch that matches the selected field
    if(elm.checked) color_samples[idx].show();
  });
};
// run the function, in case the form is pre-valued
choose_color();
// listen for clicks on the color buttons, run the function
colors.invoke('observe', 'click', choose_color);

// the same thing, only with the shapes
var shape_samples = $$('#shape-sample img').invoke('hide');
var shapes = $$('input[name="shape"]');
var choose_shape = function(){
  shape_samples.invoke('hide');
  shapes.each(function(elm, idx){
    if(elm.checked) shape_samples[idx].show();
  });
};
choose_shape();
shapes.invoke('observe', 'click', choose_shape);

// the prices are saved in a hash object
var prices = {'square': 20, 'circle': 22, 'triangle': 25, 'red': 11, 'green': 13, 'blue': 14};

// calculate the total each time a radio button is clicked
document.on('click', 'input[type="radio"]', function(evt){
  // reset to start at 0
  var total = 0;
  // loop through the colors
  colors.each(function(elm){
    // get the price from the selected color
    if(elm.checked) total += prices[elm.value];
  });
  // same thing with the shapes
  shapes.each(function(elm){
    if(elm.checked) total += prices[elm.value];
  });
  // update the total field
  $('output').setValue(total);
});