[Solved] Adding totals to grid table using custom script

0

Hi, want to add totals across a 3×2 grid table of inputted numbers – so summing rows and columns and providing a grand total for the grid.  Ideally I would want this happen real-time (like continuous sum) but I guess that will not be possible, so I will present the final grid on another question page. 

Am I correct in thinking I can only do this through a custom script, and would I need to use hidden values for each of the totals (so 5 variable plus a 6th for the grand total)? 

jaggers40 asked

    Best answer

    1

    If you want it to happen in real time, you’ll need to use Javascript, not custom scripting. Custom scripting can’t interact with the page as it’s changed (before submission of the data).

    Check out this survey, is this what you’re looking for? http://www.surveygizmo.com/s3/2542663/sum-rows-and-columns-of-table

    Here’s the code I used for that:

    $(document).ready(function(){
    $(“#sgE-2542663-1-5-box”).change (function(){
    var endOffice = $(“#sgE-2542663-1-6-10001”).val()*1;
    var dayOffice = $(“#sgE-2542663-1-6-10002”).val()*1;
    var endGotham = $(“#sgE-2542663-1-7-10001”).val()*1;
    var dayGotham = $(“#sgE-2542663-1-7-10002”).val()*1;
    var endGreys = $(“#sgE-2542663-1-8-10001”).val()*1;
    var dayGreys = $(“#sgE-2542663-1-8-10002”).val()*1;

    var office = dayOffice + endOffice;
    $(“.office”).text(office);

    var gotham = dayGotham + endGotham;
    $(“.gotham”).text(gotham);

    var greys = dayGreys + endGreys;
    $(“.greys”).text(greys);

    var weekend = endOffice + endGotham + endGreys;
    $(“.weekend”).text(weekend);

    var weekday = dayOffice + dayGotham + dayGreys;
    $(“.weekday”).text(weekday);
    });
    });

     

    The part that’s showing the text is jut a text element with some blank spans, like this:

    Total hours of The Office: <span class=”office”>0</span><br />
    <br />
    Total hours of Gotham: <span class=”gotham”>0</span><br />
    <br />
    Total hours of Grey’s Anatomy: <span class=”greys”>0</span><br />
    <br />
    Total weekend hours: <span class=”weekend”>0</span><br />
    <br />
    Total weekday hours: <span class=”weekday”>0</span>

     

    Hope this helps get you started in the right direction! This will only display the results, not store them. If you want to store them, you can add some hidden values on the same page, and set those using Javascript.

    Elizabeth Rose answered
      0

      Elizabeth – great that was really helpful to get me going.  I tripped up when pasting some of your code above as the quotes were converted to another form of quotes and took a while to realise that was causing the problem!

      Agree this does not STORE the results, so when the survey is printed, all you get is a bunch of zeros.  

      If I create hidden values, how would you “set” these using javascript?

      Another option might be to add another row to the table calling it TOTAL and overwrite the field content with javascript? Not sure if that is possible given the field is a user input space.

      jaggers40 answered
        ×

        Login

        Question stats

        • Active
        • Views719 times
        • Answers2 answers
        • Followers0 followers