By jjjames on

I am creating on online catering form for people to place catering orders. Some fields include "Chicken" "Steak" "Rice" "Soda". I wan't users to be able to specify how many "Chickens" "Steaks" "Rice" and "Soda" they want for their catering order.

So if Chicken is $3, Steak is $4, Rice is $2 and Soda is $2...if they choose "3 Chickens, 1 Steak, 1 Rice, and 3 Sodas" the total should be: $21. How do I calculate the totals on the fly?

I would like a LIVE calculator based on the quantity they enter so that they can get a total on the fly.

What is the best way to do this? Also, how would I create a view that displays the totals of each form submitted?

Thanks!

⋅ Categories: Drupal 6.x

Comments

bwv’s picture

bwv commented

This might work:

http://drupal.org/project/computed_field

jjjames’s picture

jjjames commented

Thanks will look into it more :)

jjjames’s picture

jjjames commented

It does add the fields, but the results aren't visible until I save. Is there a way to get a live preview?

elianhi’s picture

elianhi commented

Hi James,
More than 1 year after, did you find a solution?
I have the same problem you had.

Regards, Elian.

jjjames’s picture

jjjames commented

Hello-
Some custom jquery was written to show the total in real-time. It's been a while and don't really know how it worked. Let me know if you want me to dig deeper and try to figure out how it was done.
cya

qtrimble’s picture

qtrimble
he/him/his
Location Chapel Hill, North Carolina
commented

I am interested in how you achieved this if you can dig this up.

Thanks!

jjjames’s picture

jjjames commented

Here's the script that was pulling values from different webform fields and calculating them on the fly:

<script type="text/javascript">

$(document).ready(function() {
            $("#webform-component-entrees input:text, #webform-component-additional_items input:text, #webform-component-beverages input:text").keypress(function(e) {
                if(window.event) {
                    if(!(e.keyCode > 47 && e.keyCode < 58 || e.keyCode == 8 || e.keyCode == 0)) {
                        return false;
                    }
                } else if(e.which) {
                    if(!(e.which > 47 && e.which < 58 || e.which == 8 || e.which == 0)) {
                        return false;
                    }
                }
            });
            $("#webform-component-entrees input:text, #webform-component-additional_items input:text, #webform-component-beverages input:text").keyup(function(e) {
                if(window.event) {
                    if(e.keyCode > 47 && e.keyCode < 58 || e.keyCode == 8 || e.keyCode == 0) {
                        $calculate();
                    } else {
                        return false;
                    }
                } else if(e.which) {
                    if(e.which > 47 && e.which < 58 || e.which == 8 || e.which == 0) {
                        $calculate();
                    } else {
                        return false;
                    }
                }
            });
            var $calculate = function() {
                var $entrees = 0;
                $("input[name^='submitted[entrees]']").each(function() {
                    $entrees += +$(this).val() * $(this).parent().find("span.field-suffix").text().replace(/[^\d\.]*/g, '');
                });
                var $additional = 0;
                $("input[name^='submitted[additional_items]']").each(function() {
                    $additional += +$(this).val() * $(this).parent().find("span.field-suffix").text().replace(/[^\d\.]*/g, '');
                });
                var $beverages = 0;
                $("input[name^='submitted[beverages]']").each(function() {
                    $beverages += +$(this).val() * $(this).parent().find("span.field-suffix").text().replace(/[^\d\.]*/g, '');
                });
                var $grandTotal = $entrees+$additional+$beverages;
                $("#final_total").html("Entrees Per Person Total : $" + $entrees.toFixed(2) + "<br/>" +
                                       "Additional Items Total : $" + $additional.toFixed(2) + "<br/>" +
                                       "Beverages Total: $" + $beverages.toFixed(2) + "<br/>" +
                                       "Grand Total : $" + $grandTotal.toFixed(2));
            };
        }); 

</script>

The totals will be shown in this div:

<div id="final_total"></div>  </div>
houen’s picture

houen commented

FYI: Computed_filed doesnt work with referenced fields