Webform live calculations in table/matrix

Question

I am trying to create a work time allocation webform. My goal is to create a table (6 columns and addable rows) and get a live sum of all columns at the bottom. (edit: pardon my lacking terminology. With live I meant client side ajax or js that updates instantly when the user fills in the form, before submitting it)

I tried using a webform and webform matrix module, they allow for a table with addable rows. But I can't get the live sums to work. Is there another method or module I could use that would suite my case better?

TLDR; I need a webform with a table supporting x amount of rows and a live sum at the bottom. Any suggestions what modules to use?

The colored cells are buttons.

Answer 1

Refer to Filter form submission data by a field value with Views, Webform for a tutorial to display the data collected by Webform in a filterable, tabular format, using the Webform module (of course), and the Views module.

After you created an appropriate view, you could consider either of these approaches:

1. Add the "Views Calc" module to add the "live sums" that you're looking for. Here is an excerpt from its project page:

   This module adds simple calculations to a views table. Requires the Views module.

   You can SUM, AVERAGE, COUNT, MIN, MAX, or AVG selected columns. A plug in theme makes the view look more spreadsheet-like (right justifies numeric fields, shades calculated columns and rows, and underlines calculated rows).

   And this is a typical screenprint using the Views Calc module:

   

   Refer to my answer to "Total count of two different content types in one View?" for more details about how to use the Views Calc module.

   Disclosure: I'm a co-maintainer of this module,
   I hope this does not violate the site's policy on self-promotion.

2. Use the Views Summarize module. Here is an excerpt from its project page:

   Enables an extra display style which displays summaries of a column on the last row.

   There isn't a lot (any?) documentation available about actually using this module, but the "clue" is like so: Click on the "settings" icon for the display style, then enable a summarizer on one of the columns.

   Refer to the project's home page for a screenprint of a view using this module.

3. Addd the calculation via custom logic in views templates, as explained in one of the answers to the question about "How can I add a summary row to a Drupal View?". Here is a quote from that answer:

   ... Create a views-view.tpl.php for your view, and then edit it calculate and print out the summary.

   Another option is to create another display for the same view, and then create a views-view-unformatted.tpl.php and calculate and print out the summary w/o doing a print $row; to avoid calling the fields template. Then add use view display where needed.

Note: the extra clarification (requirement?) about "live" only got added after I wrote most of my answer. I.e. via a comment like "... something client side that updates as the user fills in the form without submitting it first". So far I'm not aware of any module that ALSO supports that. Not sure if there is a way to do that using the "Views templates" approach described above (if there is such way, please add another answer related to that also).

Answer 2

I found some additional resources on AJAX and manipulating a webform before submitting it. It is not a complete solution but if anyone is on the same path it might be of use. Thanks to @Pierre.Vriens for pointing me in the right direction.

The tutorial is here.