Very cool! Both the plugin and the interactive demo!! Things like this really shine when you can see them in action!

@Kevin:

Your absolutely correct in that you should never rely on values, like price, which are passed from the client to the server. This script is to help you implement better UI controls, not to be as an aid for any server-side logic that's needed.

There are many use cases for needing to calculate values based upon your DOM layout and this is the reason I created the plug-in.

@Dan

Exactly, Sorry to make it sound like you wouldn't know better. I guess my comment was for the google searcher / passer byer that was looking for scripts to copy / paste.

Nice plugin but has one flaw, it is not versatile enough to be used in multiple tables. There will be a conflict from grandTotal. Another thing, maybe an option were you used checkbox and radio should be implemented. Lets say you click on radio; somehow the price should be included in the calculation. all in all nice plugin.

Dan, would you mind showing with an example how to implement multiple tables and the radio button with values.Would be interesting to know for a rookie like me.

Thanks

Brilliant plugin, Dan! Thank you very much!
Since I am not the superadvanced poweruser... Is there a way to allow only integer numbers or the "." to be ignored?

Thank you, Dan! ;)

@Phil:

What do your selectors look like? I suspect your selectors are wrong for picking the value from the selected radio element.

@Phil:

Use this instead for your jQuery call:

$("input[@name='processor'], input[@name='memory'], input[@name='hard_drive']").sum({bind: 'click', selector: '#total'});

There appears to be a bug detecting the bind parameter unless you use the object notation.

Thanks, I will see if I can make it work now!

@Phil:

Make sure you're loading the Field Plug-in:
http://jquery.com/plugins/project/field

Otherwise the val() function will return the value for each element (since you're not filtering to only the checked items.)

@Phil:

You can't use the "checked" attribute selector, because then only the originally checked item gets the behavior applied to it.

When I do:

$(document).ready(
   function (){
      $("input[@name='processor'], input[@name='memory'], input[@name='hard_drive']").sum('click', '#total');
   }
);

<dt>Memory</dt>
<dd>
   <div class="configurator_option">
      <input type="radio" name="memory" value="16"/>
      <label>1GB DDR2 667Mhz (1-1GB) - $16 | $25</label>
   </div>
   <div class="configurator_option">
      <input type="radio" name="memory" value="38"/>
      <label>1GB ECC DDR2 667 (1 - 1GB) - $38 | $60</label>
   </div>
   <div class="configurator_option">
      <input type="radio" name="memory" value="38"/>
      <label>2GB DDR2 667Mhz (1-2GB) - $38 | $50</label>
   </div>
   <div class="configurator_option">
      <input type="radio" name="memory" value="64"/>
      <label>2GB ECC DDR2 677 (1 - 2GB) - $64 | $100</label>
   </div>
</dd>

<div>
   <strong>Total:</strong>
   $<span id="total">0</span>
</div>

Only the memory item that is checked has it's value copied to the #total element.

Hi,

It's a great plugin, just one question.

I'm programming an german onlineShop, so I have to use , instead of . for decimals,
what do I have to change in the source to keep the calculation working?

Hi

THX for ur reply.
I tried it but it's still the same, I cleared the cache etc..

It's still calculating but I get a point instead of a comma.
My prices are using commas.

what else can I try?

Hi Dan,

I've been following your comments with Phil, and have been doing every last thing in my hopeless search to just get your plug-in working. I'm very limited with Javascript jargon, and jQuery in general. If you wouldn't mind, please have a look at my page, I've been at this for quite some time now with no luck.

http://www.yurtsofhawaii.com/site/calc.html

Thanks in advance!

Dan,

I've was calling jQuery from the Google server, so I've just changed that up again for you to see that it still won't work.

After I left this post last night I experimented for another hour. I copied your entire demo page, and tried calling your exact scripts in the header. That worked. When I called the field, and calculation plug-in from my server, it stopped working.

I'm now calling the jQuery from the Google server in the header, at:
http://www.yurtsofhawaii.com/site/calc.html but it's not working.

Thanks again Dan!

Hi

Sorry I wasn't online for a while.

Finally I transferred my project on a testserver.
Till now I wasn't able to get it running with commas.

U can see it here:
http://dev.fotosemrad.at/index.php?idcatside=4&...

What if I just reformat the output? Would the total Sum then still work???

THX Philipp

Hi

I changed the code in here:

http://admin.dev.fotosemrad.at/plugins/shop/inc/js...

is that wrong??

Hi Dan,

I'm looking to try and do something a little different with your plug-in and wondering whether it is possible in some way.

I have a number of INPUT fields with multiple values attached to various attributes. Depending on the situation, instead of taking the usual VALUE attribute, I need to be able to chose the actual attribute from which to SUM.

eg
<input id="item1" name="item1" value="3" value2="1.67" value3="3.5" />
<input id="item2" name="item2" value="4" value2="2" value3="5" />

I was hoping to be able to do something like:
$(#item1").attr("value2").sum();

but unfortunately that doesn't work.
Any ideas?

Thanks,
Simon

That might work. I'm not too bothered about the posted values as all the calculation is happening client side, and any posting in happening via Ajax in the background. Here's me trying to overly complicate things. Thanks for your thoughts!

Is there a way to evaluate the result of:

$("input[type=text]").sum("keyup", "#total");

I need to throw an alert if the value of the sum exceeds 100.

Thanks,

Kevin

I'm working on a project to convert metric units. Everything works fine in all browsers except Internet Explorer. In IE, it seems like the 2nd bind event never gets called so #kg-cm never calculates. Is there something I am doing wrong with the calc() method?

I have a few text fields:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Bar</th>
<th>KG/CM</th>
<th>PSI</th>
</tr>
</thead>
<tr>
<td><input id="bar" type="text" name="ztest1" /></td>
<td><input id="kg-cm" type="text" name="ztest2" /></td>
<td><input id="psi" type="text" name="ztest3" /></td>
</tr>
</table>

$(document).ready(function() {
//pressure fields
         
   $('#bar').bind('keyup', function(event){
   
   $('#psi').calc(
      
         'bar * numberA',
         
         {
            bar: $('#bar'),
            numberA: ('14.503861')
         },
         
         function (a){
         
            return a.toFixed(2);
         },
         
         function ($this){
         
            var sum = $this.sum();
            
            $('#psi').text(sum.toFixed(2));
         }
      );
   
   });
   
   
   $('#bar').bind('keyup', function(event){
                           

    $('#kg-cm').calc(
      
         'bar * numberB',
         
         {
            bar: $('#bar'),
            numberB: ('1.02')
         },
         
         function (a){
         
            return a.toFixed(2);
         },
         
         function ($this){
         
            var sum = $this.sum();
            
            $('#kg-cm').text(sum.toFixed(2));
         }
      );   
   
   });

}
);

how do i use this javascript to calculate multiple input?

here is my html form
<form name="form1" id="form1" method="post" action="...">
water<input type="text" name="water"> power<input type="text" name="power">
</form>
and loop form to 47
...
<form name="form47" id="form47" method="post" action="...">
water<input type="text" name="water"> power<input type="text" name="power">
</form>

i want each form calculation water+power not calculate all from.
thanks for help.

hey great plugin,

i try to use the european number format (german).. but same problem than phillip..

http://webasic.de/calculation/

it doesn work with ","

thx for updating,

now it works in euro format.. i'm add replace(/\./,',') + " EUR" to the recalc function..

like this: return s.toFixed(2).replace(/\./,',') + " EUR";

i know, its not the best way