StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could do three things:</p> <blockquote> <ul> <li>Use AJAX en do it properly serverside</li> <li>Create an array with the IDs of the radiobuttons and values, and onClick lookup the value and add that to the total</li> <li>Misuse the ID attribute to store the value in, and write some JS, to add it up. For instance #val1_1 #val2_4 etc. (not recommended)</li> </ul> </blockquote> <p>Would you like me to eleborate on one of these options.</p> <p>If you do not want to use AJAX, I would suggest going for option two, that's rather elegant.</p> <p>HTML:</p> <pre><code><input class="radio" type="radio" id="ks1p" name="keystage1yr1" value="Paper" /> <span>&#163;25</span> <input class="radio" type="radio" id="ks1c" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span> <input class="radio" type="radio" id="ks1cp" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span> <input class="radio" type="radio" id="ks2p" name="keystage1yr2" value="Paper" /> <span>&#163;25</span> //etc.. </code></pre> <p>JS:</p> <pre><code>var prices= new Array(); prices["ks1p"]=1; prices["ks1c"]=2; prices["ks1cp"]=3; //etc var lastPrice = new Array(); lastPrice ["keystage1yr1"]=0; lastPrice ["keystage1yr2"]=0; //etc var totalPrice = 0; $('.radio').click(function(){ var id = $(this).attr('id'); var name= $(this).attr('name'); if(lastPrice[name] != 0){ totalPrice = totalPrice - lastPrice[name]; } lastPrice[name] = prices[id]; totalPrice = totalPrice + prices[id]; alert(totalPrice); }); </code></pre> <p>Fiddle: <a href="http://jsfiddle.net/nggLr/" rel="nofollow">http://jsfiddle.net/nggLr/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload