Hi, The typical approach would be to have a function that does whatever work you want to do when the option's value is changed, and separately have an event handler that calls that function with the appropriate checkbox at appropriate times. In your dom:loaded function, you can locate the checkboxes that are already selected and call your function directly.
Here's an example: (More easily viewed on Pastie: http://pastie.org/334728) * * * * <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <title>Checkboxes</title> <style type="text/css"> #log p { margin: 0px; } </style> <script type="text/javascript" src='libs/prototype.js'></script> <script type="text/javascript"> function init() { var options; options = $$('.option'); options.each(function(opt) { if (opt.checked) { setUpOption(opt); } }); options.invoke('observe', 'click', optionClicked); } function optionClicked(event) { setUpOption(event.findElement()); } function setUpOption(opt) { log("Setting up for option " + opt.id + ", value = " + opt.checked); } function log(msg) { var p; p = new Element('p'); p.update(msg); $('log').appendChild(p); } document.observe('dom:loaded', init); </script> </head> <body> <form id='theForm'> <input type='checkbox' class='option' id='check1' value='1' checked><label for='check1'>Checkbox 1</label> <br><input type='checkbox' class='option' id='check2' value='1'><label for='check2'>Checkbox 2</label> </form> <div id='log'></div> </body> </html> * * * * In that example, since I already have an array of the checkboxes (since we're about to invoke 'observe' on them), I just used Enumerable#each to loop through and call my worker function for the ones that are checked. The event handler (I just used the one, click, but obviously you'll want to use whatever) calls the worker function when the box is clicked. Since 'check1' is checked on load, we see a message from setUpOption for it when the page loads; we then see another message from it whenever the box is clicked. HTH, -- T.J. Crowder tj / crowder software / com On Dec 8, 5:42 pm, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote: > I am new to prototype, so I guess this must be a common question. It > is difficult to explain and also difficult to search for. > > I start with the code - it should later become a javascript shopping > cart: > > function purchase() { > // get product > var product = > products.get(this.identify().sub('purchase', '')); > > if (this.checked) { > cart.addProduct(product); > Element.addClassName('purchase' + > product.getCategory() + 'Area', > 'areaGreen'); > } > else { > cart.removeProduct(product); > var removeAreaGreen = true; > cart.getProducts().each(function(pair) { > if (pair.value.getCategory() == > product.getCategory()) { > removeAreaGreen = false; > } > }); > if (removeAreaGreen) > Element.removeClassName('purchase' + > product.getCategory() + 'Area', 'areaGreen'); > } > cart.refresh(); > } > > function selectOption() { > // get product > var product = > products.get(this.identify().sub('purchase', '').sub > ('Options', '')); > product.setActiveOption($(this.identify()).value); > cart.refresh(); > } > > // when the dom is fully loaded, execute these scripts > document.observe("dom:loaded", function() { > > // initializing options > // todo: find a way to init options and products > > // add event handlers > $$('.modulePurchase .options').invoke('observe', > 'change', > selectOption).invoke('observe', 'keyup', selectOption); > $$('.modulePurchase .purchase').invoke('observe', > 'click', > purchase); > }); > > This works great so far. Elements with ('.modulePurchase .purchase') > are simple checkbox input fields. Elements with > ('.modulePurchase .options') are select boxes. > > My requirement now is that some of the elements are already checked > during start of the page. So I want that the functions purchase and > selectOptions should be called on any of the mentioned elements during > start up of the page. The problem is there is no onload-Event for > input fields. Also it is not possible to fire native events. > > I cannot do this: > > $$('.modulePurchase .options').invoke('selectOption'); > > because selectOption is not a function of Element. Do you have any > ideas how I can solve this easily? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
