Adding AJAX forms inputs together, on user update

Question

UPDATE 3

James, the MondayTotal, is an Class in span tags, like,

    <span class="TimebreakdownTotalWeek">Mon</span>
<span class="MondayTotal">0</span>

UPDATE 2

This is the function that loads the whole week, Monday though to Sunday, and gives a total. I have tried, this function changing the '.totalhours' class to my mondaytotal, which then loads the weekly total into that var. Next I add 'Monday' before my +Count, that only seems to add the current rows monday into my mondaytotal class.

So for example, I have three rows with, '.Monday0', '.Monday1' and '.Monday2'. My monday total, will hold the total value, but overrides it when you enter the next value. So I enter 1 into Monday0, MondayTotal is then 1 but when you enter 2 into Monday1 instead of MondayTotal being 3, its just overrides it and now holds 2 - So basically it does not add the rows together.

I think this is due (at lest the way I see it, please correct me if I am wrong), that its the 'index' each time it just resets to 0 and does not loop right.

 var LoadHourTotals = function(Count) {
    if (typeof Count === "undefined" ) {
        var $total = $('.TotalHours');
        var $value = $('.Input');
    } else {
        var $total = $('.'+Count);
        var $value = $('.'+Count);
    }

    $value.on('input', function (e) {
        var total = 0;
        $value.each(function (index, elem) {
            if (!Number.isNaN(parseFloat(this.value, 10))) total = total + parseFloat(this.value, 10);
        });
        $total.html(total);
    });
} //End

UPDATE

James, do you mean the html form that I input into? If so, it is not that easy, it is built using CakePHP form helper, but there is the code,

<input name="data[0][maintime]" class="TimebreakdownInput Monday0" type="text">

Then when the user clicks to load another form element, it will add,

<input name="data[1][maintime]" class="TimebreakdownInput Monday1" type="text">

Then next, for example,

<input name="data[2][maintime]" class="TimebreakdownInput Monday3" type="text">

Then same for all the other days. If that is not what you where asking for, please explain more what you need,

Thanks.

I am working on a form that adds the total number entered total for a week, giving weekly total. I found a function on a post on here, and with a few changes does what I want it to do for the whole week.

But now I am working on adding together all the days, so I have a total for all Mondays, Tuesdays etc. and also a grand total off all the week (but I have not worked on that let).

var LoadDailyTotal = function(Count) {
    var $WeekTotal = $('.MondayTotal');

    if (typeof Count === "undefined" ) {
        var $WeekValue = $('.Monday0');
    } else {
        var $WeekValue = $('.Monday'+Count);
    }

    $WeekValue.on('input', function(e) {
        var totalweek = 0;
        var currentTotal = parseFloat ($('.MondayTotal').html() );

        $WeekValue.each(function (index, elem) {
            if (!Number.isNaN(parseFloat(this.value, 10))) totalweek = totalweek + parseFloat(this.value, 10);
        });
        $WeekTotal.html(currentTotal + totalweek);
    });
}

Right now, this sort of works, but I don't think the loop is working right. One the defult row that loads, you enter (for example) 1, then add the new AJAX loaded row, and say you enter 2, that does make 3 in the total. But if you update the first row, to 2, it should be 4 but I get 5, so its keeping the total, which I don't want. What I need is it to update the total on each row, if and when the user changes.

Sorry if I have not explained myself right, please give me a change to explain better, if needed or if you want more code.

Thanks,

In your event handler you add the recently input value to the total (so if you have just one line, say Monday0, and keep changing its value, your total will be the sum of all numbers you have input). To fix this, you will need to sum all .Monday0 -> .MondayN elements every time a number is input. Can you show html for .Monday0 element and also for .MondayTotal please? — James
– James, Commented Jun 27, 2014 at 12:09
Maybe I do not understand correctly, will not looping through your input tags give you the total count you want? (you can filter the .class attribute based on a substring containing the day of the week you want to filter). If you prepare a jsfiddle we can play with, it would be much nicer :-) — Igor L.
– Igor L., Commented Jun 27, 2014 at 13:40
Yes, and it does work, on the row it's self. So when adding mon -> sun, that prints my total (I post that function in a sec) for that week. But when I want it to do, is now add all the mondays together and give me a total for those. Then each day in its self. — C0ol_Cod3r
– C0ol_Cod3r, Commented Jun 27, 2014 at 13:42
Sorry I have try / trying to set up a JS fiddle but its hard as I am using AJAX and PHP loops to set up some of this, but I will try — C0ol_Cod3r
– C0ol_Cod3r, Commented Jun 27, 2014 at 14:46
I guess I asked for the HTML for .MondayTotal so it would be easier to exclude that one when summing. — James
– James, Commented Jun 27, 2014 at 14:48

Sonicdeadlock · Accepted Answer · 2014-06-30 01:12:49Z

2

If you added a class for each day then you could for example select all the mondays then add up their values.

<input name="data[0][maintime]" class="TimebreakdownInput Monday0 Monday" type="text">
<input name="data[1][maintime]" class="TimebreakdownInput Monday1 Monday" type="text">
<input name="data[2][maintime]" class="TimebreakdownInput Monday2 Monday" type="text">

var getDayTotal = function(day){
   var days=$('.'+day);
   var total =0;
   days.each(function(){
       total+=parseFloat(this.value, 10);
   });
   return total;
}

$('.mondayTotal').html(getDayTotal('monday'));

answered Jun 30, 2014 at 1:12

Sonicdeadlock

882 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

C0ol_Cod3r Over a year ago

This is now I sort of gone with it, I post the code that I got to work below

C0ol_Cod3r · Accepted Answer · 2014-06-30 12:56:28Z

This is the function that I use that gets it to work, I yes like Sonicdeadlock says, I made all the mondays, to same class by removing the loop.

  var LoadMondayTotals = function() {
    $('.TimebreakdownInput').change(function() {
        var MondayInputs = []; //Array to store all monday daily inputs
        var MondayTotals = 0; //Store Array total for display

        $(".Monday").each(function() { 
            var values = parseFloat( $(this).val() );   
            if (isNaN(values)) { values = 0; } //Set value to 0 if its not a number
            MondayInputs.push(values);
        });

        $.each(MondayInputs, function() {
            MondayTotals += this; //Count though array, add into total
        });

        $('.MondayTotal').html(MondayTotals); //Display / Add total into HTML
    });
 } //End of LoadMondayTotals

Thanks

for your help

Collectives™ on Stack Overflow

Adding AJAX forms inputs together, on user update

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related